Maps APIs Overview

50 %
50 %
Information about Maps APIs Overview
Technology

Published on March 24, 2009

Author: rajdeep

Source: slideshare.net

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.

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.

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

1. Create/size a map DIV

2. Load the Maps API JS

3. Create + center the map

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

1. Initialise the marker

2. Make a bubble pop up when clicked

3. Display the marker

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 Javascript Key: CSS HTML

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

2. Create the 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 Javascript Key: CSS HTML

1. Create the polygon and set line / fill properties

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

When markers/polys aren't the right solution for visualizing data on a map

Alternate solutions: 

Single image overlays

Tile layers

Markers and Polylines The typical way of visualizing data:

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.

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:

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

( 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

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 .

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

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 &quot;Outline Images&quot; enabled to see this in action.

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 &quot;Outline Images&quot; 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

The world as one tile: zoom 0 (4**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

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

Tiled Image Overlays: Tile Structure Number of tiles per zoom level = 4**zoom Number of pixels per zoom level = 4**(zoom + 8)

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

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

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

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

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

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

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

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 There are some drawbacks to using the JS API: Download time for scripts + resources Requires JavaScript and modern browser Solution: The Static Maps API  How it works Just add an <img> tag pointing to a well-crafted URL that specifies various parameters (center, zoom, size, etc) Try it out in the   Google Static Map Wizard When to use? When the map isn’t the  main focus  of a page, and many users will not interact with it If you cannot be sure the user has a  Javascript-enabled browser On  mobile sites , where many users will not have a Javascript-enabled browser, and connections are slow

There are some drawbacks to using the JS API:

Download time for scripts + resources

Requires JavaScript and modern browser

How it works

Just add an <img> tag pointing to a well-crafted URL that specifies various parameters (center, zoom, size, etc)

Try it out in the   Google Static Map Wizard

When to use?

When the map isn’t the  main focus  of a page, and many users will not interact with it

If you cannot be sure the user has a  Javascript-enabled browser

On  mobile sites , where many users will not have a Javascript-enabled browser, and connections are slow

Static Maps API: Examples 1) Lonely Planet Mobile   Displays static map of current user location Plots nearby places to ‘sleep’, ‘play’, ‘eat’, ‘shop’ and ‘see’ Links to Lonely Planet review on each date 2) Orbitz Mobile Update   Generates static map of traffic incidents Collects input from mobile users 3) Glotter   Displays thumbnails of maps

1) Lonely Planet Mobile  

Displays static map of current user location

Plots nearby places to ‘sleep’, ‘play’, ‘eat’, ‘shop’ and ‘see’

Links to Lonely Planet review on each date

2) Orbitz Mobile Update  

Generates static map of traffic incidents

Collects input from mobile users

3) Glotter  

Displays thumbnails of maps

Static Maps API: Tips and tricks The Static Maps API can be combined with the Javascript API for a better user experience 1. Start with a static map, loading JS API only if user interacts with it e.g. Yelp   2. Load the full page, then append the Maps code (so map only loaded after rest of page) e.g. iGoogle MapSearch Gadget  ,  Barry Hunter's Demo

The Static Maps API can be combined with the Javascript API for a better user experience

1. Start with a static map, loading JS API only if user interacts with it

e.g. Yelp  

2. Load the full page, then append the Maps code (so map only loaded after rest of page)

e.g. iGoogle MapSearch Gadget  ,  Barry Hunter's Demo

Flash API: Introduction The Javascript API has limitations inherent to the platform Painful to embed in Flash sites Graphical/data streaming limitations How does it work? Lets you write code in Actionscript3, compile it against our interface library, and output a SWF containing an interactive Google Map SWF can be embedded on your web page, Google Earth, MySpace, etc The Flash API has all the main functionality of the Javascript API Solution: Flash Maps API

The Javascript API has limitations inherent to the platform

Painful to embed in Flash sites

Graphical/data streaming limitations

How does it work?

Lets you write code in Actionscript3, compile it against our interface library, and output a SWF containing an interactive Google Map

SWF can be embedded on your web page, Google Earth, MySpace, etc

The Flash API has all the main functionality of the Javascript API

Conclusion Google Maps with APIs is Fun Highly customizable from basic UI Elements to the tiles themselves

Google Maps with APIs is Fun

Highly customizable from basic UI Elements to the tiles themselves

Add a comment

Related presentations

Related pages

Overview - Maps API for JavaScript - HERE Developer - HERE ...

Table 1. Main features of the HERE Maps API for JavaScript; Feature Description; Efficient map rendering : The API is built for HTML5-capable environments ...
Read more

Street View Service | Google Maps JavaScript API | Google ...

Overview. Google Street View provides panoramic 360 degree views from designated roads throughout its coverage area. Street View's API coverage ...
Read more

Bing Maps: Developer

The Bing Maps platform provides multiple API options for your application including an AJAX control, a Windows Store apps control, a WPF control, REST ...
Read more

Google Maps Android API | Google Developers

Build a custom map for your Android app. Help your users navigate outdoor or indoor locations using multiple views with Google Maps API for Android.
Read more

Overview - Maps API for JavaScript - HERE Developer - HERE ...

The main features offered by the Maps API are summarized in the table below:
Read more

Google Maps

Find local businesses, view maps and get driving directions in Google Maps.
Read more

Ovi Maps API Developer's Guide: Overview

The Ovi Maps API supports three bandwidth-efficient map types: satellite, terrain and hybrid. In addition to that the lightweight API comes ...
Read more

Yahoo! Maps Web Services - YDN - Yahoo Developer Network

Yahoo! Maps APIs let you easily embed rich and interactive maps into your web and desktop applications using your choice of platform: we provide Flash, ...
Read more

Strand Map Service: Overview - Science Literacy Maps

Overview. The Strand Map ... AAAS Strand Maps into Web pages using JavaScript and place custom content into the bubble inside the maps. JavaScript API ...
Read more

Bing Maps

Microsoft® Bing Maps is a flexible platform with tools designed for rapid application development and provides seamless integration with other Microsoft ...
Read more