HTML5, Google Maps, and Focus

Focus the eye

This guide will indicate a few ways to help the user focus more on the story you are telling them. A key benefit of the Google Maps API is the depth of informational content that is available immediately. Without a doubt the imagery is both compelling and often beautiful. However this is also a great problem in that it is easy for a user to get distracted into looking at the background imagery or terrain rather than concentrating on the content of your map, your story.

Finally discovered how to use map under canvas tag ( via @geo_will lab (

— Darren Wiens (@dkwiens) January 11, 2013

For all these maps please dig into the code using “View Source” or Firebug, its all there…

The Background Map – Prince George, jewel of British Columbia’s central interior

picture of simple PG map

The Simple Rectangle – here I have added a simple overlay describing a rectangle around the city itself. Instead of actually obscuring the surrounding area I have added an opacity to simply indicate that this is not the focal point. If you zoom out a bunch you will find that you are actually looking through a window. Its a polygon with hole, cartographers will call this a mask, its a neat trick. Add a high contrast outline and we’re done! The outline color will be different depending on your subject. PG is a forestry town, so we have a bunch of trees which means my map is kinda green so white or yellow make nice high contrast line work. If you live in the desert you might want to use black, but this is also dependent on the colors in the palette of your website too.

picture of rectangle PG map

The Area of Interest – Often you will have a specific area to focus the user on, not necessarily bounded by a simple shape. Why not use effectively the same technique and add a more complex shape instead. The data here has come directly from the City of Prince George’s open data initiative. This data is available in both shapefile, for the GISers amongst you, or in KML for the hackers. Both of the formats are eminently hackable to extract the coordinates of verticies which make up the shape we care about. Hopefully your local municipality has a similar initiative, if not then I smell an opportunity for you budding consultants out there! You will see that the html file is rather bloated with all those coordinates. Generally using this technique I have found it easier to have a single file per polygon. That js file can just build the polygon variable and be referenced by the html and brought in as a global, thus keeping your actual map js much cleaner.

picture of city boundary PG map

Emerging from the darkness – HTML5 has some great features, check out the canvas tag. This will be important to you! here I have added a radial gradient to a polygon fill and popped it on top of the map. Its a nice effect if you don’t want to add a hard delineation between focus and non-focus. It does push the eye right to the center of the circle. Note, we have lost our controls and copyrights (sorry google)!

picture of html5 PG map

Emerging from the darkness (over time) – HTML5 is really cool when you use animations, so why not add a time element to the map… Notice too here that it take a few seconds, what is happening is a delay while the tiles are loaded. This means that the effect of the darkness parting on the map is sullied by the tiles loading in the background, we could add a spinney wheel or something, but that would take something away too. Oh, please forgive my meager branding attempts 🙂

picture of html5 over time PG map

I hope this proves useful to the geoweb community. Remember, try and make maps for the web that don’t just look like web maps! 😉