geodev-hackerlabs

Use HTML5 location, esri leaflet and turf 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 take advantage of Turf to figure out what census block they happen 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.

Step 1

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.

Step 2

3. Lets add census blocks to the map too (but not draw them yet).

Add US Census Block Groups to the map in a L.esri.featureLayer and make sure the symbology is transparent (for now).

4. Use turf to see which census block the user is inside.

First, create a turf point object and pass it the users location.

Next, loop through the polygons in the map and compare each one with the user location to see which one its inside (protip:copyright:: you’ll need a <script> tag in your app pointing at turf’s cdn for this).

5. Now we just need to draw the one we got back and pan the map.

Last, lets refresh the symbology of the features in the map to make sure the match is displayed using featureLayer.setStyle().

Step 4

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

Resources

Bonus

are you thirsty for more?

This site is open source. Improve this page.