KAMP2016: AGOL, Leaflet, Esri-Leaflet, and Turf

<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' />

<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="https://code.jquery.com/jquery-1.11.3.min.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>

<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>

<div id="basemaps-wrapper" class="leaflet-bar">
        Basemaps:
        <select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">
            <option value="Spring">Street Map</option>
            <option value="https://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>
        // 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(
            "https://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>

Modified http://code.jquery.com/jquery-1.11.3.min.js to a secure url

https://unpkg.com/leaflet@1.0.0/dist/leaflet-src.js

https://code.jquery.com/jquery-1.11.3.min.js

https://unpkg.com/esri-leaflet@2.0.3

https://unpkg.com/esri-leaflet-vector@1.0.3

https://npmcdn.com/@turf/turf@3.5.1/turf.min.js