[GIS] Leaflet Layer Control problem

leaflet

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.

Best Answer

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);
Related Question