GSCPC Basemaps w/ various layers

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.

Built with blockbuilder.org

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

<!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: "https://gis.gscplanning.com/arcgis/rest/services/basemaps/gscbase_streets/MapServer"
    })
    
    var gscBW = L.esri.tiledMapLayer({
      url: "https://gis.gscplanning.com/arcgis/rest/services/basemaps/gscbase_bw/MapServer"
    })
    
    
//     overlays
   var overlays = {}

var zoning = L.esri.dynamicMapLayer({
    url: "https://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: "https://gis.gscplanning.com/arcgis/rest/services/FutureLandUse/MapServer",
    opacity: 0.75
  })
  overlays["Future Land Use (2006)"] = flu

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js

https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js