mmg
Version:
Simple markers for Modest Maps
104 lines (88 loc) • 3.65 kB
HTML
<html>
<head>
<title>mmg: simple markers for Modest Maps</title>
<link href='css/site.css' rel='stylesheet' type='text/css' />
<link href='src/mmg.css' rel='stylesheet' type='text/css' />
<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' src='src/mmg.js'></script>
<script type='text/javascript' src='src/simplestyle_factory.js'></script>
<script type='text/javascript' src='src/mmg_interaction.js'></script>
</head>
<body>
<div class='column'>
<h2><a href='http://mapbox.com/'>MapBox</a> mmg</h2>
<div class='map' id='map'></div>
<p><strong>mmg</strong> adds points in <a href='http://www.geojson.org/'>GeoJSON</a>
on maps powered by <a href='http://modestmaps.com/'>Modest Maps</a>. There are no other dependencies,
and it's designed to work cross-browser.</p>
<div class='map' id='ss-map'></div>
<p>mmg comes with a <strong>simplestyle factory</strong> which implements the
<a href='https://github.com/mapbox/simplestyle-spec'>simplestyle spec</a> and
adds nice markers to GeoJSON with a predictable scheme of attributes.</p>
<a class='link-panel' href='https://github.com/mapbox/mmg'>Clone or Download on GitHub →</a>
<a class='link-panel' href='https://github.com/mapbox/mmg/wiki'>Developer Documentation →</a>
<a class='link-panel' href='http://mapbox.com/mmg/test/'>Test Suite →</a>
<p>mmg is open source licensed under BSD</p>
</div>
<style>
.mmg-default {
background:magenta;
width:10px;
height:10px;
}
.my-custom {
position:absolute;
background:#fffa96;
}
</style>
<script type='text/javascript'>
wax.tilejson('http://a.tiles.mapbox.com/v3/tmcw.boldness.jsonp',
function(tj) {
var m = new MM.Map('map', new wax.mm.connector(tj))
.setCenterZoom(new MM.Location(0, 0), 2);
m.addLayer(mmg().url('example/random_geojson_points.geojson'));
var ft = [{ 'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-40.0, 30.0]
},
'properties': { 'name': 'Tom' }
}];
var tomLayer = mmg().factory(function(x) {
var d = document.createElement('div');
d.setAttribute('class', 'my-custom');
d.innerHTML = x.properties.name;
d.onclick = function() {
alert('hi, ' + this.innerHTML);
};
return d;
}).features(ft);
m.addLayer(tomLayer);
});
wax.tilejson('http://a.tiles.mapbox.com/v3/tmcw.map-5vaivzxq.jsonp',
function(tj) {
var m = new MM.Map('ss-map', new wax.mm.connector(tj))
.setCenterZoom(new MM.Location(37.8, -77), 7);
var tomLayer = mmg().factory(simplestyle_factory).url('example/simplestyle.geojson', function(feat, l) {
mmg_interaction(l);
});
m.addLayer(tomLayer);
});
</script>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4e970faef5a1f51def000002');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>