Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow multiple carto clients using Google Maps #2152

Merged
merged 9 commits into from
Jul 6, 2018
Merged

Allow multiple carto clients using Google Maps #2152

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
41539ef
Add multiclient example
Jun 25, 2018
361828c
Use an internal _id to handle refresh
Jun 25, 2018
8845e3f
Add leaflet multiclient acceptance
Jun 26, 2018
b474682
Handle undefined overlayMapType
Jun 26, 2018
1a0b63f
Add spec for ._getOverlayIndex
Jun 26, 2018
d56feef
Add spec for ._refreshView
Jun 26, 2018
12bcc25
Add spec for .remove
Jun 26, 2018
3f0472d
Remove multiclient leafet acceptance
Jun 26, 2018
fb017ba
Use cartojs-test user for acceptance example
Jun 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions examples/acceptance/multiclient-gmaps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<!-- Include Carto.js -->
<script src="../../dist/public/carto.js"></script>
<!-- Include Leaflet -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization,drawing"></script>


</head>

<body>

<button onclick="LAYERS.loadLayer('worldBorders')">Activar capa</button>
<button onclick="LAYERS.removeLayer('worldBorders')">Desactivar capa</button>
<div id="map" style="width: 100%;height: 96vh;"></div>

<script>
const MAP = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: { lat: 0, lng: 0 }
});

var LAYERS = {
populatedPlaces: {
loaded: false,
client: new carto.Client({
apiKey: 'default_public',
username: 'ruben-carto'
}),
source: new carto.source.Dataset('ne_10m_populated_places_simple'),
cartoCSS: new carto.style.CartoCSS(`
#layer {
marker-width: 7;
marker-fill: #EE4D5A;
marker-line-color: #FFFFFF;
}
`),
},
worldBorders: {
loaded: false,
client: new carto.Client({
apiKey: 'default_public',
username: 'ruben-carto'
}),
source: new carto.source.Dataset('world_borders'),
cartoCSS: new carto.style.CartoCSS(`
#layer {
polygon-fill: #826DBA;
polygon-opacity: 0.8;
::outline {
line-width: 1;
line-color: #FFFFFF;
line-opacity: 0.8;
}
}
`),
},
loadLayer: function (layerName) {
const dataset = LAYERS[layerName];
const layer = new carto.layer.Layer(dataset.source, dataset.cartoCSS, {});
window.layers = window.layers || {};
window.layers[layerName] = layer;

dataset.client.addLayer(layer)

if (!dataset.loaded) {
MAP.overlayMapTypes.push(dataset.client.getGoogleMapsMapType(MAP));
dataset.loaded = true;
}
},
removeLayer: function (layerName) {
const dataset = LAYERS[layerName];
const layer = dataset.client.getLayers()[0];

dataset.client.removeLayer(layer);
}
};

LAYERS.loadLayer('worldBorders');
LAYERS.loadLayer('populatedPlaces');
</script>
</body>

</html>
81 changes: 81 additions & 0 deletions examples/acceptance/multiclient-leaflet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include Carto.js -->
<script src="../../dist/public/carto.js"></script>
</head>

<body>

<button onclick="LAYERS.loadLayer('worldBorders')">Activar capa</button>
<button onclick="LAYERS.removeLayer('worldBorders')">Desactivar capa</button>
<div id="map" style="width: 100%;height: 96vh;"></div>

<script>
const map = L.map('map').setView([30, 0], 3);

L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

var LAYERS = {
populatedPlaces: {
client: new carto.Client({
apiKey: 'default_public',
username: 'ruben-carto'
}),
source: new carto.source.Dataset('ne_10m_populated_places_simple'),
cartoCSS: new carto.style.CartoCSS(`
#layer {
marker-width: 7;
marker-fill: #EE4D5A;
marker-line-color: #FFFFFF;
}
`),
},
worldBorders: {
client: new carto.Client({
apiKey: 'default_public',
username: 'ruben-carto'
}),
source: new carto.source.Dataset('world_borders'),
cartoCSS: new carto.style.CartoCSS(`
#layer {
polygon-fill: #826DBA;
polygon-opacity: 0.8;
::outline {
line-width: 1;
line-color: #FFFFFF;
line-opacity: 0.8;
}
}
`),
},
loadLayer: function (layerName) {
const dataset = LAYERS[layerName];
const layer = new carto.layer.Layer(dataset.source, dataset.cartoCSS, {});
window.layers = window.layers ||  {};
window.layers[layerName] = layer;

dataset.client.addLayer(layer)
dataset.client.getLeafletLayer().addTo(map);
},
removeLayer: function (layerName) {
const dataset = LAYERS[layerName];
const layer = dataset.client.getLayers()[0];

dataset.client.removeLayer(layer);
}
};

LAYERS.loadLayer('worldBorders');
LAYERS.loadLayer('populatedPlaces');
</script>
</body>
</html>
1 change: 1 addition & 0 deletions src/api/v4/native/google-maps-map-type.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ function GoogleMapsMapType (layers, engine, map) {
this._internalView = new GMapsCartoDBLayerGroupView(this._engine._cartoLayerGroup, {
nativeMap: map
});
this._id = this._internalView._id;
this._internalView.on('featureClick', this._onFeatureClick, this);
this._internalView.on('featureOver', this._onFeatureOver, this);
this._internalView.on('featureOut', this._onFeatureOut, this);
Expand Down
31 changes: 24 additions & 7 deletions src/geo/gmaps/gmaps-cartodb-layer-group-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ function setImageOpacityIE8 (img, opacity) {
}
}

function generateId () {
return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
}

var GMapsCartoDBLayerGroupView = function (layerModel, options) {
var self = this;
var hovers = [];
Expand Down Expand Up @@ -83,6 +87,9 @@ var GMapsCartoDBLayerGroupView = function (layerModel, options) {
blankImage: options.blankImage || 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
};

// internal id
this._id = generateId();

// non-configurable options
this.interactive = true;
this.tileSize = new google.maps.Size(256, 256);
Expand All @@ -107,9 +114,10 @@ _.extend(
},

remove: function () {
var overlayIndex = this.gmapsMap.overlayMapTypes.getArray().indexOf(this);
var overlayIndex = this._getOverlayIndex();

if (overlayIndex >= 0) {
this.gmapsMap.overlayMapTypes.removeAt(0);
this.gmapsMap.overlayMapTypes.removeAt(overlayIndex);
}

this._clearInteraction();
Expand Down Expand Up @@ -272,9 +280,9 @@ _.extend(
_reload: function () {
var tileURLTemplates;
if (this.model.hasTileURLTemplates()) {
tileURLTemplates = [ this.model.getTileURLTemplatesWithSubdomains()[0] ];
tileURLTemplates = [this.model.getTileURLTemplatesWithSubdomains()[0]];
} else {
tileURLTemplates = [ EMPTY_GIF ];
tileURLTemplates = [EMPTY_GIF];
}

this.options.tiles = tileURLTemplates;
Expand All @@ -285,11 +293,12 @@ _.extend(
},

_refreshView: function () {
var overlayIndex = this.gmapsMap.overlayMapTypes.getArray().indexOf(this);
var overlays = this.gmapsMap.overlayMapTypes;
var overlayIndex = this._getOverlayIndex();

if (overlayIndex >= 0) {
this.gmapsMap.overlayMapTypes.removeAt(overlayIndex);
overlays.setAt(overlayIndex, overlays.getAt(overlayIndex));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems a bit strange since we're setting the overlay at the same exact place. I guess that setAt triggers something internally in Google Maps. If not, this has no much sense.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's basically a reload, before we were doing remoteAt 0 -> setAt 0, but just doing setAt works fine.

}
this.gmapsMap.overlayMapTypes.setAt(0, this);
},

_checkLayer: function () {
Expand All @@ -298,6 +307,14 @@ _.extend(
}
},

_getOverlayIndex: function () {
var overlays = this.gmapsMap.overlayMapTypes.getArray();

return _.findIndex(overlays, function (overlay) {
return overlay._id === this._id;
}, this);
},

/**
* Creates an instance of a googleMaps Point
*/
Expand Down