Example: MoveOn Virtual Town Hall
Where To Start
Demo: MapDemo.swf, code samples: demo.tar.gz (updated July 7 2005 10:25am EDT).
Acquire: Data sources
- Postal codes
- Government Resources
- Direct Manipulation of a map-like UI
Translate: Geo Data
What does geospatial data look like?
- Coordinates pairs.
- Latitude & longitude rather than x & y.
- These range +/- 180 degrees.
Translate: Flash Geo Data
3-member tuples with a latitude, longitude, and identifiers.
var lower48MapCityData : Array =
name : "San Francisco, California",
lat : 37.77,
long : -122.43
name : "Bethesda, Maryland",
lat : 39.00,
long : -77.11
Translate: XML Geo Data
Modified example from Mappr.
We do the projection server-side (more on that in a minute), using a
Lambert Azimuthal Equal Area projection
centered on 45°N 100°W.
<?xml version="1.0" encoding="utf-8" ?>
<point name="San Francisco, California">
<geo latitude="37.77" longitude="-122.43" />
<projected x="-262.14" y="73.43" />
<point name="Bethesda, Maryland">
<geo latitude="39.00" longitude="-77.11" />
<projected x="262.65" y="53.86" />
Project: Example Step 1
Start with a 3-dimensional globe:
Project: Example Step 2
Raw projection, centered on Europe:
Project: Example Step 3
A specific map based on part of a projection:
- Each projection method gives you a “universal” x & y coordinate—totally raw, totally useless on its own.
- You’re going to need to take the raw output of the projection equations, and convert them to the local coordinates of your map.
- To do this, you will use affine transformations, i.e. a combination of scaling, rotation, and translation.
- In other words, linear algebra.
- Unfortunately, the math is a little hairy.
- Fortunately, we have written code that does it for you.
You need only know the specific projection used, and three well-chosen reference points.
- Attach your x & y points to the map.
- Many points may be outside the visible boundaries, if you have the map zoomed-in to a small area. Use
hitTest to avoid drawing these.
- What happens when points are too close to one another at a given zoom level?
- One approach: use a clustering algorithm to determine crowding levels in various spots, and move the points to give them more room. This is hard, thankless work for the CPU.
- Another approach: give each point a minimum zoom level in the data source. Much easier, if you know them all ahead of time.
Plotted images are rotated along parallels.
Draws your route by connecting points and scrolling around the world.
“Kirby dots” for layered metadata presentation.
- Contextual menus
- Popups with high-detail information
- It’s hard to do both; often you need to introduce keyboard modifier keys or limit a dimension of interaction.