Sunday, 5 November 2017

How does Leaflet layer ordering work with CartoDB layers?


All,


I'm trying to figure out how Leaflet layer ordering works when you have layers coming from CartoDB. I have a map with 1 polygon layer (cartodb), 3 point layers (cartodb), 1 basemap layer (mapbox) (and in the future hope to add tabletopJS or another google spreadsheet conduit...)


The Leaflet Layers example seems straight forward when using cloudmade layer URL's that end in the {z}/{x}/{y}.png format, which will work for Mapbox as well.


However, I can't see how to get the {z}/{x}/{y}.png format for a CartoDB layer, and wonder if the same interactivity will be supported (custom infowindows, etc.)


So far I have tried this to no avail:


function layersMap() {
var voices = cartodb.createVis('map', 'http://opendetroit.cartodb.com/api/v2/viz/08140c18-8a05-11e3-ae46-0e49973114de/viz.json');
devPoints = cartodb.createLayer('map', 'http://opendetroit.cartodb.com/api/v2/viz/62a64dd6-4d7d-11e3-b48c-db82dabd16be/viz.json');

var points = L.layerGroup([voices, devPoints]);
var map = new L.map('map', {
center : [42.339926, -83.04137],
zoom : 13,
layers: [points]
});

}

The problem with this attempt, however, is the 2nd layer doesn't draw, and there is actually two zoom controls displaying.



This is as close a solution as I can find by going through as much info on GIS.SE, Leaflet docs, CartoDB docs, etc.


So it seems I might be on the right track by getting 1 CartoDB layer to display...but not sure where to go from here...



Answer



Here is a working solution:


var map = new L.map('map', {
center : [42.339926, -83.04137],
zoom : 13
});
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'

}).addTo(map);

var voices = cartodb.createLayer(map, 'http://opendetroit.cartodb.com/api/v2/viz/08140c18-8a05-11e3-ae46-0e49973114de/viz.json').addTo(map);
devPoints = cartodb.createLayer(map, 'http://opendetroit.cartodb.com/api/v2/viz/62a64dd6-4d7d-11e3-b48c-db82dabd16be/viz.json').addTo(map);

http://codepen.io/milafrerichs/pen/VYOgpN


You can even create LayerGroups. Don't add the layer to the map and add a .on


cartodb.createLayer(map, 'viz.json')
.on('done', function(layer) {
});


Hope this helps.


No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...