D3 Examples - SumpPumpWO

xxxxxxxxxx
 
<html>
    <head>
      <meta charset=utf-8 />
        <title>Sump Pump Work Orders</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.0/dist/leaflet.css" />
      <script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet-src.js"></script>
​
      <!-- Load Esri Leaflet from CDN -->
      <script src="https://unpkg.com/esri-leaflet@2.0.4"></script>
​
      <style>
        body { margin:0; padding:0; }
        #map { position: absolute; top:0; bottom:0; right:0; left:0; }
      </style>
    </head>
    <body>
​
            !-- Include Leaflet.markercluster via rawgit.com
            in production you'd be better off hosting these libraries yourself -->
            <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-beta.2.0/dist/MarkerCluster.Default.css">
            <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v1.0.0-beta.2.0/dist/MarkerCluster.css">
            <script src="https://cdn.jsdelivr.net/gh/leaflet/leaflet.markercluster/v1.0.0-beta.2.0/dist/leaflet.markercluster.js"></script>
​
​
            <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.1.4/dist/esri-leaflet-geocoder.css">
            <!-- Load Clustered Feature Layer from CDN -->
            <script src="https://unpkg.com/esri-leaflet-cluster@2.0.0"></script>
            <style>
                  #selectedFeatures {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    z-index: 1000;
                    background: white;
                    padding: 1em;
                  }
                  .leaflet-bar.map-text a {
                    color: #79BD8F;
                    display: inline;
                  }
            </style>
            <div id='map'></div>
            <script>
                var addressLatLngGlobal = new L.LatLng(38.025, -84.50);
                var map = L.map('map').setView(addressLatLngGlobal, 12);
                
                L.esri.basemapLayer("Topographic").addTo(map);
        
                
                    var cluster = L.esri.Cluster.featureLayer({
                        url: 'https://prdgisaccela2:6080/arcgis/rest/services/SumpPumpWorkOrders/FeatureServer/0',
                        maxZoom:16
                     }).addTo(map);
                    var wo = L.esri.dynamicMapLayer({
                        url: 'https://prdgisaccela2:6080/arcgis/rest/services/SumpPumpWorkOrders/MapServer',
                        minZoom:17
                    }).addTo(map);
        
        wo.bindPopup(function (error, featureCollection) {
    if(error || featureCollection.features.length === 0) {
      return false;
    } else {
      return 'Status: ' + featureCollection.features[0].properties.WorkflowTask;
    }
  });
​
                
                        </script>
    </body>
</html>
    