-
Notifications
You must be signed in to change notification settings - Fork 73
Home
- Layers and Providers - ways of putting tiles and data on the map
- Point, Location, and Coordinate - datatypes for places in the world and on your screen
- Projections and Transformations - changing coordinates from one type to another with math
- Interaction - getting your mouse and fingers to move the map
- Map Moving - using code to move the map
- Util - basic utilities for dealing with browsers and elements
- Upgrading to 2.0 - if you've already been using a 1.x version
- Upgrading to 1.0 - if you've already been using a 0.x version
- Testing - how we test
- How it Works - for those interested in guts
We're doing our best to follow Semantic Versioning for version number guidelines. These docs are written against v1.0.0 and should be valid for all v1.x.y versions.
Modest Maps is as much a vocabulary for tiled maps as it is a code library. See ModestMapsNess for a more concise overview.
Please also play with the examples for hints on intended usage.
A Map
requires a DOM element, layer and optional dimensions
and event handlers. The simplest way to create one is in the window
onload handler with a Template
instance, and the id of a div with width and height set.
Note that calculated sizes, like 100%
or sizes determined by position:absolute;
, are not actually calculated until window.onload
. It is best to either run modestmaps with a script at the bottom of a page, or equivalently by registering to the window.onload
handler. jQuery's $(function() { })
method runs pre-load.
// name of a div element:
var parent = 'map';
// defaults to Google-style Mercator projection, so works
// out of the box with OpenStreetMap and friends:
var template = new MM.Template('http://tile.openstreetmap.org/{Z}/{X}/{Y}.png');
var layer = new MM.Layer(template);
// without a size, it will expand to fit the parent:
var map = new MM.Map(parent, layer);
Alternatively you can specify a fixed size:
// 600px wide, 400px tall
var dimensions = new MM.Point(600, 400);
var map = new MM.Map(parent, layer, dimensions);
And you can also specify a provider with a more complex method of generating URLs:
// name of a div element:
var parent = 'map';
var provider = new MM.MapProvider(function(c) {
var img = [ c.zoom, c.column, c.row ].join('/') + '.png';
return 'http://tile.openstreetmap.org/' + img;
});
var layer = new MM.Layer(provider);
var map = new MM.Map(parent, layer);
A map can support multiple Layers, and has an interface to add, remove, and rearrange them.
// Prepare a new layer
var osm = new MM.Layer(new MM.Template('http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'+bust))
var mq = new MM.Layer(new MM.Template('http://otile1.mqcdn.com/tiles/1.0.0/osm/{Z}/{X}/{Y}.jpg'))
// Insert a layer at index 0
map.insertLayerAt(0, osm);
// Replace that layer with another one
map.setLayerAt(0, mq);
// Remove that layer
map.removeLayerAt(0);
To set the Location
of the center of the map use setCenter(location)
.
To set the zoom level use setZoom(number)
. Or use
setCenterZoom(location,number)
to set both the center and the zoom level at the same time:
map.setCenter(new MM.Location(37.7749295, -122.4194155));
map.setZoom(11);
map.setCenterZoom(new MM.Location(37.7749295, -122.4194155), 11);
To set the map to a location and zoom level that will show a given
bounding box (extent) or a set of points, use setExtent(locations)
and pass it an array of 2 or more Locations
:
var locations = [
new MM.Location(37.7749295, -122.4194155),
new MM.Location(37.8043722, -122.2708026),
new MM.Location(37.8715926, -122.272747)
];
map.setExtent(locations);
You can query the map position using getCenter()
, getZoom()
and getExtent()
:
var locations = map.getExtent(); // returns an array of Locations
var loc = map.getCenter() // returns a single Location
var zoomLevel = map.getZoom();
Note that calling map.setCenter(map.getCenter())
should do
nothing, but calling map.setExtent(map.getExtent())
could result
in a zoom out to ensure that setExtent performs correctly.
To set the map size (e.g. in a window.onresize handler) use setSize
and pass it a point or two numbers:
// the following are equivalent:
map.setSize(new MM.Point(600,400));
map.setSize(600,400);
Note that the map will automatically resize if you didn't supply initial dimensions in the constructor and your CSS specifies relative sizes such as percentages or ems.
Map
can report on several events using a simple callback system.
To be notified of map changes subscribe to some or all of the
following events: panned
, zoomed
, extentset
, centered
,
resized
, drawn
. Each callback will receive the current map as its first argument.
To make overlays that follow the map, or update parts of the page when the map changes, the simplest callback to register is 'drawn':
var info = document.getElementById('info');
map.addCallback('drawn', function(m) {
// respond to new center:
info.innerHTML = m.getCenter().toString();
});
Map also exposes a removeCallback
method for keeping things
tidy, and uses dispatchCallback
internally to notify listeners of changes.
We're considering changing to an extremely simple callback model with only one event (perhaps only the 'drawn' event). We'd welcome your feedback on this.
At time of writing, Map
also exposes several functions which
are only for internal use. We're working on moving the javascript patterns
we use for these objects so that these internal APIs don't leak
into your work. For the record, we don't expect you to use any
of the following methods (unless you're doing work on the
Modest Maps internals yourself, of course): getStats
,
enforceLimits
, draw
, getTileComplete
, requestRedraw
,
getRedraw
, createOrGetLayer
, checkCache
, getCenterDistanceCompare
.
The CallbackManager
and RequestManager
classes are used internally
and should not considered stable APIs.
The long name of Modest Maps, com.modestmaps
, is by default aliased
to MM
. If another
object wants to occupy MM
, one can call MM.noConflict()
and
Modest Maps will only inhabit its extended name, com.modestmaps
.