Ryan Cooper | @maptastik | ryan-m-cooper.com
Desktop GIS
Geoprocessing
Server
Web
Platform
import arcpy
Case: Leadership Scott County Project Site Selection
Complete a service project that benefits the community
Complete a service project that benefits the community
Leaflet as mapping platform (FOSS4G)
Basemaps
"Spring" vector tileset (Esri): Esri-Leaflet, Esri-Leaflet Vector Tile Plugin
GSCPC Streets (Esri): ArcGIS Server, Esri-Leaflet
GSCPC B&W (Esri/FOSS4G): ArcGIS Server, tileify-ags-proxy
Imagery + Streets (Other): HERE Maps
Task: Make an interactive map of the past LSC projects (Code):
<head>
...
<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.0.3"></script>
<script src="https://unpkg.com/esri-leaflet-vector@1.0.3"></script>
....
</head>
<body>
...
<div id="map"></div>
...
<div id="basemaps-wrapper" class="leaflet-bar">
Basemaps:
<select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">
<option data-tile='esriVT' value="Spring">Street Map (Vector Tiles)</option>
<option data-tile='ags' value="http://gis.gscplanning.com/arcgis/rest/services/basemaps/gscbase_streets/MapServer">GSCPC Streets (ArcGIS Server)</option>
<option data-tile='tms' value="http://gscpcgis-tileify-ags-proxy.herokuapp.com/tiles/{z}/{x}/{y}?url=http%3A%2F%2Fgis.gscplanning.com%2Farcgis%2Frest%2Fservices%2Fbasemaps%2Fgscbase_bw%2FMapServer&transparent=true">GSCPC B&W (AGS-Proxy)</option>
<option data-tile='tms' value="http://1.aerial.maps.cit.api.here.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png8?app_id=jHW2qixQHBjQkbewy0cH&app_code=oO4iig4GLocEZTJb4NdUTg&lg=eng">Imagery + Streets (HERE)</option>
</select>
</div>
</body>
// Initialize map
var map = L.map('map'. {
center: [38.201851, -84.548979],
zoom: 14
});
function setBasemap(basemap) {
if (layer) {
map.removeLayer(layer);
var listIndex = document.getElementById("basemaps").selectedIndex;
var newBasemap = document.getElementsByTagName("option")[listIndex].dataset.tile;
if (newBasemap == "esriVT") {
layer = L.esri.Vector.basemap(basemap);
} else if (newBasemap == "ags") {
layer = L.esri.tiledMapLayer({
url: basemap
});
} else if (newBasemap == "tms"){
layer = L.tileLayer(basemap);
}
map.addLayer(layer);
}
}
// Change basemap
function changeBasemap(basemaps) {
var basemap = basemaps.value;
setBasemap(basemap);
}
// Add Esri vector tiles
var layer = L.esri.Vector
.basemap('Spring')
.addTo(map);
Leaflet as mapping platform (FOSS4G)
Basemaps
"Spring" vector tileset (Esri): Esri-Leaflet, Esri-Leaflet Vector Tile Plugin
GSCPC Streets (Esri): ArcGIS Server, Esri-Leaflet
GSCPC B&W (Esri/FOSS4G): ArcGIS Server, tileify-ags-proxy
Imagery + Streets (Other): HERE Maps
Add Georgetown city limits
Pull from GSCPC ArcGIS Server (Esri)
Add to map using Esri-Leaflet (Esri/FOSS4G)
Task: Make an interactive map of the past LSC projects (Code):
L.esri.featureLayer({
url: 'http://gis.gscplanning.com/arcgis/rest/services/CityLimits/MapServer/0',
style: {
color: "#f1c40f",
weight: 2,
fillOpacity: 0,
dashArray: "5,5",
pane: 'cityLimitsPane'
}
}).addTo(map)
Leaflet as mapping platform (FOSS4G)
Basemaps
"Spring" vector tileset (Esri): Esri-Leaflet, Esri-Leaflet Vector Tile Plugin
GSCPC Streets (Esri): ArcGIS Server, Esri-Leaflet
GSCPC B&W (Esri/FOSS4G): ArcGIS Server, tileify-ags-proxy
Imagery + Streets (Other): HERE Maps
Add Georgetown city limits
Pull from GSCPC ArcGIS Server (Esri)
Add to map using Esri-Leaflet (Esri/FOSS4G)
Add LSC projects to map
Add to map w/ pop-up using Leaflet (FOSS4G)
Task: Make an interactive map of the past LSC projects (Code):
var promise = $.getJSON(
"http://services1.arcgis.com/dpmGqj7FxlwlvK0y/arcgis/rest/services/lscProjects/FeatureServer/0/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=3857&spatialRel=esriSpatialRelIntersects&resultType=none&distance=&units=esriSRUnit_Meter&outFields=description&returnGeometry=true&multipatchOption=&maxAllowableOffset=&geometryPrecision=&outSR=4326&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnDistinctValues=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&quantizationParameters=&sqlFormat=none&f=pgeojson&token="
);
//Create popup
function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.description)
}
// Promise function for putting sites on map
promise.then(function(data) {
var lscProjects = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 5,
opacity: 1,
color: "#ffffff",
fillOpacity: 1,
fillColor: "#c0392b"
})
},
onEachFeature: onEachFeature
}).addTo(map);
// ...
// Some other stuff that will come later
// ...
});
Leaflet as mapping platform (FOSS4G)
Basemaps
"Spring" vector tileset (Esri): Esri-Leaflet, Esri-Leaflet Vector Tile Plugin
GSCPC Streets (Esri): ArcGIS Server, Esri-Leaflet
GSCPC B&W (Esri/FOSS4G): ArcGIS Server, tileify-ags-proxy
Imagery + Streets (Other): HERE Maps
Add Georgetown city limits
Pull from GSCPC ArcGIS Server (Esri)
Add to map using Esri-Leaflet (Esri/FOSS4G)
Add LSC projects to map
Pull GeoJSON straight from AGOL (Esri)
Add to map w/ pop-up using Leaflet (FOSS4G)
Generate buffers
Use TurfJS for client-side geoprocessing (FOSS4G)
Task: Make an interactive map of the past LSC projects (Code):
// Within function for adding project locations...
// Generate buffers with TurfJS
var unit = 'miles';
var buffer10 = turf.buffer(data, 0.1, unit);
var buffer25 = turf.buffer(data, 0.25, unit);
var buffer50 = turf.buffer(data, 0.5, unit);
var buffer100 = turf.buffer(data, 1, unit);
// Style buffers
function buffStyle(feature) {
return {
color: "#e74c3c",
opacity: 1,
fillColor: "#ffffff",
fillOpacity: 0
}
}
// Generate buffer GeoJSON to be added and removed from map
var buffer10Layer = L.geoJson(buffer10, {
style: buffStyle,
pane: 'bufferPane'
}).addTo(map);
var buffer25Layer = L.geoJson(buffer25, {
style: buffStyle,
pane: 'bufferPane'
});
var buffer50Layer = L.geoJson(buffer50, {
style: buffStyle,
pane: 'bufferPane'
});
var buffer100Layer = L.geoJson(buffer100, {
style: buffStyle,
pane: 'bufferPane'
});
// Some code to turn off and on different buffers
// ...
WARNING: Poor Don't-Repeat-Yourself practices...
...but it works :)
Task: Present analysis and project recommendations to group
Task: Present analysis and project recommendations to group
// Example: Scroggin Park Contours
L.tileLayer('http://ryan-m-cooper.com/more-than-esri-gis/03_PresentationToGroup/data/scContours/{z}/{x}/{y}')
Task: Add simple map of the project site to the project proposal
Georgetown-Scott County Planning Commission
@maptastik
ryan-m-cooper.com
ryancooper729@gmail.com