1

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>
    <head>
        <link rel="stylesheet" type="text/css" href="leaflet.css"/>
        <!--[if lte IE 8]>
            <link rel="stylesheet" type="text/css" href="leaflet/leaflet.ie.css"/>
        <![endif]-->
        <script src="leaflet.js"></script>
        <style>
            html, body, #map {
                height:100%;
            }
            body {
                padding:0;
                margin:0;
                }
        </style>
        <title>Getting Started with Leaflet</title>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            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:'&copy; 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>
</html>
Improve this question

1 Answer 1

Reset to default
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/[email protected]/dist/leaflet.css"
    integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="
    crossorigin=""/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"
    integrity="sha384-TWB9xRHTlLQmqAngHwD7usGcf4akGf0JP6aHwlgilpmOu2UuBq5aWLsDAh39iSn1"
    crossorigin=""></script>


  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]"
    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>
Improve this answer
4
  • Thanks alot Bill ! I have one more question though.. Can we use dojo utilities via this esri-leaflet API?
    – Suyam Baidya
    Commented Jul 19, 2017 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
    Commented Jul 19, 2017 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
    Commented Jul 20, 2017 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
    Commented Jul 20, 2017 at 11:56

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.