0

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 <a href="">Kam</a>',
  }).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);
});
<head>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <link rel="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <style>
    #map {
      height: 100%;
      margin-top: 4%;
    }
    .leaflet-control-layers label {
      text-align: left;
    }
  </style>
  <script src="js/jquery-2.1.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="map" style="width:900px; height:570px"></div>
  <script>
    $(document).ready(function() {
      $(".letter").click(function(e) {
        $(".letter").parent().removeClass('current');
        $(this).parent().addClass('current');
        var letter = $(this).html().trim();
        $(".submenuDiv").hide();
        x = e.clientX - 10;
        pos = $(this).position();
        y = pos.top + 30;
        $("#div" + letter).css({
          left: x,
          top: y,
          position: 'absolute'
        });
        $("#div" + letter).show();
      });
    });
  </script>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.standalone.js'></script>
  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>
</body>

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

1

(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 a mapbox.light tileLayer, then your CartoDB layer, then again mapbox.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 the on('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/

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.