I was impressed today with the simple design of the New York Times' 101 Places to Find Great Coffee in New York. I really like how the newspaper has used the Leaflet mapping platform to create a gray-scale map, with non-essential areas masked out and road names which only appear when you zoom in on the map.
One of my first thoughts was to wonder if you could create a similar looking map with the Google Maps API. The New York Knockout Map is the result. To hide the non-important areas of the map I used Vasile Cotovanu's polygon masking wizard Geomask. Using Geomask it is possible to create a doughnut type polygon which only shows the map through the hole in the doughnut polygon. The result is that the areas to the west of Manhattan are hidden from view on my finished map.
I used the Google Maps API Styled Map wizard to create the gray-scale map tiles and to hide the road name labels on the map. However I do want the road names to appear on the map when the user zooms in, so I had to create an event listener to check when the zoom levels is changed. I then created another map style with the road name labels turned on. Using the zoom event listener I can then switch between the two map styles (one with road name labels and one without) depending on the zoom level of the map.
I quite like the results and think it is a fairly accurate reproduction of the New York Times' coffee map. All I need now is some data to map.
No comments:
Post a Comment