This example will show how to get a geographic bounding box from a Leaflet map and use it to query a Socrata dataset using the
Socrata’s location datatype allows you to do simple geospatial queries, including
within_circle(). Each will return JSON for only those rows of a dataset that fall within the specified region.
The popular mapping library leaflet.js has a
getBounds() method which will return the bounding box for the current view.
getBounds() returns a
latLngBounds object, which has two
latLng child objects. Within these
latLng objects are the coordinates for the southwest and northeast corners of the bounding box.
Here’s the working example using NYC’s 7 million+ row 311 data. Using the SODA API’s geospatial and date query capabilities, we can extract just the data we’re interested in from this massive dataset. Drag the map, and the page will initiate an AJAX request for new data based on the new bounding box.
If you’re a beginner and want to learn more about Leaflet, check out this great intro tutorial by Maptime Boston.
###Let’s get started
First thing’s first, let’s set up the initial map view and basemap.
###Assemble Custom Query Parameters
Since we only want data for the past 7 days, we need a nice “YYYY-mm-dd” date string for whatever the date was 7 days ago that we’ll use later on in the SODA API call. We’ll also add a listener for Leaflet’s
dragend event, which will show a spinner and call the function
getData() every time the map’s view changes. Finally, let’s call
getData() once to populate the map’s initial view.
Let’s take a look at
getData() next. We call it once when the page loads, and then again every time the map is dragged. First, it gets the bounding box of the current view using Leaflet’s
The above code shows a transformation of the bounding box data since Leaflet returns the southwest and northeast corners of the box, and SODA expects latitude/longitude pairs for the northwest and southeast corners.
The last line calls a function called
buildQuery, which concatenates the JSON endpoint of the 311 dataset with query parameters using our
sevenDaysAgo string and our bounding box array. The resulting query contains SODA’s
$select to limit the columns of data returned, along with a
$where clause using the
within_box() operator and a
> to limit the range of dates returned.
The finished API request URL looks like this:
Continuing along in our
getData() function, it’s time to finally make our API call using jQuery’s .
getJSON(). The response from the SODA API looks like this:
… and in
.getJSON()’s callback we’ll iterate over each object and create a Leaflet
circleMarker. For each marker, we’ll also bind a Leaflet popup, and add a few attributes from the data so the user can see what the complaint type and address:
When the user drags the map, we call
getData() again and the whole process repeats: Get bounding box, transform, build API call, get Socrata data, map it! With SODA, you can get just the data you want in a given location and date range and serve it up straight from the source!
Check out the code on github. Happy Hacking (and mapping)!