climate-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jo...@apache.org
Subject svn commit: r1501560 - /incubator/climate/trunk/rcmet/src/main/ui/app/js/directives/PreviewMap.js
Date Tue, 09 Jul 2013 21:21:02 GMT
Author: joyce
Date: Tue Jul  9 21:21:02 2013
New Revision: 1501560

URL: http://svn.apache.org/r1501560
Log:
CLIMATE-184 progress - Draw region overlay on preview map

- Add drawing of region area as overlay on the preview map. This works
  well for small datasets. On the large datasets this just ends up
  showing a giant colored blob that doesn't necessarily help the user
  understand the extent of the dataset. I think for global datasets it
  would be better to just display an image of a globe (or something
  similar). If the dataset is just really large then we'll just have to
  keep "trying our best" to display the map in a reasonable manner.
  Unfortunately making the map larger doesn't seem to be an option at
  the moment (as it looks horrible).

Modified:
    incubator/climate/trunk/rcmet/src/main/ui/app/js/directives/PreviewMap.js

Modified: incubator/climate/trunk/rcmet/src/main/ui/app/js/directives/PreviewMap.js
URL: http://svn.apache.org/viewvc/incubator/climate/trunk/rcmet/src/main/ui/app/js/directives/PreviewMap.js?rev=1501560&r1=1501559&r2=1501560&view=diff
==============================================================================
--- incubator/climate/trunk/rcmet/src/main/ui/app/js/directives/PreviewMap.js (original)
+++ incubator/climate/trunk/rcmet/src/main/ui/app/js/directives/PreviewMap.js Tue Jul  9 21:21:02
2013
@@ -16,9 +16,27 @@ App.Directives.directive('previewMap', f
 			//create a CloudMade tile layer and add it to the map
 			L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png',
{}).addTo(map);
 
-			var overlapBounds = [[scope.dataset.latlonVals.latMax, scope.dataset.latlonVals.lonMin],

+			// Zoom the map to the dataset bound regions (or at least try our best to do so)
+			var datasetBounds = [[scope.dataset.latlonVals.latMax, scope.dataset.latlonVals.lonMin],

 								 [scope.dataset.latlonVals.latMin, scope.dataset.latlonVals.lonMax]];
-			map.fitBounds(overlapBounds, {});
+			map.fitBounds(datasetBounds, {});
+
+			// Draw a colored overlay on the region of the map
+			var maplatlon = scope.dataset.latlonVals;
+			var bounds = [[maplatlon.latMax, maplatlon.lonMin], [maplatlon.latMin, maplatlon.lonMax]];
+
+			var polygon = L.rectangle(bounds,{
+				stroke: false,
+				fillColor: $rootScope.fillColors[i],
+				fillOpacity: 0.6
+			});
+
+			// Add layer to Group
+			var rectangleGroup = L.layerGroup();
+			rectangleGroup.addLayer(polygon);
+
+			// Add the overlay to the map
+			rectangleGroup.addTo(map);
 		}
 	};
 });



Mime
View raw message