Changeset 33140 for main/trunk/greenstone3/web/interfaces/default/js/map-scripts-shapes-util.js

Timestamp:

2019-06-07T20:30:54+12:00 (5 years ago)

Author:

wy59

Message:

1. Moved from plotting markers for each coord in doc.coords array to creating doc.mapOverlay from GPS.mapOverlay meta and converting each shape therein into Google Map Shapes/Overlays and storing these in the new doc.shapes array. 2. We now use Google Map InfoWindows to display label information for shapes/markers that have them. For now the labels are displayed/hidden on mouseover and mouseout. We can make them permanently displayed if necessary. 3. Lots more TODO questions added.

File:

• main/trunk/greenstone3/web/interfaces/default/js/map-scripts-shapes-util.js (modified) (2 diffs)

main/trunk/greenstone3/web/interfaces/default/js/map-scripts-shapes-util.js

@@ -219 +219 @@
     var NE = new google.maps.LatLng(north, east);
     var SW = new google.maps.LatLng(south, west);
-    bounds = new google.maps.LatLngBounds(SW, NE);
+    bounds = new google.maps.LatLngBounds(SW, NE); // THIS IS NOT IN GOOGLE MAPS' RECTANGLE FORMAT!
     
     var rect = ShapesUtil._createRectangle(json_rect,bounds);
@@ -485 +485 @@
 
 
+// function returns an object (representing a Coordinate) of the form {lat: 34.052, lng: -118.243}
+// For each shape's properties: https://developers.google.com/maps/documentation/javascript/shapes
+ShapesUtil.getLabelCoordinate = function(shape) {   
+    
+    if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
+        var path = shape.getPath(); // assuming a minimum of one path array for each polygon
+        return path.getAt(0); // return the first coord of polyline for now
+    } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
+        var path = shape.getPath(); // assuming a minimum of one path array for each polygon
+        return path.getAt(0); // return the first coord for now
+    } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {      
+        // Doesn't work:
+        //var latitude = (shape.bounds.north + shape.bounds.south) / 2;
+        //var longitude = (shape.bounds.east + shape.bounds.west) / 2;
+        //console.log("Rect: " + shape.bounds.toString());
+        //return {lat: shape.bounds.north, lng: shape.bounds.east};
+        // A Google Maps Rectangle's bounds property has 4 attributes/properties: north, south, east, west
+        // But this ShapesUtil.Rectangle class's bounds property has 2 coord properties: SW and NE.
+        // However, it is handy in this case, since we can just call getCenter()
+        return shape.bounds.getCenter();
+    } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {     
+        return shape.center; // circles have a centre
+    } else if (shape.type === google.maps.drawing.OverlayType.MARKER){
+        return shape.position;
+    }
+    else {
+        console.error("*** ShapesUtil::getLabelCoordinate() Unrecognized shape type: " +shape.type);
+        return null;
+    }
+}
+
+