Skip to content

Instantly share code, notes, and snippets.

@nickpeihl
Created July 28, 2017 23:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nickpeihl/79bbb15bc8b10ba41bb292b12d17b034 to your computer and use it in GitHub Desktop.
Save nickpeihl/79bbb15bc8b10ba41bb292b12d17b034 to your computer and use it in GitHub Desktop.
Query ArcGIS feature service in Leaflet
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