mmg
Version:
Simple markers for Modest Maps
50 lines (48 loc) • 2.19 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' type='text/css' rel='stylesheet' />
</head>
<body>
<div class='column'>
<h2><a href='http://mapbox.com/'>MapBox</a> mmg</h2>
<div class='map' id='map'></div>
<p>It's easy to use mmg with CSV data if you want - just call mmg_csv
like <code>mmg_csv('example/earthquakes.csv', function(features) {</code>
and you'll get your CSV features in GeoJSON style, as an array you
can feed into <code>mmg.features(features)</code>.</p>
</div>
<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>
<script type='text/javascript' src='bonus/csv_parse.js'></script>
<script type='text/javascript' src='bonus/mmg_csv.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' src='ext/movetip.js'></script>
<script type='text/javascript'>
wax.tilejson('http://a.tiles.mapbox.com/v3/tmcw.map-5vaivzxq.jsonp',
function(tj) {
var m = new MM.Map('map', [
new wax.mm.connector(tj)
]);
mmg_csv('example/earthquakes.csv', function(features) {
for (var i = 0; i < features.length; i++) {
var color = (Math.round(features[i].properties.Magnitude * 40)).toString(16);
if (color.length === 1) color = '0' + color;
features[i].properties['marker-color'] = '#' + color + '00' + color;
features[i].properties.title = features[i].properties.Region;
}
var ml = mmg()
.factory(simplestyle_factory)
.features(features);
m.addLayer(ml);
m.extent(ml.extent());
mmg_interaction(ml);
});
});
</script>
</body>
</html>