1

This code is not working ! Please help !!! Why can't I load my basemap from the arcgis rest services using leaflet ? do I need to include"the esri-leaflet" package as well to use arcgis rest services in leaflet?

<!DOCTYPE html>

html, body, #map { height:100%; } body { padding:0; margin:0; } Getting Started with Leaflet var map=L.map('map',{ center:[52.48,-1.89], zoom:14 }); L.marker([52.48,-1.89],{ clickable:true }) .bindPopup('Hello Birmingham!') .addTo(map); L.marker([52.48,-1.900],{ clickable:true, draggable:true, icon:L.icon({ iconUrl:'images/packtpub.png', iconAnchor:[32,32], popupAnchor:[32,10] }) }) .bindPopup('Hello custom!') .addTo(map); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© OpenStreetMap contributors'}).addTo(map); var hydro=L.tileLayer.wms('http://apps.geoportal.icimod.org/icimodarcgis/rest/services/HKH/AnnualSolarRadiation/MapServer',{

            format:'image/png',
            transparent:true,
            attribution:'Contains British Geological Survey materials NERC 2013',
            opacity:0.25
            });
        var soil =L.tileLayer.wms('http://apps.geoportal.icimod.org/icimodarcgis/rest/services/HKH/AnnualSolarRadiation/MapServer',{

            format:'image/png',
            transparent:true,
            attribution:'Contains British Geological Survey materials NERC 2013'});
        var firstGroup = L.layerGroup([
            L.marker([52.486,-1.890]),
            L.marker([52.488,-1.890]),
            L.marker([52.490,-1.890]),
            L.marker([52.483,-1.890]),
            L.marker([52.482,-1.880]),
            hydro
            ]).addTo(map);
        var secondGroup = L.layerGroup([
            L.marker([52.4846,-1.900]),
            L.marker([52.487,-1.890]),
            L.marker([52.489,-1.896]),
            L.marker([52.484,-1.894]),
            L.marker([52.4862,-1.880]),
            soil
            ]);
        map.on('click',function(e){
            if (map.hasLayer(firstGroup)){
                map.removeLayer(firstGroup);
                map.addLayer(secondGroup);
            } else{
                map.removeLayer(secondGroup);
                map.addLayer(firstGroup);
                }
            });
    </script>
</body>

1

Look at https://esri.github.io/esri-leaflet/examples/showing-a-basemap.html notice at the beginning they have Leaflet and Esri libraries defined. You are missing this in your code. https://esri.github.io/esri-leaflet/examples/tile-layer-1.html may also help. Here is an example of your data in a map,

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Leaflet</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css"
    integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet-src.js"
    integrity="sha384-TWB9xRHTlLQmqAngHwD7usGcf4akGf0JP6aHwlgilpmOu2UuBq5aWLsDAh39iSn1"
    crossorigin=""></script>


  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.0.8"
    integrity="sha384-ze7rgny7/YGFxBlVgTBdOABNWe5V9BYjju/qwqJhCU8XJHtuEnRlbUpN5lXyY706"
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

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

<script>
  var map = L.map('map').setView([31.2973,85.0561], 3);

  //Loading Basemaps

  var Gray =L.esri.basemapLayer('Gray').addTo(map);

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

 var topo = L.esri.tiledMapLayer({
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
  });

 var soil = L.esri.dynamicMapLayer({
    url: 'http://apps.geoportal.icimod.org/icimodarcgis/rest/services/HKH/AnnualSolarRadiation/MapServer',
    opacity: 0.7
  });

   var hydro = L.esri.dynamicMapLayer({
    url: 'http://apps.geoportal.icimod.org/icimodarcgis/rest/services/HKH/AnnualSolarRadiation/MapServer',
    opacity: 0.7
  });

  /// END Loading Basemaps

   //MapService as a Dynamic Layer  //Symbology comes from ArcServer Service
    outline =  L.esri.dynamicMapLayer({
        url:'http://apps.geoportal.icimod.org/icimodarcgis/rest/services/HKH/Outline/MapServer',
        //layers: [2],
        opacity : 1
    });

    //Put markers & grouplayers here

    // END Put markers & grouplayers here
var baseMaps = {
    "Esri Gray":Gray,
    "Topo":topo,
    "Open Street Map": osm,
    "Water":hydro,
    "Dirt":soil
};

var overlayMaps ={
"Outline":outline
};

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

</script>
</body>
</html>
  • Thanks alot Bill ! I have one more question though.. Can we use dojo utilities via this esri-leaflet API? – Suyam Baidya Jul 19 '17 at 8:10
  • You can if you want to but dojo is usually associated with ArcGIS JS not Leaflet. If your planning on using ArcGIS JS you don't need to use the esri-leaflet api. Leaflet is mostly used with plain JavaScript and some JQuery where it make sense, making it a lighter and easier to program app. – Bill Chappell Jul 19 '17 at 12:21
  • Thanks for replying Bill ! Actually, the code that I am working now is not my work ..Before this I did all my codes using ArcGIS JS API.. so for the same task I did before I had to do it all over again for this leaflet version..Argh.. If only I could use the same code here too.... I tried but couldnt find any useful plugins for running dojo in leaflet! Please help me if you know something! – Suyam Baidya Jul 20 '17 at 4:16
  • There have been some attempts and Google turned up this: gis.stackexchange.com/questions/123441/… It should be noted John is an Esri employee who has lots of experience with the Esri-leaflet library. If your not using custom predefined widgets it should be a short learning curve. Dojo is what makes the ArcGIS JS tougher to learn. – Bill Chappell Jul 20 '17 at 11:56

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.