MTL Murals

Back in December I stumbled across Montreal’s Open Data portal. When I spotted a data set of the city’s beautiful murals and their locations, I decided to create MTL Murals, a simple website that plots out Montreal’s murals on a Google Map.

My original goal was to learn about the Google Maps JS API and practice my ES6 chops but I ended up getting much more out of it. In this post I talk about what I learned from making MTL Murals and how much mileage I got from this little side project.

Making of MTL Murals

Before I could even start playing with the Google Maps API, I ran into several issues with the JSON file containing the mural data. I was trying to read it with an AJAX request but for some reason I’d get an error message saying that I didn’t have access to the file.

I had a pretty general understanding of CORS (Cross-Origin Resource Sharing), but I wasn’t sure if the error was caused by something on my end or not. After doing a bit of digging, it turns out the headers of the file were set up in such a way that it could not be read from other domains.

Luckily, a quick tweet to @MTL_DO fixed this problem. I asked about why I couldn’t access the JSON file and they addressed the issue right away. Shoutouts to the @MTL_DO team for being super helpful and resonsive on Twitter 🙌.

Once I was able to access the JSON file I dipped my feet in the Google Maps API. I used the coordinates in the JSON file and made a Marker for each mural. Once this was done, I used the Map class’ handy fitBounds() method to automatically set the zoom level to one that fits all of the map’s Markers snugly.

Next, I plugged in a lazyloader so that only the images that are visible in the sidebar are loaded. The last thing I’d want is for all mural images to load every time you visit the site. It would be sweet if the data set included links to smaller versions of the mural’s images for use in thumbnails, but life ain’t that easy.

Finally, I attached a click event handler to each Marker that opens a modal with a larger image of the respective mural inside. For the modal, I used Remodal as it is lightweight and allowed for easy CSS customization.

At this point I had implemented all of the base features that I had wanted but my code was mostly written in ES5. I was going through Wes Bos’ excellent ES6.io tutorial series at the same time, so I decided to apply the takeaways from his videos in MTL Murals. An example of this was when I used template literals to clean up the code that creates a button for each of the murals in the sidebar.

That sweet, sweet refactoring… template literals are the shit!

What I learned

The amount of mileage you can get from little side projects is unreal! Here’s a list of things I’ve learned through MTL Murals so far: