geodev-hackerlabs

Use HTML5 location and esri leaflet to query a feature service

In this lab we’ll write a Leaflet application that uses HTML5 to glean a user’s location and then fire off a spatial query to an Esri service of US Census Blocks to find out which one our end user happens to be inside.

1. First, lets get our development environment set up.

because of security rules introduced in Chrome 50 (on 4/20/2016), it is mandatory to configure https in order to take advantage of HTML5 location when you move your website into production.

For this exercise, we’ll use the complete example from the conclusion of our starter map exercise as our jumping off point.

2. Next we need to ask our end user where they are.

Use Leaflet’s built in method to ask the user to share their location and make sure to get a reference to it once it’s available.

3. Then we ask our ArcGIS service which census block they’re inside of.

Create an L.esri.query object and pass it the user’s location. Afterwards you’ll be able to fire a request to an Esri service that hosts US Census Block Groups to see which block the person is inside.

4. … and draw the right one.

Add the feature that is retrieved to the map using Leaflet’s L.geoJSON class.

In the end, hopefully your app will look kinda, sorta like this.

• Code
• Live App

---

Resources

• leaflet API reference
• esri leaflet API reference
• esri leaflet samples

Bonus

are you thirsty for more?

• add some custom styling to the census block thats drawn
• display a popup with information about the census block
• symbolize the actual user location on the map
• use Geoenrichment to query/display the total population of the census block
• refactor the logic to use turf to query census block geometries locally instead