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.
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.
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.
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.
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