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);}); #map { height: 100%; margin-top: 4%; } .leaflet-control-layers label { text-align: left; }
Also, if it helps, I can zip the files and provide a downloadable link to.
Thanks in advance!
أكثر...
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);}); #map { height: 100%; margin-top: 4%; } .leaflet-control-layers label { text-align: left; }
Also, if it helps, I can zip the files and provide a downloadable link to.
Thanks in advance!
أكثر...