2

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.

Improve this question
1
  • You are adding it as a tile layer, perhaps try adding it as a basemap?
    – Stella
    Commented Mar 31, 2016 at 20:31

2 Answers 2

Reset to default
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);
Improve this answer
1
  • 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
    Commented Apr 1, 2016 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);
Improve this answer
1
  • I know the example from the official documentation, but using it here made my layer control dissapear completely.
    – Cezar B
    Commented Apr 1, 2016 at 21:08

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.