Pragmatism in code

Waxing lyrical about life the universe and everything software related since lunchtime 2006.

DIY Maps

With the advent of Google maps, it's now very easy to add a map to your website, a few lines of code, and you have added a nicely styled map. The style is of course pretty much fixed, and you have to retain the Google logo, but it's free and easy to use. But what if the style does not fit in with your website, or what if you want to show some geographical data, like highlighting a specific area or region?



I recently faced this same dilema, with a website that I'm working on. The google option is nice and easy to deploy, but it simply did not look right. I'm all for free enterprise, but the Google branding stuck right there on the map just detracted from the rest of the site, and for me ruined the nice clean appearance. Initially I simply wanted a clickable map of the world that I could use to link to other pages. My initial thoughts were to create an image map, but after doing a bit of a Google, I come up with the following website -

DIY Map, is a configurable, flash based map app that allows you to embed a map with custom colours and points in your website. This can easily cope with the use that I originally intended, but I quickly realised that it could do much more. Regions can be custom configured, and individually coloured, plus points can be aded with custom hover text and icons. I decided to take advantage of the extra features, as I had a lot of point data that could be displayed.

The colour, region and point data is controlled from external XML files, which made it suitable for using on the website that I'm working on. I wrote some code to create the XML files on the fly, populating the file with data retrieved from the websites database, in this case it is simply point data, to display a clickable pin, which leads to a dedicated page displaying further info. The pin location is determined by Geo-Locations (Global co-ordinates), which allows the use of a location to geo-location converter to be employed. For this I used Google, which have a geocode lookup service. You can test this out by clicking the following link - Simply replace london with any address and location.

I exploded the result into it's constituent elements to extract the latitude and longitude information, and then used this to populate the pin locations.

Geographical areas can also be highlighted by grouping countries together and applying different colours to them. This is great for creating 'heat maps' where regional areas can be coloured to indicate various statistical data. I used this to simply subdivide global areas into regions, to make them easier to see, which then allowed me to display statistical info for the region in the hover text.

I found the DIY Map very easy to set up and use, and also very flexible. It was easily adapted to fit in with the website I was developing, and produced a much cleaner looking interface.

If you are looking for an alternative to Google Maps, and want to be just a little different, or you have geographical statistics to display, then DIY Map is probably what you are looking for. Easy to use, free, and fully configurable. Maps are available for many different countries, and a variety of examples are available on the DIY Map home page


WD 10TPVT 1TB Macbook Upgrade.
JomSocial v's Dolphin

Related Posts



No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Tuesday, 25 April 2017
If you'd like to register, please fill in the username, password and name fields.

Captcha Image