🔰 SODA to Mapbox - open data to an application near you
SODA stands for Socrata Open Data API, as defined by their webpage
The Socrata Open Data API allows you to programmatically access a wealth of open data resources from governments, non-profits, and NGOs around the world.
If you are looking for a simple and easy way to create meaningful applications with "open data" (Austin in my case) you'll definitely want to check out their documentation.
SODA we have a problem
the biggest issue I saw in trying to get this data into my applications is the return calls from ajax in this case were not playing nice with Mapbox. Perhaps it was was just my luck but all the really stellar tutorials used google maps.
Which is great, but what happens when you want to use Mapbox?
part 1 - Getting the data 💽
Using an ajax call you can query a SODA dataset.
This ajax call lets us first target the dataset we are interested in. In this case the Austin found pets dataset.
The limit variable lets us select for how many entries we want from this dataset. Ideally we would code this with a range as to not pull the entire dataset.
Lastly we save the data as a variable so we can send it to the rest of our script
$.ajax({
url: "https://data.austintexas.gov/resource/hye6-gvq2.json",
type: "GET",
data: {
"$limit" : 2,
"$$app_token" : your_soda_token_here
}}).success(function (data) {
mapData = (data);
part 2 - Data to Longitude and Latitude ⭐
To create a new lon lat using the LngLat property from the GeoJson Library (link to the mapbox documentation).
This code creates a new constant with Mapbox tools using GeoJson to create a new constant longitude and latitude
const ll = new mapboxgl.LngLat(lon, lat);
part 3 - adding to the map 🥇
Now that we have the data and the location, it's time to add it to the map.
const petMarker = new mapboxgl.Marker().setLngLat(ll)
.addTo(map);
We create a new constant, that creates a new Mapbox marker, setting the longitude and latitude to our constant we derived from the data.
Next steps 🔆
Going forward, what we need to do is reduce the hard coding and add iterations to our code. Loops and variables to take and place multiple markers.
Thanks for reading this quick overview. If you want to watch my latest Youtube video where I go into detail about my thought process behind this code you can watch it here.
