+ center map on trail ui
authortgambet
Tue, 23 Aug 2011 16:41:20 -0400
branchui
changeset 26 c9e953f0337f
parent 23 dff871c4acc5
child 30 067575f6c9d2
+ center map on trail
src/main/resources/templates/index.html
--- a/src/main/resources/templates/index.html	Tue Aug 23 15:52:45 2011 -0400
+++ b/src/main/resources/templates/index.html	Tue Aug 23 16:41:20 2011 -0400
@@ -12,15 +12,15 @@
 	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
 	
 	<script type="text/javascript">
-		var lat=42.412704
-		var lon=-71.140267
+		//var lat=42.412704
+		//var lon=-71.140267
 		var zoom=13
 		var map;
 		function init() {
 			map = new OpenLayers.Map ("map", {
 				controls:[
 					new OpenLayers.Control.Navigation(),
-					new OpenLayers.Control.PanZoomBar(),
+					new OpenLayers.Control.PanZoom(),
 					//new OpenLayers.Control.LayerSwitcher(),
 					//new OpenLayers.Control.Attribution()
 					],
@@ -48,37 +48,53 @@
 				projection: new OpenLayers.Projection("EPSG:4326")
 			});
 			map.addLayer(lgpx2);
- 
-			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+			
+			var jsonData;
+			var http = new XMLHttpRequest();
+			http.open('GET','Jun-26-11.json',false);
+			http.onreadystatechange = function () {
+				console.log("state: " + http.readyState);
+				if(http.readyState == 4){
+					jsonData = eval('(' + http.responseText + ')');
+				}
+			};
+			http.send(null);
+			
+			centerMapOnTrail(jsonData);
+		}
+
+		function centerMapOnTrail(json) {
+			var bounds = getBounds(json);
+			//var lonLat = new OpenLayers.LonLat(centerLon,centerLat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+			var lonLat = bounds.getCenterLonLat().transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 			map.setCenter(lonLat, zoom);
- 
-			//map.setCenter(new OpenLayers.LonLat(0, 0), 5);
-			//map.zoomToMaxExtent();
-			//var size = new OpenLayers.Size(21, 25);
-			//var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
-			//var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
-			//layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
 		}
 		
-		var jsonData;
-		var http = new XMLHttpRequest();
-		http.open('GET','Aug-10-11.json',false);
-		http.onreadystatechange = function () {
-			console.log("state: " + http.readyState);
-			if(http.readyState == 4){
-				//console.log(http.responseText);
-				jsonData = eval('(' + http.responseText + ')');
+		function getBounds(json) {
+			var minLat = json.events[0].c[0];
+			var maxLat = minLat;
+			var minLong = json.events[0].c[1];
+			var maxLong = minLong;
+			for (i=1; i < json.events.length; i++) {
+				if ((lat = json.events[i].c[0]) < minLat) {
+					minLat = lat;
+					continue;
+				} if ((lat = json.events[i].c[0]) > maxLat) {
+					maxLat = lat;
+					continue;
+				} if ((longi = json.events[i].c[1]) < minLong) {
+					minLong = longi;
+					continue;
+				} if ((longi = json.events[i].c[1]) > maxLong) {
+					maxLong = longi;
+					continue;
+				}
 			}
-		};
-		http.send(null);
-		console.log(jsonData.events[0].c[0]);
-		
-		getBounds(jsonData);
-		
-		function getBounds(json) {
-			for (i=0; i < json.events.length; i++) {
-				console.log(json.events[i]);
-			}
+			bounds = new OpenLayers.Bounds();
+			bounds.extend(new OpenLayers.LonLat(minLong,minLat));
+			bounds.extend(new OpenLayers.LonLat(maxLong,maxLat));
+			return bounds;
+			//return {'longRange': [minLong,maxLong], 'latRange': [minLat,maxLat]}
 		}
 	</script>