Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (81 sloc) 3.41 KB
<html>
<head>
<title>Modest Maps JS</title>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="lib/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/dojo.xd.js"></script>
<script type="text/javascript" src="../../src/modestmaps.js"></script>
<script type="text/javascript" src="../cloudmade/cloudmade.js"></script>
<script type="text/javascript" src="mapcontrols-dojo.js"></script>
<script type="text/javascript" src="polygonmarker-canvas.js"></script>
<script type="text/javascript">
var map;
function initMap() {
// "import" the namespace
var mm = com.modestmaps;
// please use your own API key, see http://developers.cloudmade.com/ for more details
var provider = new mm.CloudMadeProvider('1a914755a77758e49e19a26e799268b7','998');
map = new mm.Map('map', provider, new mm.Point(640,480))
map.setCenterZoom(new mm.Location(40.547, -78.091), 3);
$.ajax({
type: "GET",
url: "KATRINA23_2005.xml",
dataType: "xml",
success: onDataLoaded
});
}
function onDataLoaded(xml) {
$(xml).find('ForecastErrorSwath').each(renderSwath);
$(xml).find('PastWindSwath').each(renderSwath);
$(xml).find('ForecastWindSwath').each(renderSwath);
$(xml).find('CurrentWindRing').each(renderSwath);
new com.modestmaps.MapControls(map);
}
function renderSwath(i, swath) {
var pairs = $(swath).find('Coordinates').text().split(' ');
var locations = [];
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i]
if (pair && pair.length > 3) {
pair = pair.split(',');
if (pair && pair.length == 2) {
var location = new com.modestmaps.Location(pair[1], pair[0]);
if (!isNaN(location.lat) && !isNaN(location.lon)) {
locations.push(location);
}
}
}
}
if (locations.length > 0) {
var fillStyle = 'rgba(255,0,0,0.25)';
var strokeStyle = 'black';
if (swath.nodeName == 'PastWindSwath') {
fillStyle = 'rgba(80,40,0,0.25)';
strokeStyle = null;
}
else if (swath.nodeName == 'CurrentWindRing') {
fillStyle = 'rgba(255,0,0,0.5)';
strokeStyle = 'white';
}
else if (swath.nodeName == 'ForecastWindSwath') {
fillStyle = 'rgba(255,80,40,0.25)';
strokeStyle = null;
}
else if (swath.nodeName == 'ForecastErrorSwath') {
fillStyle = null
strokeStyle = 'rgb(80,80,80)';
}
var polygon = new com.modestmaps.PolygonMarker(map, locations, fillStyle, strokeStyle);
}
}
</script>
</head>
<body onload="initMap()">
<h1>Modest Maps JS</h1>
<p><a href="javascript:map.zoomIn()">zoom in</a> | <a href="javascript:map.zoomOut()">zoom out</a>
<br><a href="javascript:map.panLeft()">pan left</a> | <a href="javascript:map.panRight()">pan right</a> | <a href="javascript:map.panDown()">pan down</a> | <a href="javascript:map.panUp()">pan up</a></p>
<div id="map"></div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.