Map Scripting 101 by DuVander, Adam -- Read -- Imperial Library of Trantor

Index

MAP SCRIPTING 101

ACKNOWLEDGMENTS INTRODUCTION

About This Book How to Use This Book About the Website

1. MAPPING BASICS

The Mapping APIs: Google, Yahoo!, and Mapstraction Describe a Point on the Earth

Convert Between Decimal and Degree Formats Determine Precision of Decimal Coordinates

Create Your First Map

Create a Google Map Create a Yahoo! Map Create a Mapstraction Map Use Yahoo! Maps with Mapstraction

Find the Underlying Map Tiles Change the Map Size Add Zoom and Other Controls

Small Controls Large Controls Map-Type Controls

Set Zoom Level Set Map Type Recenter the Map Retrieve the Center of the Map Find Point Where User Clicked

2. PLOTTING MARKERS AND MESSAGE BOXES

#1: Add a Marker to Your Map #2: Remove or Hide a Marker #3: Show a Message Box When Your Marker Is Clicked #4: Show and Hide Message Boxes Without Clicking the Marker #5: Create a Custom Icon Marker

Get Out the Image Editor Add Your Icon to the Map

#6: Create Numbered Markers

Generate the Numbered Icon Add the Icon to the Map

#7: Loop Through All Markers #8: Determine the Correct Zoom Level to Use Based on Markers #9: Filter Out Certain Markers #10: Remove or Hide All Markers #11: Handle Clusters of Markers

Change the Cluster Icon

3. GEOCODING

How Do Geocoders Work? JavaScript vs. HTTP Geocoding #12: Geocode with JavaScript

Geocode User Input

#13: Geocode with an HTTP Web Service

Use Google's Geocoding Web Service

Alternate Data Formats

Use Yahoo!'s Geocoding Web Service Other Geocoding Web Services

#14: Reverse Geocoding: Get an Address from a Point

Reverse Geocode with JavaScript Reverse Geocode in a Click Reverse Geocode with Google's Web Service

#15: Get Postal Code Coordinates

Install a Postal Code Database

4. LAYER IT ON

#16: Draw Lines on a Map

Draw Multiple Line Segments Set the Color and Thickness

#17: Draw Shapes on a Map

Set the Fill Color and Opacity

#18: Add Circles to Show Search Radius

Approximate with a Polygon Overlay a Circle Image

#19: Draw a Rectangle to Declare an Area #20: Draw Lines Along Clicks #21: Color States/Countries on a Map #22: Add Custom Controls #23: Create Your Own Zoom Interface #24: Plot Image Thumbnails on a Map #25: Overlay an Image on a Map

Geo-Reference Your Map Apply Warped Map

#26: Use Custom Tiles

How Many Pixels Wide Is the Earth? Start a Tile Drawer EC2 Instance Declare User Data for Your Instance Tile Drawer Does Its Job Add Tile Overlays to Your Map Create Your Own Tile Styles

5. HANDLE MAP EVENTS

Mapstraction's Event Model #27: The User Clicks the Map #28: The User Drags the Map #29: The Zoom Level Changes #30: A Marker Is Added to or Removed from the Map #31: A Polyline Is Added to or Removed from the Map #32: The User Opens or Closes a Message Box #33: The User Clicks a Marker #34: Return to the Center When the Message Box Is Closed

Preserve the Previous Center

#35: The User Moves the Map Outside Preset Bounds

6. EXPLORE PROXIMITY

#36: Calculate Distance Between Two Points

Could You Throw an Object Across a River?

#37: Find True Distance with Routing #38: Create Driving Directions #39: Determine Closest Marker #40: Find a Point Along a Line

Plot Your Route Find Your Bearing Determine New Point

#41: Plot Local Results on a Map #42: Retrieve Local Results with HTTP

Parse Local Results with PHP Other Useful Parameters

#43: Check Whether a Point Is Within a Bounding Box

Can You Click Inside the Box?

#44: Get a Random Point in a Bounding Box #45: Check Whether a Point Is Within a Shape

Find the Polygon's Bounding Box Connect Our Point to an Outside Point Check for Line Intersections Perform the Hit Test You Clicked in Utah!

#46: Get Nearest Locations from Your Own Database

7. USER LOCATION

#47: Ask Users Where They Are

Get Input Using JavaScript Get Input Using PHP

#48: Get Location Using JavaScript

Where Does the Data Come From? What Other Data Can We Get? Use the Location on the Map Receive Continual Updates Additional Geolocation Options

#49: Use Fire Eagle to Get Location

Get the Fire Eagle Essentials Authenticate the User Answer the Call Get the User's Location

#50: Get Location by IP

Use the HostIP Web Service Use Google's ClientLocation JavaScript Object

#51: Roll Your Own IP Database

Import IP Data Find an IP's Location

8. DATA FORMATS

#52: Use XML

Parse XML with JavaScript Parse XML with jQuery JavaScript Library Parse XML with PHP

Even Simpler XML with XPath

#53: Use JSON

Parse JSON with JavaScript and jQuery Parse JSON with PHP

#54: Use GeoRSS

Use Alternate GeoRSS Encodings Display GeoRSS on a Map

#55: Use KML

Lines in KML Polygons in KML Style KML Display KML on a Map

#56: Use GPX

Examples of GPX Display GPX Tracks on a Map

#57: Convert from XML to JSON

Convert Using PHP Convert Using Yahoo! Pipes

#58: Filter, Merge, and Sort Data with Yahoo Pipes!

Filter Your Feed's Content Merge Two or More Feeds

9. GO SERVER-SIDE

#59: Install PHP

Check Your Web Host for PHP Use a Packaged Installation of PHP Install PHP Yourself

#60: A Quick PHP Introduction

The Nitty Gritty Taking Input If This Is True, Then Do That Quite the Array Feelin' Loopy Get Functional

#61: Retrieve a Web Page

Include Your Function in Other Scripts

#62: Install MySQL

Check Your Web Host for MySQL Use a Packaged Installation of MySQL Install MySQL Yourself

#63: Store Locations to a Database

Create a New Database Create a Database Table Add Data to Your Places Table

#64: Import Data from a Spreadsheet #65: Use MySQL from PHP #66: Plot Locations from a Database

Output All Places as JSON Plot Places from JSON

#67: Get Nearest Locations from a Database

Improve Your Query's Performance Precalculate Values in New Columns

#68: Get Nearest Locations to a Postal Code

10. MASHUP PROJECTS

What Is a Mashup?

The Projects

#69: Create a Weather Map

Prepare a Basic US Map Convert Weather Results to JSON

Create a New Pipe

Plot Conditions on the Map Add a Forecast Details Pane

#70: Display Recent Earthquakes Worldwide

Show Earthquakes with GeoRSS Create a Custom Earthquake Map

Prepare Basic World Map Convert Earthquake Data to JSON Plot Earthquakes on Map Create a Legend Zoom to Hotspot Regions

#71: Search Music Events by Location

Prepare HTML for Search Interface Perform an Upcoming API Search Retrieve Event Data Server-Side Plot Event Search Results on a Map Filter Results by Ticket Price

#72: Plot Twitter Geo-Tweets

Prepare the Map with User Location Geocode User Input Retrieve Geo-Tweets from Twitter

#73: Find a Coffee Shop to Meet in the Middle

Prepare the Map and Form Retrieve Driving Directions Find the Route's Midpoint Search for Coffee on Yelp

A. JAVASCRIPT QUICK START

Where JavaScript Goes Variables

Arithmetic Arrays Objects

Conditionals Loops Functions

Variable Scope Anonymous Functions

Using jQuery

Query Document Objects Insert and Hide Content Use Browser Events Load Files and Data

B. MAPSTRACTION REFERENCE

Class mxn.Mapstraction

Function mxn.Mapstraction

Parameters Returns Example

Function addControls

Parameter Example

Function addFilter

Parameters Example

Function addImageOverlay

Parameters Example

Function addLargeControls Function addMapTypeControls Function addMarker

Parameter Example

Function addMarkerWithData

Parameters Example

Function addOverlay

Parameters Example

Function addPolyline

Parameter Example

Function addPolylineWithData

Parameters Example

Function addSmallControls Function addTileLayer

Parameters Example

Function applyOptions Function autoCenterAndZoom Function centerAndZoomOnPoints

Parameter Example

Function declutterMarkers Function doFilter

Example

Function getAttributeExtremes

Parameter Returns Example

Function getBounds

Returns

Function getCenter

Returns

Function getMap

Returns

Function getMapType

Returns

Function getZoom

Returns

Function getZoomLevelForBoundingBox

Parameter

Function polylineCenterAndZoom Function removeAllFilters Function removeAllMarkers Function removeAllPolylines Function removeFilter

Parameters Example

Function removeMarker

Parameter Example

Function removePolyline

Parameter Example

Function resizeTo

Parameters Example

Function setBounds

Parameter

Function setCenter

Parameter Example

Function setCenterAndZoom

Parameters Example

Function setDebug

Parameter

Function setMapType

Parameter Example

Function setOption

Parameters Example

Function setOptions

Parameter Example

Function setZoom

Parameter Example

Function swap

Parameters Example

Function toggleFilter

Parameters Example

Function toggleTileLayer

Parameter Example

Function visibleCenterAndZoom Variables in mxn.Mapstraction Class

Class mxn.BoundingBox

Function mxn.BoundingBox

Parameters Returns Example

Function contains

Parameter Returns Example

Function extend

Parameter Example

Function getNorthEast

Returns

Function getSouthWest

Returns

Function isEmpty

Returns

Class mxn.LatLonPoint

Function mxn.LatLonPoint

Parameters Returns Example

Function distance

Parameter Returns Example

Function equals

Parameter Returns Example

Function latConv Function lonConv Function toString

Returns

Class mxn.Marker

Function mxn.Marker

Parameter Returns Example

Function addData

Parameter Example

Function getAttribute

Parameter Returns Example

Function setAttribute

Parameters Example

Function setDraggable

Parameter

Function setHover

Parameter

Function setHoverIcon

Parameter Example

Function setIcon

Parameters Example

Function setIconAnchor

Parameter Example

Function setIconSize

Parameter Example

Function setInfoBubble

Parameter Example

Function setInfoDiv

Parameters Example

Function setLabel

Parameter Example

Function setShadowIcon

Parameters Example

Class mxn.Polyline

Function mxn.Polyline

Parameter Returns Example

Function addData

Parameter Example

Function setClosed

Parameter

Function setColor

Parameter Example

Function setFillColor

Parameter Example

Function setWidth

Parameter Example

Function simplify

Parameter Example

Namespace mxn.util

Function mxn.util.$m

Parameter Returns Example

Function mxn.util.getAvailableProviders

Returns Example

Function mxn.util.getStyle

Parameters Returns Example

Function mxn.util.KMToMiles

Parameter Returns

Function mxn.util.loadScript

Parameter

Function mxn.util.loadStyle

Parameter

Function mxn.util.lonToMetres

Parameters Returns

Function mxn.util.metresToLon

Parameters Returns

Function mxn.util.milesToKM

Parameter Returns

Function mxn.util.stringFormat

Parameters Returns Example

About the Author UPDATES

← Prev
Back
Next →

← Prev
Back
Next →