• Save
Maps APIs Overview
Upcoming SlideShare
Loading in...5

Maps APIs Overview






Total Views
Views on SlideShare
Embed Views



3 Embeds 18

http://www.slideshare.net 9
http://www.linkedin.com 8
https://www.linkedin.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Maps APIs Overview Maps APIs Overview Presentation Transcript

  • 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=&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
  • 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
      • 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
      • 3. Display the line
    Javascript Key: CSS HTML
  • 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
      • 2. Display the polygon
    Javascript Key: CSS HTML
  • 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:
  • 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 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 &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
  • 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 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
      • 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
  • 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
  • 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
  • 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
  • Conclusion
    • Google Maps with APIs is Fun
    • Highly customizable from basic UI Elements to the tiles themselves