Coding Project: Makerspace Map
I’ve been casually learning about programming and data science over the past few months, and I figured it was time to just jump in and try something myself. This project focused on geospatial data. I’ve been particularly keen on learning to work with CSVs and JSON in a web project, so this little mappy has been a bit of a stepping stone to a more major project I have in mind 😈 I was so excited to do this that I couldn’t stop working on it and I finished the grunt of it in a bit less than a week 🤖🤖🤖 (but I’ve been continuously adding more things to it since then as well, and will probably continue to expand it).
Here is what the original project looked like:
This project involved:
- parsing a separate CSV file containing data into JSON (using papa parse)
- working with JSON / writing to JSON
- trying to figure out what the heck is an asynchronous language and how to do callback functions
- designing/coding custom map markers
- making it so that you could click on a link outside of the map in order to open up a location on the map, and center the map on that location (this was actually quite challenging because this isn’t a functionality that’s really part of leaflet and so there’s no documentation/existing code for it, I had to scrape together ideas from various half-answered stackoverflow questions)
While the technical set-up in terms of map rendering and importing/parsing/using the data is pretty much done, there’s a lot of other things to be worked on, including the actual data set itself, which is a work in progress and currently has some inaccuracies.
Possible future additions to this project:
- adding automatic geocoding to it with an api so I don’t have to do it manually (by pasting it into a random website i found lol)
- maybe re-doing it with angular or react and making it a more full-fledged website instead of just a one-pager?
After some updates, here’s what it’s currently looking like:
That’s right, I changed the map from mapbox to stamen, using their toner map! I mostly did this to avoid issues with access tokens, but this map has a wonderfully graphic quality and I love it. Their watercolor map is also great, but unfortunately—although it is absolutely gorgeous—it’s not particularly functional for information purposes (there’s almost no labels or details).
I’m also working on slicing and dicing it and transitioning it into a multi-page site as opposed to just a one-pager. That’s all for now, but I’ll probably update this post once the project is finalized.