You are previewing Map Scripting 101.
O'Reilly logo
Map Scripting 101

Book Description

Map Scripting 101 uses a project-based approach to teach you how to create useful and fun online map mashups like weather maps and local concert trackers. Author Adam DuVander shows you how to use Mapstraction, an open source JavaScript library, to create and manipulate basic maps by setting zoom levels, showing and hiding markers, geocoding addresses, customizing maps for visitors based on their locales, and so on. You'll also learn to handle complex GIS (geographic information system) data and formats like KML and GeoRSS, and to create graphical overlays to make sense of data and trends. This is a perfect book for any web developer, whether their goal is to build a map to track earthquakes around the world, or to simply mark the best coffee shops in town.

Table of Contents

  1. MAP SCRIPTING 101
  2. ACKNOWLEDGMENTS
  3. INTRODUCTION
    1. About This Book
    2. How to Use This Book
    3. About the Website
  4. 1. MAPPING BASICS
    1. The Mapping APIs: Google, Yahoo!, and Mapstraction
    2. Describe a Point on the Earth
      1. Convert Between Decimal and Degree Formats
      2. Determine Precision of Decimal Coordinates
    3. Create Your First Map
      1. Create a Google Map
      2. Create a Yahoo! Map
      3. Create a Mapstraction Map
      4. Use Yahoo! Maps with Mapstraction
    4. Find the Underlying Map Tiles
    5. Change the Map Size
    6. Add Zoom and Other Controls
      1. Small Controls
      2. Large Controls
      3. Map-Type Controls
    7. Set Zoom Level
    8. Set Map Type
    9. Recenter the Map
    10. Retrieve the Center of the Map
    11. Find Point Where User Clicked
  5. 2. PLOTTING MARKERS AND MESSAGE BOXES
    1. #1: Add a Marker to Your Map
    2. #2: Remove or Hide a Marker
    3. #3: Show a Message Box When Your Marker Is Clicked
    4. #4: Show and Hide Message Boxes Without Clicking the Marker
    5. #5: Create a Custom Icon Marker
      1. Get Out the Image Editor
      2. Add Your Icon to the Map
    6. #6: Create Numbered Markers
      1. Generate the Numbered Icon
      2. Add the Icon to the Map
    7. #7: Loop Through All Markers
    8. #8: Determine the Correct Zoom Level to Use Based on Markers
    9. #9: Filter Out Certain Markers
    10. #10: Remove or Hide All Markers
    11. #11: Handle Clusters of Markers
      1. Change the Cluster Icon
  6. 3. GEOCODING
    1. How Do Geocoders Work?
    2. JavaScript vs. HTTP Geocoding
    3. #12: Geocode with JavaScript
      1. Geocode User Input
    4. #13: Geocode with an HTTP Web Service
      1. Use Google's Geocoding Web Service
        1. Alternate Data Formats
      2. Use Yahoo!'s Geocoding Web Service
      3. Other Geocoding Web Services
    5. #14: Reverse Geocoding: Get an Address from a Point
      1. Reverse Geocode with JavaScript
      2. Reverse Geocode in a Click
      3. Reverse Geocode with Google's Web Service
    6. #15: Get Postal Code Coordinates
      1. Install a Postal Code Database
  7. 4. LAYER IT ON
    1. #16: Draw Lines on a Map
      1. Draw Multiple Line Segments
      2. Set the Color and Thickness
    2. #17: Draw Shapes on a Map
      1. Set the Fill Color and Opacity
    3. #18: Add Circles to Show Search Radius
      1. Approximate with a Polygon
      2. Overlay a Circle Image
    4. #19: Draw a Rectangle to Declare an Area
    5. #20: Draw Lines Along Clicks
    6. #21: Color States/Countries on a Map
    7. #22: Add Custom Controls
    8. #23: Create Your Own Zoom Interface
    9. #24: Plot Image Thumbnails on a Map
    10. #25: Overlay an Image on a Map
      1. Geo-Reference Your Map
      2. Apply Warped Map
    11. #26: Use Custom Tiles
      1. How Many Pixels Wide Is the Earth?
      2. Start a Tile Drawer EC2 Instance
      3. Declare User Data for Your Instance
      4. Tile Drawer Does Its Job
      5. Add Tile Overlays to Your Map
      6. Create Your Own Tile Styles
  8. 5. HANDLE MAP EVENTS
    1. Mapstraction's Event Model
    2. #27: The User Clicks the Map
    3. #28: The User Drags the Map
    4. #29: The Zoom Level Changes
    5. #30: A Marker Is Added to or Removed from the Map
    6. #31: A Polyline Is Added to or Removed from the Map
    7. #32: The User Opens or Closes a Message Box
    8. #33: The User Clicks a Marker
    9. #34: Return to the Center When the Message Box Is Closed
      1. Preserve the Previous Center
    10. #35: The User Moves the Map Outside Preset Bounds
  9. 6. EXPLORE PROXIMITY
    1. #36: Calculate Distance Between Two Points
      1. Could You Throw an Object Across a River?
    2. #37: Find True Distance with Routing
    3. #38: Create Driving Directions
    4. #39: Determine Closest Marker
    5. #40: Find a Point Along a Line
      1. Plot Your Route
      2. Find Your Bearing
      3. Determine New Point
    6. #41: Plot Local Results on a Map
    7. #42: Retrieve Local Results with HTTP
      1. Parse Local Results with PHP
      2. Other Useful Parameters
    8. #43: Check Whether a Point Is Within a Bounding Box
      1. Can You Click Inside the Box?
    9. #44: Get a Random Point in a Bounding Box
    10. #45: Check Whether a Point Is Within a Shape
      1. Find the Polygon's Bounding Box
      2. Connect Our Point to an Outside Point
      3. Check for Line Intersections
      4. Perform the Hit Test
      5. You Clicked in Utah!
    11. #46: Get Nearest Locations from Your Own Database
  10. 7. USER LOCATION
    1. #47: Ask Users Where They Are
      1. Get Input Using JavaScript
      2. Get Input Using PHP
    2. #48: Get Location Using JavaScript
      1. Where Does the Data Come From?
      2. What Other Data Can We Get?
      3. Use the Location on the Map
      4. Receive Continual Updates
      5. Additional Geolocation Options
    3. #49: Use Fire Eagle to Get Location
      1. Get the Fire Eagle Essentials
      2. Authenticate the User
      3. Answer the Call
      4. Get the User's Location
    4. #50: Get Location by IP
      1. Use the HostIP Web Service
      2. Use Google's ClientLocation JavaScript Object
    5. #51: Roll Your Own IP Database
      1. Import IP Data
      2. Find an IP's Location
  11. 8. DATA FORMATS
    1. #52: Use XML
      1. Parse XML with JavaScript
      2. Parse XML with jQuery JavaScript Library
      3. Parse XML with PHP
        1. Even Simpler XML with XPath
    2. #53: Use JSON
      1. Parse JSON with JavaScript and jQuery
      2. Parse JSON with PHP
    3. #54: Use GeoRSS
      1. Use Alternate GeoRSS Encodings
      2. Display GeoRSS on a Map
    4. #55: Use KML
      1. Lines in KML
      2. Polygons in KML
      3. Style KML
      4. Display KML on a Map
    5. #56: Use GPX
      1. Examples of GPX
      2. Display GPX Tracks on a Map
    6. #57: Convert from XML to JSON
      1. Convert Using PHP
      2. Convert Using Yahoo! Pipes
    7. #58: Filter, Merge, and Sort Data with Yahoo Pipes!
      1. Filter Your Feed's Content
      2. Merge Two or More Feeds
  12. 9. GO SERVER-SIDE
    1. #59: Install PHP
      1. Check Your Web Host for PHP
      2. Use a Packaged Installation of PHP
      3. Install PHP Yourself
    2. #60: A Quick PHP Introduction
      1. The Nitty Gritty
      2. Taking Input
      3. If This Is True, Then Do That
      4. Quite the Array
      5. Feelin' Loopy
      6. Get Functional
    3. #61: Retrieve a Web Page
      1. Include Your Function in Other Scripts
    4. #62: Install MySQL
      1. Check Your Web Host for MySQL
      2. Use a Packaged Installation of MySQL
      3. Install MySQL Yourself
    5. #63: Store Locations to a Database
      1. Create a New Database
      2. Create a Database Table
      3. Add Data to Your Places Table
    6. #64: Import Data from a Spreadsheet
    7. #65: Use MySQL from PHP
    8. #66: Plot Locations from a Database
      1. Output All Places as JSON
      2. Plot Places from JSON
    9. #67: Get Nearest Locations from a Database
      1. Improve Your Query's Performance
      2. Precalculate Values in New Columns
    10. #68: Get Nearest Locations to a Postal Code
  13. 10. MASHUP PROJECTS
    1. What Is a Mashup?
      1. The Projects
    2. #69: Create a Weather Map
      1. Prepare a Basic US Map
      2. Convert Weather Results to JSON
        1. Create a New Pipe
      3. Plot Conditions on the Map
      4. Add a Forecast Details Pane
    3. #70: Display Recent Earthquakes Worldwide
      1. Show Earthquakes with GeoRSS
      2. Create a Custom Earthquake Map
        1. Prepare Basic World Map
        2. Convert Earthquake Data to JSON
        3. Plot Earthquakes on Map
        4. Create a Legend
        5. Zoom to Hotspot Regions
    4. #71: Search Music Events by Location
      1. Prepare HTML for Search Interface
      2. Perform an Upcoming API Search
      3. Retrieve Event Data Server-Side
      4. Plot Event Search Results on a Map
      5. Filter Results by Ticket Price
    5. #72: Plot Twitter Geo-Tweets
      1. Prepare the Map with User Location
      2. Geocode User Input
      3. Retrieve Geo-Tweets from Twitter
    6. #73: Find a Coffee Shop to Meet in the Middle
      1. Prepare the Map and Form
      2. Retrieve Driving Directions
      3. Find the Route's Midpoint
      4. Search for Coffee on Yelp
  14. A. JAVASCRIPT QUICK START
    1. Where JavaScript Goes
    2. Variables
      1. Arithmetic
      2. Arrays
      3. Objects
    3. Conditionals
    4. Loops
    5. Functions
      1. Variable Scope
      2. Anonymous Functions
    6. Using jQuery
      1. Query Document Objects
      2. Insert and Hide Content
      3. Use Browser Events
      4. Load Files and Data
  15. B. MAPSTRACTION REFERENCE
    1. Class mxn.Mapstraction
      1. Function mxn.Mapstraction
        1. Parameters
        2. Returns
        3. Example
      2. Function addControls
        1. Parameter
        2. Example
      3. Function addFilter
        1. Parameters
        2. Example
      4. Function addImageOverlay
        1. Parameters
        2. Example
      5. Function addLargeControls
      6. Function addMapTypeControls
      7. Function addMarker
        1. Parameter
        2. Example
      8. Function addMarkerWithData
        1. Parameters
        2. Example
      9. Function addOverlay
        1. Parameters
        2. Example
      10. Function addPolyline
        1. Parameter
        2. Example
      11. Function addPolylineWithData
        1. Parameters
        2. Example
      12. Function addSmallControls
      13. Function addTileLayer
        1. Parameters
        2. Example
      14. Function applyOptions
      15. Function autoCenterAndZoom
      16. Function centerAndZoomOnPoints
        1. Parameter
        2. Example
      17. Function declutterMarkers
      18. Function doFilter
        1. Example
      19. Function getAttributeExtremes
        1. Parameter
        2. Returns
        3. Example
      20. Function getBounds
        1. Returns
      21. Function getCenter
        1. Returns
      22. Function getMap
        1. Returns
      23. Function getMapType
        1. Returns
      24. Function getZoom
        1. Returns
      25. Function getZoomLevelForBoundingBox
        1. Parameter
      26. Function polylineCenterAndZoom
      27. Function removeAllFilters
      28. Function removeAllMarkers
      29. Function removeAllPolylines
      30. Function removeFilter
        1. Parameters
        2. Example
      31. Function removeMarker
        1. Parameter
        2. Example
      32. Function removePolyline
        1. Parameter
        2. Example
      33. Function resizeTo
        1. Parameters
        2. Example
      34. Function setBounds
        1. Parameter
      35. Function setCenter
        1. Parameter
        2. Example
      36. Function setCenterAndZoom
        1. Parameters
        2. Example
      37. Function setDebug
        1. Parameter
      38. Function setMapType
        1. Parameter
        2. Example
      39. Function setOption
        1. Parameters
        2. Example
      40. Function setOptions
        1. Parameter
        2. Example
      41. Function setZoom
        1. Parameter
        2. Example
      42. Function swap
        1. Parameters
        2. Example
      43. Function toggleFilter
        1. Parameters
        2. Example
      44. Function toggleTileLayer
        1. Parameter
        2. Example
      45. Function visibleCenterAndZoom
      46. Variables in mxn.Mapstraction Class
    2. Class mxn.BoundingBox
      1. Function mxn.BoundingBox
        1. Parameters
        2. Returns
        3. Example
      2. Function contains
        1. Parameter
        2. Returns
        3. Example
      3. Function extend
        1. Parameter
        2. Example
      4. Function getNorthEast
        1. Returns
      5. Function getSouthWest
        1. Returns
      6. Function isEmpty
        1. Returns
    3. Class mxn.LatLonPoint
      1. Function mxn.LatLonPoint
        1. Parameters
        2. Returns
        3. Example
      2. Function distance
        1. Parameter
        2. Returns
        3. Example
      3. Function equals
        1. Parameter
        2. Returns
        3. Example
      4. Function latConv
      5. Function lonConv
      6. Function toString
        1. Returns
    4. Class mxn.Marker
      1. Function mxn.Marker
        1. Parameter
        2. Returns
        3. Example
      2. Function addData
        1. Parameter
        2. Example
      3. Function getAttribute
        1. Parameter
        2. Returns
        3. Example
      4. Function setAttribute
        1. Parameters
        2. Example
      5. Function setDraggable
        1. Parameter
      6. Function setHover
        1. Parameter
      7. Function setHoverIcon
        1. Parameter
        2. Example
      8. Function setIcon
        1. Parameters
        2. Example
      9. Function setIconAnchor
        1. Parameter
        2. Example
      10. Function setIconSize
        1. Parameter
        2. Example
      11. Function setInfoBubble
        1. Parameter
        2. Example
      12. Function setInfoDiv
        1. Parameters
        2. Example
      13. Function setLabel
        1. Parameter
        2. Example
      14. Function setShadowIcon
        1. Parameters
        2. Example
    5. Class mxn.Polyline
      1. Function mxn.Polyline
        1. Parameter
        2. Returns
        3. Example
      2. Function addData
        1. Parameter
        2. Example
      3. Function setClosed
        1. Parameter
      4. Function setColor
        1. Parameter
        2. Example
      5. Function setFillColor
        1. Parameter
        2. Example
      6. Function setWidth
        1. Parameter
        2. Example
      7. Function simplify
        1. Parameter
        2. Example
    6. Namespace mxn.util
      1. Function mxn.util.$m
        1. Parameter
        2. Returns
        3. Example
      2. Function mxn.util.getAvailableProviders
        1. Returns
        2. Example
      3. Function mxn.util.getStyle
        1. Parameters
        2. Returns
        3. Example
      4. Function mxn.util.KMToMiles
        1. Parameter
        2. Returns
      5. Function mxn.util.loadScript
        1. Parameter
      6. Function mxn.util.loadStyle
        1. Parameter
      7. Function mxn.util.lonToMetres
        1. Parameters
        2. Returns
      8. Function mxn.util.metresToLon
        1. Parameters
        2. Returns
      9. Function mxn.util.milesToKM
        1. Parameter
        2. Returns
      10. Function mxn.util.stringFormat
        1. Parameters
        2. Returns
        3. Example
  16. About the Author
  17. UPDATES