Thursday, November 04, 2010

Using Styled Maps with the Static Maps API

Ugly Map

My first play with the new Styled Maps feature in the Static Maps API is this ugly map.

This map uses eight static maps with different styles applied to each map. I think you'll agree this is one ugly map.

We Fade to Grey

This one is a little more attractive (but no more useful).

Again the map contains eight static maps with different styles applied to each. This time the colour is gradually taken away in each map to end up with the last map tile being entirely grey-scale.

Flashing Map

In this one I've used the same map styles as in the previous example, only this time I've animated through the images to create a flashing map.

It's a strange effect that I can't really seeing having much practical application.

Zoom in Static Map

I've long admired the use of static maps on Flickr. On Flickr geo-tagged photos are accompanied with a small static map that when you mouseover zooms in on the location.

I've tried to create something similar with this example. If you roll over the map with your mouse the map will zoom in. To achieve this I've just used two static maps with the same map style. One map however has been set to a higher zoom. When you rollover the first map a bit of javascript replaces the zoomed out static map with the zoomed in static map.

________________

No comments: