In this post I am going to touch base on a recent work which I embarked upon where I was asked to highlight postal code areas on a google map depicting the performance of an individual sales person within that area via marker embed chart.
Similar as this:
In order to address the task I opted for google maps API for the reasons of its popularity and flexibility. The solution I worked was composed of the following components:
1. Google Geocoding API: This API usage was primarily to place the marker on the map requiring the latitude and longitude coordinate values mapping to the postal code in Australia. This API is responsible for translating the postal code value to the required coordinates for the map marker
2. Google Charts API: This API is used to draw/plot the sales person performance data in the google map marker information window. Using this API in the sample I have rendered a column chart but, it has to offer a wide variety of chart types with great detailing tweaks and settings offered in the API
3. Google Maps (Marker/Info window): This API sections have been used to place the marker and the associated Info window (containing the embedded chart)
4. Postal code area Highlight: Now, here’s the tricky bit… Which took me a while to figure out myself.
For the postal code area to be highlight now a days google by itself offers a highlight mechanism as illustrated below:
In the above check the red dotted line mapping the postal code boundary
Now first line of thoughts made me to leverage what’s available with the google by default and I tried using the same in conjunction with rest of my task to be accomplished involving setting the marker with an info window and embed chart inside the same. But scanning the entire google maps API I was unable to figure out a way as to where I can combine all the pieces of the puzzle together.
But then again googling examples to find a methodology for the same I stumbled upon the following link which partially answered my problem (and being very close to my requirements):
Now only thing was to marry all together….
So investigating upon and with an aim to not to elongate the mystery of the solution, I found my solution with the use of KML files used in conjunction with google maps to custom draw shapes on the google maps driven by a custom directive files for the shapes termed as KML (Keyhole Markup Language)
So now I was able to draw shapes on google maps, but still I wasn’t having any near plans to write or draw this KML files by myself in this life for Australian continent, landing me up to the page for Australian Bureau of Statistics
Now next challenge which I faced was, how to convert the SHP file which I have obtained from the site to the required KML file for the google map.
The problem was answered by the following open source software which was very helpful to convert the shape file to KML, with also depicting how my shape file would lay out on the map.
Now when I opened my newly generated KML file I faced with my next task, that it comprised the bulk of postcode data all in one file. This file needed to be split apart into to post code areas so that on demand the respective KML to the post code area can be picked up and rendered on the map.
That’s where my skills of Excel/VBA came into play to split the bulk KML file into their respective postal code files. And hence finally I was able to obtain what I wanted to bring all pieces of the puzzle into one place and render my final solution.
With just a last bit of a knack that my KML files didn’t work, I was able to see my map, with the respective marker and info window with the required chart inside it, but no postal area was highlighted.
And after usage of the above library… Voila… I ended up with my required result as desired
Here is the sample hyperlink template for you to check how the URL renders out the content for your purposes.
Note: The above hyperlink is only a template which works when you download my work and run it locally on your machine
Attached along with this post is my solution and all the necessary files, and I hope it helps you in your future projects.