0

I am writing a code that basically loads an arcgis service layer using leaflet.The code does as below:

  1. Loads POINT layer from esri rest feature server and Categorizes points based on attribute named Zone.
  2. Binds popup to each of these points using the contents of that features service layer.
  3. Loads another esri rest map service POLYGON layer and symbolize it based on attribute named Zone.

Now my problem is step 2 is not working!

Mycode:

<html>
<head>
  <meta charset=utf-8 />
  <title>Custom popups</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.0.2/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.0.7"></script>

    <!-- Esri Leaflet Geocoder -->
    <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.2.3/dist/esri-leaflet-geocoder.css">
    <script src="https://unpkg.com/esri-leaflet-geocoder@2.2.3"></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([35.125758466, -89.998102500], 11);
    L.esri.basemapLayer('Streets').addTo(map);

    var trees = L.esri.featureLayer({
    url: 'http://comgis1.memphistn.gov/arcgis/rest/services/AGO_Drain/DrainMaint_Edits/FeatureServer/0',
    style: function(feature) {
      if(feature.properties.Zone === 'B')
        {
        return {color: 'blue', weight: 2 };
        }
      else if(feature.properties.Zone === 'A')
        {
        return { color: 'red', weight: 2 }; 
        }
      else if(feature.properties.Zone === 'NULL')
        {
        return { color: 'yellow', weight: 2 }; 
        }
      else
        {
        return { color: 'green', weight: 2 };
        }
    },

    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {radius: 20, fillOpacity: 0.80});
    },

    onEachFeature: function (feature, layer) {

    feature.properties.Date_Notified = new Date(feature.properties.Date_Notified).toLocaleDateString('en-GB', {  
    day : 'numeric',
    month : 'short',
    year : 'numeric'
    }).split(' ').join('/');

    var popupContent = L.Util.template('<p><b>Oracle Number</b> - {Oracle_ID}<br><br><b>Date Notified</b> -' + '{Date_Notified}' + '<br><br><b>Zone</b> - {Zone} <br><br><b>Contact Info</b> - {Last_Name} <i>{Phone_No}</i><br><br><b>Priority</b> - {Priority}<br><br><b>Location</b> - {Streets}<br><br><b>Status</b> - {Status_1}<br><br><b>Details</b> - {Details}</p>',feature.properties);

    layer.bindPopup(popupContent);
  },

    })
  .addTo(map);

    L.esri.featureLayer({
    url: 'http://comgis1.memphistn.gov/arcgis/rest/services/AGO_Drain/Drain/MapServer/21',
    simplifyFactor: 0.5,
    precision: 5,
    style: function (feature) {
      if(feature.properties.Zone === 4){
        return {color: 'blue', weight: 2 };
      } else if(feature.properties.Zone === 3){
        return { color: 'red', weight: 2 }; 
      } else {
        return { color: 'green', weight: 2 };
      }
    }
    }).addTo(map);



</script>

</body>
</html>

N.B. I followed http://leafletjs.com/examples/geojson/example.html

1

This is happening because the points are being drawn below the polygon graphics.

The example below demonstrates how to use Leaflet panes to get control over draw order and make sure the points are rendered on top.

http://esri.github.io/esri-leaflet/examples/layer-ordering.html

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.