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.

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 map = L.map("map", {
      maxZoom: 18,
      minZoom: 11
    }).setView([38.209940,-84.559783],13);
    
    var gscStreets = L.esri.tiledMapLayer({
      url: "//gis.gscplanning.com/arcgis/rest/services/basemaps/gscbase_streets/MapServer"
    }).addTo(map);
    
    var gscBW = L.esri.tiledMapLayer({
      url: "//gis.gscplanning.com/arcgis/rest/services/basemaps/gscbase_bw/MapServer"
    })
    
    var baseMaps = {
      "Streets": gscStreets,
      "Black & White": gscBW
    };

    var plowUrl = "https://gist.githubusercontent.com/maptastik/9be749cb768beb1f97baaa173bcec029/raw/9909dfc51d6dfc91d37bb0f892bda8f93435f70c/georgetown_ky_snow_priority_2015.geojson";
//     route colors
    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"
      }
    }
    
//     load and add route data
    d3.json(plowUrl, function(err,data){
      
//       highlight style on hover
      function highlightFeature(e) {
        var layer = e.target
        layer.setStyle({
          weight: 3,
        })
      }
//       reset style when mouse leaves feature
      function resetHighlight(e) {
        plowLayer.resetStyle(e.target)
      }
//       zoom to feature on click
      function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds())
      }
//    	what events trigger what function
      function onEachFeature(feature, layer) {
        layer.on({
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          click: zoomToFeature
        })
      }
//       add route layer
      var plowLayer = L.geoJson(data, {
        style: priorityStyle,
        onEachFeature: onEachFeature
      }).addTo(map)
    })
    
    var controlLayers = L.control.layers(baseMaps).addTo(map)  
  </script>
</body>