Producing Custom Maps�with Google Maps API

Pamela Fox

​

• When markers/polys aren't the right solution for visualizing data on a map
• Alternate solutions: 
• Single image overlays
• Tile layers

What We'll Talk About

Markers and Polylines

• The typical way of visualizing data:

Markers and Polylines

• Using markers and polylines for maps can be a great way of visualizing and interacting with data - as long as you don’t have too many.

Markers and Polylines

• The maximum number of markers and polylines change depending on the browser and computer running the page. Too many, and this happens:

Markers and Polylines: Conclusion

​

​

Markers and polylines work fine for smaller, less data intensive applications.

​

For anything more detailed, image overlays will be a more workable solution.

Image Overlay Types

• Single Image Overlays

(GGroundOverlay)

​

���

• Tiled Image Overlays

(GTileLayer)

Single Image Overlays

• In the API, usually use GGroundOverlay to achieve this
• Basic concept: Stretch an image to fit a bounding box

​

Single Image Overlays: Examples

Various Uses:

• Erupting Volcano
• Historical New Jersey Map
• US Counties

With each of these examples, play with the zoom level and notice the degradation in image quality.��Interactive Fitting Tools:

• Fitter with JS/KML Generator
• US Counties Map Fitter

�Dynamically Generated Counties Ground Overlay�With this example, play with the zoom level and notice the change in loading time for the overlay.�

Single Image Overlays: Conclusion

​

Single Image Overlays work well for areas that consist of a single map viewport and a single zoom setting. ��It’s easy to implement but suffers from performance issues and limited options. ��Applications that require larger coverage and multi-resolution data need a more robust solution.

Tiled Image Overlays

• In the API, usually use GTileLayer to achieve this
• Basic concept: Load tiles of constant size at each zoom level. The standard Google Maps map types are implemented this way.

�Advantages:

• Extremely Efficient
• Runs easily on all map capable browsers
• Works equally well at each zoom level
• Capable of displaying large areas

​

Disadvantages:

• Somewhat complex to generate
• More difficult to understand
• Typically requires a robust server

Tiled Image Overlays: Tile Structure

• The tiling system consists of a series of images with a dimension of 256x256 pixels.
• Each successive zoom level divides the previous zoom level’s images into four new images, resulting in a map that displays one forth the area at twice the resolution of the previous level.
• Zoom level 0 is the lowest level, there is no theoretical upper zoom level limit.

��Try zooming and panning �on Google Maps with �"Outline Images" enabled�to see this in action.

Tiled Image Overlays: Tile Structure

• The world as one tile: zoom 0 (4**0)

Pixels:

Top (y): 0

Left (x): 0

Bottom: 255

Right: 255

Tile No.:

x:0 y:0

Tiled Image Overlays: Tile Structure

• The world as four tiles: zoom 1 (4**1)

Tile No.:

x:0 y:0

Pixels:

Top (y): 0

Left (x): 0

Bottom: 255

Right: 255

Tile No.:

x:0 y:1

Pixels:

Top (y): 256

Left (x): 0

Bottom: 511

Right: 255

Tile No.:

x:1 y:0

Pixels:

Top (y): 0

Left (x): 256

Bottom: 255

Right: 511

Tile No.:

x:1 y:1

Pixels:

Top (y): 256

Left (x): 256

Bottom: 511

Right: 511

Tiled Image Overlays: Tile Structure

• Number of tiles per zoom level = 4**zoom
• Number of pixels per zoom level = 4**(zoom + 8)

​

Tiled Image Overlays: Tile Structure

• Interactive Tile Structure Demo

​

Tiled Image Overlays: Techniques

• Tiles cut from images

��

• Static data tiles

��

• Dynamic data tiles

Tiles cut from images

Basic concept: You already have the image (often scanned in), and you use a script to cut it into multi-resolution tiles

​

Uses:

• Obsolete, historical, campus maps (Sailing Map)
• Fantastical maps (MapWow)
• Aerial photo imagery (Mexico 1809 Map)
• Panoramic photos (Prague360)
• Other documents, books, magazines (SPACE Mag)

​

Advantages:

• Easily integrated, great user interface

Disadvantages:

• Pixelation, image geolocation errors

Tiles cut from images: Counties Example

• County Tiles Cut from Source Image
• Source image: 5462 x 2920, zoom 7
• Zoom levels 5-9 generated with Perl script
• Notice the aliasing that occurs when you zoom/pan

Zoom 5

Zoom 6

Zoom 7

Zoom 8

Zoom 9

Tiles cut from images: Resources

• MapCruncher Beta for Microsoft Virtual Earth:
• Great alignment options, limited to non-commercial use, non-Google tile numbering
• Automatic Tile Cutter for Photoshop:
• Requires Photoshop CS or better, alignment web tool available
• Unix Command Line Tile Cutter:
• Runs under Linux/Unix/Mac OSX, uses ImageMagick, GPL, no image alignment tool
• Perl tile cutter:
• Runs under Linux/Unix/Mac OSX, uses GD, GPL, no image alignment tool

Tiles cut from images: Conclusion

​

Tiles cut from images are useful for many purposes, but suffer when extending to more than a few zoom levels due to pixelation, and they can be difficult to align with a base map.

​

Static data tiles

Basic Concept: You have the data in some format, and you generate the tile layers just once from that data and store on your server.

​

Uses:

• Displaying points of interest, heat maps, borders, other thematic data (Zoning Map, Walkscore Heatmap)

Advantages:

• Allows creation of nearly perfect tiles
• Fast browser response regardless content
• Great for polygons, markers and lines

Disadvantages:

• Requires significant server side programming experience
• Tiles generated on a schedule

Static data tiles: Counties Example

Generated County Tiles

• Tiles generated with Perl script using data in PostGRE database for zoom levels 5-9
• Notice the constant edge thickness when you zoom/pan

Zoom 5

Zoom 6

Zoom 7

Zoom 8

Zoom 9

Static data tiles: Conclusion

​

Static tiles created from data are extremely fast and efficient, can be made to work with any zoom level and any area.

​

They don’t suffer from pixelation and are easily aligned to the map.

​

Since they require building in advance, time sensitive and user driven requirements are difficult to address.

Dynamic data tiles

Basic Concept: You have the data in some format, and you generate the tile layers dynamically (when the user requests them).

​

Uses:

• User driven data, time sensitive data (DayLight Map)

​

Advantages:

• Tiles custom tailored to the user

​

Disadvantages:

• Requires significant server side programming experience
• Requires significant server side processing power

Dynamic data tiles: Conclusion

�Dynamic tiles created “on the fly” offer great functionality at a stiff price - increased time to process and heavy load on the server. ��The benefits of dynamic tiles over static ones have to be weighed for each application.

​

Simulating Clickable Tiles

• Tile layers are great, but they're inherently not clickable (since data is rasterized into images).
• You can simulate clickability by storing bounding boxes of the area that should be clickable, and checking for intersection with the mouse click/hover.

�Examples:

• Panoramio/Wikipedia Layers on Google Maps
• Bounding boxes set down as JSON

​

​

• Clickable County Markers
• Bounding boxes stored in the tile image cookies
• Simulates

​

Learn more

http://code.google.com/intl/es/