Introduction
I love music! I know, it’s not very original since a lot of people spend a lot of their time listening music. With a friend in my business school we did our thesis together by mixing our two passions: music (his) and computer science (mine). This is why we chose the impact of the recommandation algorithms in the music industry.
Two years after our graduation, he came to me with an idea. He wanted to create a map with some pin points on it in order to redirect to his Spotify playlists (take a look at his YouTube channel). Unfortunately, he’s not good at programming so I suggested that I would take the lead of the code and I’ll try to interpret as much as I can how he pictured the website.
This idea came from Gatien Tamalet, I built the website for him. If you want to visit the website it’s here: https://graceful-clear-kangaroo.glitch.me
The born of caviar-airways.com
Funny thing to mention, I just said my friend is not good at programming (logical since he doesn’t know how to code), however I don’t have any professional front-end (neither back-end) skills. I learnt by myself watching some videos on YouTube but I’m specialized in the data field. This is why the website was built with almost pure HTML, CSS and vanilla JS (I just used jQuery because I was familiar with it for the administration interface).
The idea is pretty simple: a map on which you can find points, if the user hovers one of them, the Airport tiles in the header will move to the “destination”. The name of the playlist and the picture are displayed and if the user clicks on it, he/she will be redirected to the Spotify playlist.
The choice of the map technology
Maybe you heard about it but the Google maps API is not free anymore. Indeed, they gave you $200 credits per month but still you need to provide some banking information. So instead of using OpenStreet Map which is 100% free I decided to try Mapbox. They have quite a generous free-tier (100,000 monthly requests).
The choice of the data format
Based of the documentation of Mapbox I used a .geojson which is quite convenient to use because I was already familiar with .json format. For every point I wanted to create I filled:
- a unique
id - the
nameof the playlist - the
citythat would be displayed in the Airport tiles - the
linkof the Spotify playlist - the
coordinateswith latitude and longitude of the point - the
imagelink of the Spotify
The technology behind the airport tiles
To be fully transparent with you I found it on a codepen after searching on Google, it’s done with pure JavaScript and CSS (https://codepen.io/chonz0/pen/NGRbWj or https://codepen.io/artsunique/pen/jOdORNY).
The admin interface
Since I chose to build everything in pure HTML, CSS and JavaScript (except for jQuery library) I decided to create an admin interface from scratch.
The interface is quite simple as you can see
Add a new point
You can add a new point by filling the following information:
- label: name that will be displayed under the playlist image
- city: name of the destination for the airport tiles
- link: link of the playlist
- coordinates: latitude & longitude separated by a comma
Whenever you click “Send”, the playlist will be added to the .geojson and will be displayed on the map.
Fetch covers from Spotify
This button is quite simple, it just fetches all the cover images and update them if necessary.
Modification / deletion of a point
Under there is a table with all existing playlists. On the right there are two buttons:
- The first one when you click on it you can modify all the fields (except for the image) and you need to click again to save the modifications
- The second one is a deletion button in order to remove a point from the map
Conclusion
That’s it! It was a pretty simple and fun project to do. To be honest I would like at some point to update the code base to something more modern (jQuery is so old…). If so, I’ll update this page with details on the new technology used.