Maps APIs Overview

Google Maps API Rajdeep Dua

Why Maps?

The other failsafe way of organizing information:

0 — Search.

1 — Order chronologically.

2 — Draw a map.

Putting it on a map is a great way to organize information.

Google Maps APIs

A library of "HTML elements" for places.

An "HTML element" with augmented behavior.

APIs at a Glance

Google Maps 101: Adding a map to your page

1. Create/size a map DIV

2. Load the Maps API JS

3. Create + center the map

Javascript Key: <html> <head> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQ...c"></script> <script> function createMap() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.44, -122.14), 14); } </script> </head> <body onload="createMap()" onunload="GUnload()"> <div id="map" style="width:100%;height:50%"></div> </body> </html> CSS HTML

Google Maps 101: Adding a marker var marker = new GMarker(new GLatLng(lat, lon));

1. Initialise the marker

GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml('<h1>Hi!</p>'); });

2. Make a bubble pop up when clicked

map.addOverlay(marker);

3. Display the marker

Javascript Key: CSS HTML

Google Maps 101: Adding a line var latOffset = 0.001; var lngOffset = 0.001;

1. Initialise lat/lon offset from our marker (optional)

var line = new GPolyline([new GLatLng(lat, lng-lngOffset), new GLatLng(lat, lng+lngOffset)]);

2. Create the line

map.addOverlay(line);

3. Display the line

Google Maps 101 : Adding a polygon var polygon = new GPolygon([ new GLatLng(lat, lng - lngOffset), new GLatLng(lat + latOffset, lng), new GLatLng(lat, lng + lngOffset), new GLatLng(lat - latOffset, lng), new GLatLng(lat, lng - lngOffset)], '#f33f00', 5, 1, '#ff0000', 0.2);

1. Create the polygon and set line / fill properties

map.addOverlay(polygon);

2. Display the polygon

Custom Maps

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:

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.

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

Markers and poly lines work fine for smaller, less data intensive applications. For anything more detailed, image overlays will be a more workable solution. Markers and Polylines: Conclusion

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

Also used Extensively for Simple Campus Maps

With each of these examples, play with the zoom level and notice the degradation in image quality.

DEMO : IIM Lucknow Campus Map

.

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.

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

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

Number of tiles per zoom level = 4**zoom

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

Tiled Image Overlays: Tile Structure Demo Tile Detection Tool

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, Borders and text get bigger with zoom, 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: 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 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.

Static Maps

Static Maps API: Introduction