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.
Hmm, how come the open data from @MTL_DO don't allow for cross-origin requests? In particular I'm looking at this: https://t.co/yUbrUCWzjJ pic.twitter.com/ZV35pG01dR
— Tetsuro Takara (@t3tchi) December 11, 2016
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 🙌.
@t3tchi Also: CORS has been enabled. And the data (Murales) should be updated in January. pic.twitter.com/WjuJC81vzJ
— Données Ouvertes MTL (@MTL_DO) December 14, 2016
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.
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:
- How awesome Yeoman is for scaffolding projects like this
- ES6 features including: promises, destructuring, template literals, arrow functions, etc.
- Google Maps JS API basics
- Debugging CORS and response header issues
Look ma, I’m on the news!
I also got some street cred through MTL Murals. Around Christmas time I posted the project on the Montreal Subreddit where I got some really nice comments.
A few weeks later I was at work when someone on my Twitter pointed out that I was on one of Montreal’s morning news shows:
I love how my Anpanman mask portrait made it to TV, bahaha!
I also did a quick phone interview for CBC’s Homerun radio show, but sadly I can’t find a clip of it anywhere online.
There’s still quite a lot to polish I would like to add to the site, and I started adding them as Issues on Github. If you have any suggestions or spot any bugs, please go ahead and add them there!
MTL Murals can be found at www.mtlmurals.com, and its source can be found on Github.