Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
222 lines (199 sloc) 8.71 KB
<html>
<head>
<meta charset=utf-8 />
<title>KAMP2016 Presentation LSC - Past Projects</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>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.0.3"></script>
<script src="https://unpkg.com/esri-leaflet-vector@1.0.3"></script>
<script src="https://npmcdn.com/@turf/turf@3.5.1/turf.min.js"></script>
<style>
body {margin: 0; padding: 0;}
* {font-family: 'Open Sans', sans-serif;}
button:focus {background: #c0392b; color: #ffffff}
#map {
position: absolute;
top: 0;bottom: 0;right: 0; left: 0;
}
#basemaps-wrapper,
#buffers-wrapper {
position: absolute;
right: 10px;
z-index: 400;
background: white;
padding: 10px;
}
#buffers-wrapper {top: 10px;}
#basemaps-wrapper {top: 80px;}
#basemaps,
#buffers {margin-bottom: 5px;}
</style>
</head>
<body>
<!-- Map -->
<div id="map"></div>
<!-- Buffer Selector -->
<div id="buffers-wrapper" class="leaflet-bar">
Buffers (mi):
<button id="buffNone">Remove Buffer</button>
<button id="buff10" autofocus>0.10</button>
<button id="buff25">0.25</button>
<button id="buff50">0.50</button>
<button id="buff100">1.0</button>
</div>
<!-- Basemap Selector -->
<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&amp;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&amp;app_code=oO4iig4GLocEZTJb4NdUTg&amp;lg=eng">Imagery + Streets (HERE)</option>
</select>
</div>
<!-- Script for map -->
<script>
// Initialize map
var map = L.map('map', {
center: [38.201851, -84.548979],
zoom: 14
});
// Create pane for city limits
map.createPane('cityLimitsPane');
map.getPane('cityLimitsPane').style.zIndex = 200;
map.getPane('cityLimitsPane').style.pointerEvents = 'none';
// Create pane for buffers below marker
map.createPane('bufferPane');
map.getPane('bufferPane').style.zIndex = 201;
map.getPane('bufferPane').style.pointerEvents = 'none';
// Basemaps
var layer = L.esri.Vector.basemap('Spring').addTo(map);
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);
}
// Pull in Georgetown City Limits from GSCPC ArcGIS Server using esri-leaflet
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)
// LSC Sites and buffers
// Load site geojson from AGOL using query that returns GeoJSON
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
// Also function in which we'll run TurfJS and swithch betweeen buffer sizes
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);
// 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);
// console.log(JSON.stringify(buffer50))
// 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'
});
// Add and remove buffer rings
$("#buffNone").click(function() {
map.removeLayer(buffer10Layer);
map.removeLayer(buffer25Layer);
map.removeLayer(buffer50Layer);
map.removeLayer(buffer100Layer);
})
$("#buff10").click(function() {
map.addLayer(buffer10Layer);
map.removeLayer(buffer25Layer);
map.removeLayer(buffer50Layer);
map.removeLayer(buffer100Layer);
})
$("#buff25").click(function() {
map.addLayer(buffer25Layer);
map.removeLayer(buffer10Layer);
map.removeLayer(buffer50Layer);
map.removeLayer(buffer100Layer);
})
$("#buff50").click(function() {
map.addLayer(buffer50Layer);
map.removeLayer(buffer10Layer);
map.removeLayer(buffer25Layer);
map.removeLayer(buffer100Layer);
})
$("#buff100").click(function() {
map.addLayer(buffer100Layer);
map.removeLayer(buffer10Layer);
map.removeLayer(buffer25Layer);
map.removeLayer(buffer50Layer);
})
});
</script>
</body>
</html>