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

  • To access Mapbox, is necessary create an access token: mapbox.com/help/create-api-access-token – Marcello Benigno Apr 26 '16 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 '16 at 11:37
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, privacy policy and cookie policy

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