Using GeoJson and Ajax to add a feature collection to Mapbox 🦎
In my last video I added a custom point to a map, this time I'm taking it a step further. If you remember we pulled our data from an ajax call using SODA to get lost pet data from the city of Austin.
I am using a for loop to add multiple features in what’s known as a feature collection. This is a geoJson method that Mapbox uses to keep track of basic map geometry with associated information.
To start, I had to get a feel for what the data needed to look like. Fortunately for me there were many resources, including the GeoJson documentation to see how the new array should be formatted. A really helpful tool was this GeoJson viewer and validator.
After I knew what the data needed to look like, I built a for loop to take the raw data from my call, and format it into my new, formatted array. This proved to be a bit of a formatting challenge as much of my lost pet data was nested in many brackets. I had to take it slow, read carefully and just log to the console a lot before I got it where I wanted it.
Once I was able to get through this part, it really was as simple as adding the new feature collection to the map using the info on adding layers to Mapbox.
