Coding Project: Makerspace Map

Tags: programming project javascript GIS coding makerspaces

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

https://leucotic.github.io/makerspacetestmap/

Here is what the original project looked like:


This project involved:

  • actually doing stuff other than dropdowns with javascript
  • parsing a separate CSV file containing data into JSON (using papa parse)
  • working with JSON / writing to JSON
  • working with a GIS javascript library called leaflet
  • trying to figure out what the heck is an asynchronous language and how to do callback functions
  • generating html tables with javascript
  • 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)

The project was pretty clearly defined in scope, so it really didn’t take long, even though I had to teach myself almost every aspect of it from the ground up as I was piecing it all together. I learned a whale of a fuckton! I’d never worked with data at all before, especially not geographic data, nor JSON, nor even real javascript for that matter. Pretty much all the code-y stuff I’ve done so far has just been web design, so I don’t actually have much experience with programming. I’ve only ever done REALLY simple coding “practice problems” and never any actually functional projects from start to finish. so yeah there were,, many tears and creys and console.log errors. But honestly, it was so much fun, I couldn’t stop working on it even as I was ready to just sob hysterically in frustration 😅

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.