#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.
I am elated to have achieved a new stretch in my programming endeavours, as I also created two quick apps on the Arduino U3 board - one of which mimics the British traffic light sequence using coloured LED's and resistors on a half-size breadboard. I am still very much a coding newbie, but I do like the jump from JavaScript to C programming. I will share about my Arduino adventures in due course.
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 thought the performance would be poor, as there were 2 external JavaScript and 2 external CSS requests associated with Leaflet.js and the Marker Cluster component, but I was pleasantly surprised that the map generates just as fast as Google Maps. In fact, the end result is surprisingly beautiful and smooth. I opted to use the CDN links that the external files are hosted on.
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 deliberately retained my JavaScript code inside one file only, even though I would naturally want to divide my code into separate files like old coding principles from uni. But because I am working on the web, I want to generate less requests as much as possible.
I could combine all JavaScript files and minify them, much like the CSS files. But for now, it helps to maintain the full-blown code, which I suspect is easier to debug when changing code at the source and examining errors on Chrome DevTools. I may choose to minify them later, as the CDN filenames include the version numbers of Leaflet.js and the Marker Cluster extension, which could be a security issue. Because I am only displaying marker locations on a map, there is less of a security risk than connecting to a database containing Personally Identifiable Information (PII).
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.
~Richard