Map Overlay via API

Published by Joe on Nov 30, 2015 at 13:25pm

Hello again, readers of the Antelle blog

There has been a lot going on since our last blog posts. Ben and I were tasked with creating a map overlay that programmatically integrated with an online API. We have also been preparing for our first Microsoft exam, “Programming in HTML5 with JavaScript and CSS3”, which is our first step to becoming a MCSD.

The task to create a map overlay, was at first, daunting. I was beginning to believe that I knew a thing or two about JavaScript, and then, this task put me back in my place, I had no idea where to even begin. I wanted to present some data on a map, but I didn't know what to use as a map, or where to find the data. I discovered that there were two main choices between types of data, those choices being JSON or XML, however, finding the data I wanted, in the correct formatting was a challenge in of itself. I happened to stumble across the Google Maps JavaScript API, which was very helpful, as at that point I still didn’t know how I was going to create the map, and furthermore, the overlay of data on the map. Google Maps API is brilliant.

Now that I had a rough idea of what I was going to do, integrate the Google Maps JavaScript API with an API that I can receive data from, I could begin. I needed to learn how to use the API itself, which wasn't too difficult as the documentation was clear and concise. At this point it also clicked that I could integrate the Google Maps JavaScript API with the HTML5 Geolocation API, which was a nice realisation. I created my first bare google map, which was awesome, and then began my search for an API which contained data that I could present on my map.

I realised that I would need location information, specifically coordinates to plot data that I wanted to display on the map. I believed for a few minutes that I would be able to find correlating coordinate information with the data that I wanted to display. That belief was short lived, and I began the hunt for coordinate information by country, and data to display by country separately, originally I wanted to display the gross domestic product by country, and on click of a marker, an information box opened. This would eventually mean that I would need to integrate two API’s together, before implementing them into the Google Maps API.

I needed to match the country name in the coordinate API, to the country name in the display data API, this was probably the most frustrating part, as countries are not named the same in every data set, leading to mismatch, and undefined data on the map. I understand that ISO codes could have made my life easier, however it was rare to find a data set with correlating ISO codes that presented the information that I wanted to present.

I eventually found the data sets I needed, and was able to compare country names with reasonable success, and finally implement markers with information windows on click of the corresponding marker, there were problems along the way, including having every country become Zimbabwe, but I managed to work through them and get a reasonable result, I went on to extend the original idea by having extra data sets implemented, allowing for information such as human development index and water sanitation to be displayed.

Our first exam is to be taken on the 8th of December, as I mentioned above, this will be our first step to becoming Microsoft Certified Solutions Developers. We have been studying for the exam rigorously, Pluralsight being my first port of call for learning content. There is a vast wealth of resources online, however, finding the good ones, and ensuring that you are studying the correct, and relevant material isn't always easy. It’s also difficult to know how well prepared for the exam you are, as a practice exam costs an extortionate amount to take, although, a free second attempt is granted if you fail your first attempt at the real thing. This exam will be a good indicator of how far we've come over the past 3 months, we have come a long way, but it will be interesting to see how close we come to passing this exam first try.

Sorry! The Antelle website does not fully support this legacy browser.  The site is fully compliant and tested against the latest versions of Chrome, Edge, Firefox, Opera and Safari.