#002 - Mapping in Open Source Web Technologies
It's been a busy week of coding. At work, I successfully implemented Leaflet.js to use OpenStreetMap with further integration with Mapbox to generate the vector tiles.
Previously at work, I have been toying around with Google Maps only to realise that Google have changed the API and pricing based on featured web requests. I think it's fair as we are living in a generation of information overload. For me, I just wanted to generate static markers.
Towards the end of 2018, I was challenged by senior management to explore OpenStreetMap due to the political opposition toward Google. I let the conversation sleep over the Christmas holidays, but upon our return back over the New Year, I decided to explore Leaflet.js and OpenStreetMap.
It started with an ounce of curiosity. I wanted to see if I could achieve the same result that I had running on Google Maps.
The underlying task was to regenerate double-figure marker pins across a major city near where I live and work. Me being me, I like to make life more complicated. I championed a design concept to colour code these location pins based on the geolocation of the city. I also attached a subtle location name when the user clicks on the focused marker pin.
Due to the sheer amount of marker pins that clustered closely together, I looked into the marker cluster feature. Google Maps makes use of a vibrant blue icon to act as a marker cluster. It looks fine, but since we didn't have a Google Maps API - at the time of development, I couldn't exactly use my code for prime production. I did however resort to using the Google Maps tutorial API key, so I could at least interact with my project and show my work with colleagues. It also gave me the valid reason to speak with the senior heads to sign up to the Google Maps Platform.
Because I achieved everything I could with Google Maps, I decided to spend these past two weeks to port over my code to implement Leaflet.js with OpenStreetMap. I also registered a new account on Mapbox, so I could take advantage of the API key which is needed to generate the vector tiles. In addition, I used the Marker Cluster extension that was compatible with the latest Leaflet.js framework.
I deactivated the visually eye-sore spider effect and I bundled my location markers in a multi-dimensional array. I have also refactored my code and converted the multi-dimensional array into a JSON object format. I opted to use a JSON format, so I can add extra additional key-value pairs. I also find that a JSON format is visually intuitive to read and maintain than a multi-dimensional array.
I have started to extend the location markers beyond the basic location name and address.
As you may have gathered, the project isn't sophisticated as live flight tracking or directional calculation between set locations. Nonetheless, I am happy to have explored mapping using open source web technologies, and I am happy with my colour-coded directory of location markers ready for public view.