1

I'd like to add a Vector Layer and configure it in a Leaflet Map with Leaflet Control Layers.

The code is ...

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="utf-8" />
              <title>Example</title>
              <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
              <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />


              <style>
                  .map {
                      position: absolute;
                      width: 100%;
                      height: 100%;
                  }
              </style>
          </head>
          <body>
              <div id="map" class="map"></div>
              <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
              <script src="http://rawgit.com/SpatialServer/Leaflet.MapboxVectorTile/master/dist/Leaflet.MapboxVectorTile.min.js"></script>

              <script>

                var map = new L.map('map').setView([44.907852, 7.673789],16);

                var baseLayer = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                  attribution: '? OpenStreetMap contributors'
                });

                map.addLayer(baseLayer);

                var config = {
                  url: "https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox",
                };
                var mapillarySequences = new L.TileLayer.MVTSource(config);
                map.addLayer(mapillarySequences);

                var baseMaps = {
                    "Basemap": baseLayer
                };

                var overlayMaps = {
                    "Mapillary Sequences": mapillarySequences
                };

                L.control.layers(baseMaps, overlayMaps).addTo(map);



              </script>
          </body>
          </html>

It doesn't work: my vector layer doesn't appear on the map, but if I remove these rows...

                var baseMaps = {
                    "Basemap": baseLayer
                };

                var overlayMaps = {
                    "Mapillary Sequences": mapillarySequences
                };

                L.control.layers(baseMaps, overlayMaps).addTo(map);

... all works fine.

Any suggestion, example, jsfiddle, alternatives?

Cesare

2
  • To access Mapbox, is necessary create an access token: mapbox.com/help/create-api-access-token Apr 26, 2016 at 10:44
  • Uhmmmm... I don't think this is the problem ... No error appears in log console about this and, if I comment the lines about L.control.layers and its configuration all works fine ...
    – Cesare
    Apr 26, 2016 at 11:37

1 Answer 1

4

I've solved ... doing a search on the web I've found that the problem was about the layer's zIndexes and that there is a UNDOCUMENTED (!!???), feature that solve the problem ...

Here you're a couple of useful links:

Here you're my modified code that now is working fine ...

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="utf-8" />
              <title>Example</title>
              <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
              <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />


              <style>
                  .map {
                      position: absolute;
                      width: 100%;
                      height: 100%;
                  }
              </style>
          </head>
          <body>
              <div id="map" class="map"></div>
              <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
              <script src="http://rawgit.com/SpatialServer/Leaflet.MapboxVectorTile/master/dist/Leaflet.MapboxVectorTile.min.js"></script>

              <script>

                var baseLayer = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                        maxZoom: 18,
                    zIndex: 1,
                          attribution: 'Map data: &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                            '<a href="http://viewfinderpanoramas.org">SRTM</a> | map style  &copy; <a href="https://opentopomap.org">OpeTopoMap</a> ' +
                        '(<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
                });


                var config = {
                  url: "https://d2munx5tg0hw47.cloudfront.net/tiles/{z}/{x}/{y}.mapbox",
                  zIndex: 1000
                };
                var mapillarySequences = new L.TileLayer.MVTSource(config);

                var map = L.map('map', {
                                         center: [44.907852, 7.673789],
                                         zoom: 16,
                                         autoZIndex: false,
                                         layers: [baseLayer, mapillarySequences]
                                       });

                var baseLayers = {
                    "Basemap": baseLayer
                };

                var overlayLayers = {
                    "MapillarySequences": mapillarySequences
                };

                L.control.layers(baseLayers, overlayLayers).addTo(map);

              </script>
          </body>
          </html>

I hope that can be useful for others!

Cesare

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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