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.
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.
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).
Last, lets refresh the symbology of the features in the map to make sure the match is displayed using featureLayer.setStyle().
In the end, hopefully your app will look kinda, sorta like this.
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