1

I am struggling to find a solution to add my two basemaps (Esri Imagery and OpenStreetMap) and one external GeoJSON to show up on the Layer Control panel in Leaflet. Here is the block of code:

   <html>
   <head>
      <title>Test</title>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <link rel="stylesheet" href="http://k4r573n.github.io/leaflet-control-osm-geocoder/Control.OSMGeocoder.css">
      <link rel="stylesheet" href="http://makinacorpus.github.io/Leaflet.FileLayer/Font-Awesome/css/font-awesome.min.css">
      <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
      <script src="jquery-2.1.1.min.js"></script>
      <script src="http://k4r573n.github.io/leaflet-control-osm-geocoder/Control.OSMGeocoder.js"></script>
      <script src="http://makinacorpus.github.io/Leaflet.FileLayer/leaflet.filelayer.js"></script>
      <script src="http://makinacorpus.github.io/Leaflet.FileLayer/togeojson/togeojson.js"></script>
     <style>
       #map{ height: 100% }
     </style>
     </head>
     <body>

    <div id="map"></div>

   <script> 

   var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
       thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';

   var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       osmAttrib = '&copy; ' + osmLink + ' Contributors',
       esriUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
       thunAttrib = '&copy; Esri &mdash; Sources: Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, GeoEye, USDA FSA, USGS, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community';

  var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib});
      esriMap = L.tileLayer(esriUrl, {attribution: thunAttrib});

  var map = L.map('map', {
            layers: [osmMap] // doar una vine aici!
        })
        .setView([45.37,26.56], 11);  

  var controlLayers = L.control.layers().addTo(map);

    $.getJSON("uat.geojson",function(data){
      var uat = L.geoJson(data,{
          style: function(feature) {
          return { color: "#FFF", weight: 1, fillColor: "#123456", fillOpacity: .6}
    }, 
           onEachFeature: function (feature, layer) {
           layer.bindPopup("<strong>" + feature.properties.Nume + "</strong>" );
    } 
        }).addTo(map); //dezactivează dacă vrei să apară doar la bifare
         controlLayers.addOverlay(uat, 'Unități administrative');
    });   

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

This code enables only the GeoJSON to appear, but not the basemaps.

I tried adapting several lines of code found in some examples, but with no result.

  • You are adding it as a tile layer, perhaps try adding it as a basemap? – Stella Mar 31 '16 at 20:31
1

Add a basemaps variable to hold the layers, then add that to the control.

 var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
   thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';

 var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   osmAttrib = '&copy; ' + osmLink + ' Contributors',
   esriUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
   thunAttrib = '&copy; Esri &mdash; Sources: Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, GeoEye, USDA FSA, USGS, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community';

var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib});
  esriMap = L.tileLayer(esriUrl, {attribution: thunAttrib});

  var baseMaps = {
      "OSM": osmMap,
      "ESRI": esriMap
  }

var map = L.map('map', {
        layers: [osmMap] // doar una vine aici!
    })
    .setView([45.37,26.56], 11);  

var controlLayers = L.control.layers(baseMaps).addTo(map);
  • This solved the problem! Yet I still don't understand why the overlay bit doesn't need to appear next to baseMaps in L.control.layers. Thank you very much for your help. – Cezar B Apr 1 '16 at 21:12
0

You should follow the example here: http://leafletjs.com/examples/layers-control.html

This should work:

var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
    esriMap = L.tileLayer(esriUrl, {attribution: thunAttrib});

var map = L.map('map', {
          layers: [osmMap] // doar una vine aici!
      })
      .setView([45.37,26.56], 11);  

var uat = null;
$.getJSON("uat.geojson",function(data){
    uat = L.geoJson(data,{
        style: function(feature) {
        return { color: "#FFF", weight: 1, fillColor: "#123456", fillOpacity: .6}
  }, 
         onEachFeature: function (feature, layer) {
         layer.bindPopup("<strong>" + feature.properties.Nume + "</strong>" );
  } 
      }).addTo(map); //dezactivează dacă vrei să apară doar la bifare
       controlLayers.addOverlay(uat, 'Unități administrative');
  });   

var baselayers = {
  'Open Street Map': osmMap,
  'ESRI': esriMap
};
var overlays = {
  'UAT': uat
}
var controlLayers = L.control.layers(baselayers, overlays).addTo(map);
  • I know the example from the official documentation, but using it here made my layer control dissapear completely. – Cezar B Apr 1 '16 at 21:08

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.