mmg
Version:
Simple markers for Modest Maps
57 lines (54 loc) • 1.73 kB
HTML
<html>
<head>
<title>mmg: simple markers for Modest Maps</title>
<style>
.m {
width:200px;
height:200px;
margin:5px;
float:left;
border:1px solid #000;
}
.m img {
opacity:0.7;
}
</style>
</head>
<body>
<script type='text/javascript' src='src/mmg.js'></script>
<script type='text/javascript' src='src/simplestyle_factory.js'></script>
<script type='text/javascript' src='lib/modestmaps.min.js'></script>
<script type='text/javascript' src='lib/wax.mm.min.js'></script>
<script type='text/javascript'>
var features = [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-77, 38.8]
},
"properties": {
"marker-shape": "pin",
"marker-size": "medium",
"marker-symbol": "bus",
"marker-color": "#0f0"
}
}];
function sapi(z) {
return 'http://api.tiles.mapbox.com/v3/tmcw.map-o7j5b5xj/pin-m-bus+ff00ff(-77,38.8)/-77,38.8,' + z + '/200x200.png';
}
wax.tilejson('http://a.tiles.mapbox.com/v3/tmcw.map-d1edkndr.jsonp',
function(tj) {
for (var z = 1; z < 17; z++) {
var d = document.body.appendChild(document.createElement('div'));
d.className = 'm';
d.style.backgroundImage = 'url("' + sapi(z) + '")';
var m = new MM.Map(d, new wax.mm.connector(tj))
.zoom(z).center(new MM.Location(38.8, -77));
var tomLayer = mmg().factory(simplestyle_factory).features(features);
m.addLayer(tomLayer);
}
});
</script>
</body>
</html>