Skip to content
RandomEtc edited this page Aug 30, 2011 · 2 revisions

UI Classes

There are three primary UI classes, which connect the three kinds of geometry classes described below.

Map

Map is the core class of Modest Maps. Instantiating Map with a div and a map provider and setting its initial location will create a fully-functional interactive map.

The map knows about Points and Locations, and can convert between them:

  • pointLocation() converts from an x, y pixel point to a lat, lon world location.
  • locationPoint() converts from a lat, lon world location to an x, y pixel point.

Tile Grid

The Map class also encapsulates the geography-agnostic tile placement core of a map. It places, moves, and displays tiles within a map.

The map also knows about Points and Coordinates, and can convert between them:

  • pointCoordinate() converts from an x, y point to a row, column, zoom coordinate.
  • coordinatePoint() converts from a row, column, zoom coordinate to an x, y point.

Map Provider

An implementation of the MapProvider interface provides geographical info for the map, and cab generate an URL for a given coordinate.

The provider knows about Locations and Coordinates, and can convert between them:

  • locationCoordinate() converts from an lat, long location to a row, column, zoom coordinate.
  • coordinateLocation() converts from a row, column, zoom coordinate to an lat, long location.

Transformation

Most of the map providers used with Modest Maps have the following definition in their constructors:

var t = new com.modestmaps.Transformation(1.068070779e7, 0, 3.355443185e7, 0, -1.068070890e7, 3.355443057e7);
this.projection = new com.modestmaps.MercatorProjection(26, t);

This is a linear transformation between two-dimensional points.

The one in the example above means: take a point, multiply its x by 1.068070779e7 and add 3.355443185e7, then multiply its y by -1.068070890e7 and add 3.355443057e7. These numbers were derived by examining the major commercial map providers, determining that they all used the same underlying projection and coordinate transformation (i.e. take a square Mercator world map, divide it into quarters until you run out of detail), and visually comparing known points on each map to their corresponding image tiles. Notes on this in TileCoordinateComparisons.

Projection

A map provider contains a Projection, which does the actual work of converting between locations and coordinates. /Projecting/ refers to the process of taking a three-dimensional globe with latitude and longitude locations on it, and flattening it out onto a two-dimensional map. Most of the big-name commercial tile providers use the Mercator projection. Just using projections (as defined in places like MathWorld) will yield small floating point values that are not immediately useful for drawing maps. The projection's transformation takes this raw output and converts it to usable coordinate values.

The 26 in the example above means the the two-dimensional transformation for that Mercator projection was calculated at zoom level 26, the highest zoom level for which reliable data could be found on the major map providers. Notes on this in TileCoordinateComparisons.

Geometry Classes

The three geometry classes describe the three kinds of position information used in a map.

Location

Location is a geographical latitude and longitude, expressed as a simple pair of numbers. For example, San Francisco is near 37°N, 122°W or new Location(37, -122).

Point

Point is a pixel position on screen, expressed as a simple pair of numbers. The methods of Map that convert to/from points work relative to the map's containing div element. This is used to locate the pixel within the map, starting at (0, 0) in the upper-lefthand corner.

Coordinate

Coordinate is a three dimensional position that helps to convert between zoom levels. It is expressed as a row, column, and zoom. Zoom levels in Modest Maps start at zero, and grow as you zoom in. Tile providers typically express tile locations in such coordinates, which is why the map provider interface understands coordinates and not points. Whole-number coordinates in the tile grid correspond exactly to tile images requested from the provider server.