More

CartoDB layer not showing up on over mapbox layer but legend is


Currently, the legend is only displaying but not the layer.

NOTE: I am trying to run the web map on a bootstrap modal, hence you will see:$('#webmap-modal').on('shown.bs.modal', function()in the code I am posting.

With that being said, here is the code:

var map; $('#webmap-modal').on('shown.bs.modal', function() { L.mapbox.accessToken = 'pk.eyJ1IjoiaXRzbXNkIiwiYSI6ImNpaGU1cGRycDBqb290dGx6aGFkcDd4ODMifQ.21JHrd2HAFyrCxa4XLF7rQ'; map = L.mapbox.map('map', 'mapbox.light', { minZoom: 3 }).setView([60.751723, -105.907315], 3); L.control.scale().addTo(map); L.tileLayer(", { attribution: 'Created by Kam', }).addTo(map); var cdb_layer = cartodb.createLayer(map, 'https://itsmsd.cartodb.com/api/v2/viz/00873ec2-94ab-11e5-8e1b-0e3ff518bd15/viz.json') .addTo(map); L.control.layers({ 'Grey Canvas': L.mapbox.tileLayer('mapbox.light').addTo(map), 'Street Canvas': L.mapbox.tileLayer('mapbox.streets'), 'Emerald Canvas': L.mapbox.tileLayer('mapbox.outdoors'), 'Dark Canvas': L.mapbox.tileLayer('mapbox.dark'), 'Simple Canvas': L.mapbox.tileLayer('mapbox.streets-basic'), }).addTo(map); });
              

Also, if it helps, I can zip the files and provide a downloadable link to.


(duplicate of CartoDB layer not showing up on over mapbox layer but legend is on Stack Overflow)

Answer copied below.


There seem to be several mistakes here.

First of all, you would facilitate your own debugging by testing each individual functionality separately (bootstrap, cartodb… ).

You duplicate several libraries includes: Leaflet CSS and JS and jQuery (not sure about the version) are already included in CartoDB. You even include twice CartoDB! This is calling for unpredictable results.

Next, you initially add amapbox.lighttileLayer, then your CartoDB layer, then againmapbox.light(in the Layers Control definition). So your CartoDB layer is already hidden. That is very probably the reason why you see the attribution but not the layer on map.

If you want your CartoDB layer to be always shown on top of any base layer that may be selected through the Layers Control, you would set it as a Layers Control overlay so that it is always added on top of the base layers (provided that the user keeps it selected in the Layers Control).

Note that you need to use theon('done', function (layer) { /* add to Layers Control overlays */ })callback to do so. See How does one use leaflet layergroups with CartoDB layers?

var layersControl = L.control.layers({ 'Grey Canvas': L.mapbox.tileLayer('mapbox.light').addTo(map), 'Street Canvas': L.mapbox.tileLayer('mapbox.streets'), 'Emerald Canvas': L.mapbox.tileLayer('mapbox.outdoors'), 'Dark Canvas': L.mapbox.tileLayer('mapbox.dark'), 'Simple Canvas': L.mapbox.tileLayer('mapbox.streets-basic') }).addTo(map); var cdb_layer = cartodb.createLayer(map, 'https://itsmsd.cartodb.com/api/v2/viz/00873ec2-94ab-11e5-8e1b-0e3ff518bd15/viz.json') .addTo(map).on('done', function (layer) { layersControl.addOverlay(layer, 'CartoDB'); });

Demo: http://jsfiddle.net/zfLgujhv/1/