Created
July 28, 2017 23:40
-
-
Save nickpeihl/79bbb15bc8b10ba41bb292b12d17b034 to your computer and use it in GitHub Desktop.
Query ArcGIS feature service in Leaflet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var L = require('leaflet') | |
require('leaflet-draw') | |
var Esri = require('esri-leaflet') | |
var css = require('sheetify') | |
css('leaflet') | |
css('leaflet-draw') | |
css('tachyons') | |
var map = L.map('map', { | |
center: [48.5, -123.0], | |
zoom: 10 | |
}) | |
var basemap = Esri.tiledMapLayer({ | |
url: 'https://sjcgis.org/arcgis/rest/services/Basemaps/General_Basemap_WM/MapServer' | |
}) | |
basemap.addTo(map) | |
var queryService = { | |
name: 'Tax Parcels', | |
url: 'https://sjcgis.org/arcgis/rest/services/Polaris/Parcels/MapServer/1' | |
} | |
var selection = L.geoJSON() | |
.bindPopup(function (layer) { | |
var props = Object.keys(layer.feature.properties).map(function (p) { | |
return `<li>${p}: ${layer.feature.properties[p]}</li>` | |
}) | |
return `<ul>${props.join('')}</ul>` | |
}) | |
map.addLayer(selection) | |
L.drawLocal.draw.toolbar.buttons.polyline = 'Select by line' | |
L.drawLocal.draw.toolbar.buttons.polygon = 'Select by polygon' | |
L.drawLocal.draw.toolbar.buttons.rectangle = 'Select by rectangle' | |
L.drawLocal.draw.toolbar.buttons.marker = 'Select by location' | |
L.drawLocal.edit.toolbar.buttons.remove = 'Unselect features' | |
L.drawLocal.edit.toolbar.buttons.removeDisabled = 'No features are selected' | |
L.drawLocal.draw.handlers.marker.tooltip.start = 'Click map to select feature(s)' | |
L.drawLocal.edit.handlers.remove.tooltip.text = 'Click on a feature to unselect' | |
var drawControl = new L.Control.Draw({ | |
edit: { | |
featureGroup: selection, | |
edit: false, | |
remove: true | |
}, | |
draw: { | |
polygon: { | |
showArea: true | |
}, | |
circle: false, | |
marker: { | |
icon: L.icon({ | |
iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', | |
iconSize: [1, 1] | |
}) | |
} | |
} | |
}) | |
map.addControl(drawControl) | |
map.on(L.Draw.Event.CREATED, function (e) { | |
selection.clearLayers() | |
var layer = e.layer | |
var query = Esri.query({ | |
url: queryService.url | |
}) | |
query.intersects(layer) | |
query.run(function (err, fc, res) { | |
if (err) throw err | |
selection.addData(fc) | |
}) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment