Skip to content

Instantly share code, notes, and snippets.

@maptastik

maptastik/index.html

Last active October 13, 2016 16:29
Show Gist options
  • Save maptastik/7665953de6f77b51b021e4534b897a39 to your computer and use it in GitHub Desktop.
Save maptastik/7665953de6f77b51b021e4534b897a39 to your computer and use it in GitHub Desktop.
Download ZIP
KAMP2016: AGOL, Leaflet, Esri-Leaflet, and Turf
Raw
index.html
<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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://npmcdn.com/@turf/[email protected]/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>1/10</button>
<button id="buff25">1/4</button>
<button id="buff50">1/2</button>
</div>
<!-- Basemap Selector -->
<div id="basemaps-wrapper" class="leaflet-bar">
Basemaps:
<select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">
<option value="Spring">Street Map</option>
<option 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</option>
</select>
</div>
<!-- Script for map -->
<script>
// Initialize map
var map = L.map('map', {
center: [38.201851, -84.548979],
zoom: 14
});
// Create pane for buffers below marker
map.createPane('bufferPane');
map.getPane('bufferPane').style.zIndex = 200;
map.getPane('bufferPane').style.pointerEvents = 'none';
// Basemaps
var layer = L.esri.Vector.basemap('Spring').addTo(map);
// Switch between Esri Vector Tiles and a regular TMS
function setBasemap(basemap) {
if (layer) {
map.removeLayer(layer);
if (basemaps.value == "Spring") {
layer = L.esri.Vector.basemap(basemap);
} else {
layer = L.tileLayer(basemap);
}
map.addLayer(layer);
}
}
// Change basemap
function changeBasemap(basemaps) {
var basemap = basemaps.value;
setBasemap(basemap);
}
// 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);
// 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'
});
// Add and remove buffer rings
$("#buffNone").click(function() {
this.focus();
map.removeLayer(buffer10Layer);
map.removeLayer(buffer25Layer);
map.removeLayer(buffer50Layer);
})
$("#buff10").click(function() {
map.addLayer(buffer10Layer);
map.removeLayer(buffer25Layer);
map.removeLayer(buffer50Layer);
})
$("#buff25").click(function() {
map.addLayer(buffer25Layer);
map.removeLayer(buffer10Layer);
map.removeLayer(buffer50Layer);
})
$("#buff50").click(function() {
map.addLayer(buffer50Layer);
map.removeLayer(buffer10Layer);
map.removeLayer(buffer25Layer);
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment