##Overlay popup
The key file in this example is follower-canvas
which applies the styling and draws the popup using canvas on the map. There is additional fallback support for IE < 9 by using Vector Markup Language, or vml.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Wax Interactivity</title> | |
</head> | |
<body> | |
<style> | |
#map { | |
width: 100%; |
var initMap = function() { | |
var template = 'http://{S}tile.openstreetmap.org/{Z}/{X}/{Y}.png'; | |
var subdomains = ['', 'a.', 'b.', 'c.']; | |
var provider = new MM.TemplatedLayer(template, subdomains); | |
var map = new MM.Map('map', provider, null, [ | |
new MM.MouseWheelHandler(null, true) | |
]); | |
map.setCenterZoom(new MM.Location(37.811530, -122.2666097), 9); |
var map; | |
var initMap = function() { | |
var template = 'http://{S}tile.openstreetmap.org/{Z}/{X}/{Y}.png'; | |
var subdomains = ['', 'a.', 'b.', 'c.']; | |
var provider = new MM.TemplatedLayer(template, subdomains); | |
map = new MM.Map('map', provider, null, [ | |
new MM.MouseWheelHandler(null, true) | |
]); |
##Enforce Limits
Sometimes you want to limit a users ability to pan around to just a particular region. In Modest Maps you can specify limits by setting locationCoordinate
to the map object.
var baseMap = 'mapbox.world-bright' | |
var layers = [ | |
baseMap | |
]; | |
var loadMap = function(layers) { | |
var url = 'http://api.tiles.mapbox.com/v3/' + layers + '.jsonp'; | |
wax.tilejson(url, function(tilejson) { | |
var map = new MM.Map('map', new wax.mm.connector(tilejson)); | |
map.setCenterZoom({ lat: 39, lon: -98 }, 4); |
##Two Maps
Experiment in synching two maps together.
##Spotlight
Create a spotlight effect using canvas over specified co-ordinates.