Loading ArcGIS Service & GeoJSON

This block demos a few things:

Loading basemaps of Scott County, KY created in ArcGIS and served from ArcGIS Server using Esri-Leaflet. The amount of dialog boxes one has to go through to style features in ArcGIS makes the styling process a bit clunky, but it’s possible to create a nice basemap in ArcGIS. The layer switcher shows two. The first one is based on OpenMapSurfer’s style. The second is based on Stamen’s Toner.
Loading external GeoJSON data with D3. I had never used this method before until I came across Ian Johnson’s tutorial series “Working with spatial data for the web”. In the past I’ve used leaflet-ajax. It has worked well for me, but I like the idea of having D3 at my disposal and not having to load another library. Furthermore, while I do appreciate Calvin Metcalf’s work on leaflet-ajax, D3 has a larger community contributing to it so I’m tempted to move to D3 for loading data.

forked from maptastik‘s block: Loading ArcGIS Service & GeoJSON

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" />
  <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script>
  <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></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 gscStreets = L.esri.tiledMapLayer({
      url: "//gis.gscplanning.com/arcgis/rest/services/basemaps/gscbase_streets/MapServer"
    })
    
    var gscBW = L.esri.tiledMapLayer({
      url: "//gis.gscplanning.com/arcgis/rest/services/basemaps/gscbase_bw/MapServer"
    })
    
    
//     overlays
   var overlays = {}

  var zoning = L.esri.dynamicMapLayer({
    url: "//gis.gscplanning.com/arcgis/rest/services/Zoning/MapServer",
    opacity: 0.65
  })
  console.log(zoning)
  zoning.bindPopup(function (error,featureCollection) {
    zoningOrdinance = "https://21992de3ed3eb3ca1e3088f765d0738e5b619296.googledrive.com/host/0B4r2Idoty2XWeG0xcmx4aGtsYkE/zoning-ordinance-final-2013-01-03.pdf"
    console.log(featureCollection.features[0])
    return "Zone: " + featureCollection.features[0].properties.Zoning + "<br><a href='"+zoningOrdinance + "'>Read full zoning ordinance</a>"
  })
  overlays["Zoning"] = zoning
  
  var flu = L.esri.tiledMapLayer({
    url: "//gis.gscplanning.com/arcgis/rest/services/FutureLandUse/MapServer",
    opacity: 0.75
  })
  overlays["Future Land Use (2006)"] = flu

  var plowUrl = "https://raw.githubusercontent.com/gscplanning/snow-removal/gh-pages/resources/data/Street_SnowPriority_GTOWN_20151119_WGS84.geojson"; 
//     load and add route data
  var plowing;
   d3.json(plowUrl, function(err,data){
    function priorityColor(d) {
      return d == 1 ? "#2196F3":
            d == 2 ? "#F44336":
            d == 3 ? "#4CAF50":
            d == 4 ? "#FFEE58":
            d == 5 ? "#9E9E9E":
            "#fff";
    }
//     route opacity
    function priorityOpacity(d) {
      return d <= 3 ? 1:
            d == 4 ? 0.5:
            0;
    }
//     basic route style
    function priorityStyle(feature) {
      var legend = feature.properties.legend;
      return {
        weight: 1.75,
        color: priorityColor(legend),
        opacity: priorityOpacity(legend),
        lineCap: "butt",
        lineJoin: "round"
      }
    }
//       add route layer
      plowing = L.geoJson(data, {
        style: priorityStyle
      })
      overlays["City Plowing"] = plowing
      // console.log(plowing)
    
    console.log(overlays)

    var map = L.map("map", {
      maxZoom: 18,
      minZoom: 11,
      layers: [gscStreets,zoning]
    }).setView([38.209940,-84.559783],13);
    
     var baseLayers = {
      "Streets": gscStreets,
      "Black & White": gscBW
      }
    var controlLayers = L.control.layers(baseLayers,overlays,{
      collapsed: false
    }).addTo(map)  
  })
  </script>
</body>

GSCPC Basemaps w/ various layers

Loading ArcGIS Service & GeoJSON

index.html