Changeset 33140 for main/trunk/greenstone3/web/interfaces/default/js/map-scripts.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.js (modified) (6 diffs)

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

@@ -326 +326 @@
         if(doc.parentCL && doc.parentCL.style.display == "none")
         {
-            doc.marker.setVisible(false);
+            if(doc.shapes) {
+                for(var x = 0; x < doc.shapes.length; x++) {
+                    doc.shapes[x].setVisible(false);
+                }
+            } else {
+                doc.marker.setVisible(false);
+            }
             continue;
         }
         else
         {
-            doc.marker.setVisible(true);
-            markersOnMap++;
+            if(doc.shapes) {
+                for(var x = 0; x < doc.shapes.length; x++) {
+                    doc.shapes[x].setVisible(true);
+                }
+            } else {
+                doc.marker.setVisible(true);
+            }
+            markersOnMap++; // TODO: what do we do with this when we have shapes. This variable may be connected with centring the map?
         }
 
@@ -424 +436 @@
 }
 
-function attachClickHandler(marker, nodeID)
+// Unused at present, called by draggableCreateMarker
+// Map used to have editable markers. Now editable markers are restricted to the map-editor.
+function attachDraggableClickHandler(marker, nodeID)
 {   
     google.maps.event.addListener(marker, 'click', function()
@@ -493 +507 @@
 }
 
-function createMarkers(doc, mainMarker) {
-    if(doc.coords) {
-        for(var x = 0; x < doc.coords.length; x++) {
-            var coord = doc.coords[x];
-            var coordInfo = getLatLngForCoord(doc.coords[x]);
-            pos = new google.maps.LatLng(coordInfo.lat,coordInfo.lng);          
-            createMarker(doc, pos, mainMarker);
-        }
-    } else {
+function createMarkers(doc, mainMarker) {   
+    if(doc.mapoverlay) {
+        //console.log("Have shapes: " + doc.mapoverlay.toString());
+        createShapes(doc, mainMarker);
+    } else { // backwards compatible to deal with Lat and Lng meta stored for doc
         pos = new google.maps.LatLng(doc.lat,doc.lng);
         createMarker(doc, pos, mainMarker);
@@ -507 +517 @@
 }
 
-
+function addInfoMarker(doc, shape) {
+    
+    if(!shape.description) {
+        //console.log("@@@@ " + shape.type.toString() + " had no description/label");
+        return;
+    }
+    
+    // else add an InfoWindow for this shape using the label (shape.description)
+    
+    // https://developers.google.com/maps/documentation/javascript/infowindows
+    // An InfoWindow's "position contains the LatLng at which this info window is anchored.
+    // Note: An InfoWindow may be attached either to a Marker object (in which case its position is based on the marker's location)
+    // or on the map itself at a specified LatLng. Opening an info window on a marker will automatically update the position."
+    var infoWindow = new google.maps.InfoWindow({content:shape.description}); // NOTE: if not setting content or position properties
+            // inside this constructor, need to call setContent/setPosition to set them
+    
+    if(shape.type === google.maps.drawing.OverlayType.MARKER) {
+        var marker = shape;
+        //marker.addListener('mouseover', function() {
+          infoWindow.open(_map, marker);
+        //});
+        attachClickHandler(marker, doc.nodeID); // do what the original code used to do here
+    }
+    else {
+        var coord = ShapesUtil.getLabelCoordinate(shape);       
+        console.log("Coord for " + shape.type.toString() + " is " + coord.toString());
+        infoWindow.setPosition(coord);
+        shape.addListener('mouseover', function() {
+            infoWindow.open(_map);
+        });
+        shape.addListener('mouseout', function() {
+            infoWindow.close();
+        });
+        attachClickHandler(shape, doc.nodeID); // as above      
+    }
+}
+
+// This function will create Google Shapes/Overlays and markers out of a given doc JSONNode's doc.mapOverlay
+// (doc.mapOverlay shapes are stored as an array of JSON) and store the shapes/overlays in the doc.shapes array.
+// Note: doc.coords are just an array of all the coordinates in a doc, not indicating to which shapes they belong.
+// They're only **for searching** - for seaching which coords (hence docs) are in a map.
+// Param mainMarker: if set to true, marker is red. If false, marker is blue
+function createShapes(doc, mainMarker)
+{   
+    // for doc.shapes: don't store JSON anymore, convert them to google Shapes overlays and store them instead
+    doc.shapes = [];
+    for (var i=0; i<doc.mapoverlay.length; i++) {
+        var shape = ShapesUtil.JSONToShape(doc.mapoverlay[i]);      
+        doc.shapes[i] = shape;      
+        shape.setMap(_map);
+        shape["title"] = doc.title;
+        
+        // Unset editable and draggable properties of shape
+        // And for markers, which are initialised to clickable besides, undo the clickability
+        // and set them 
+        if(shape.type === google.maps.drawing.OverlayType.MARKER) {
+            var marker = shape;
+            // mainMarkers should be red
+            if(!mainMarker) {
+                marker["icon"] = "interfaces/" + gs.xsltParams.interface_name + "/images/bluemarker.png";
+            }
+            marker.clickable = false; // only markers
+        }
+        
+        shape.editable = false;
+        shape.draggable = false;
+        
+        
+        
+        // doc[i]'s label = doc.shapes[i].description
+        addInfoMarker(doc, shape);
+    }   
+    
+    var docElement = gs.jqGet("div" + doc.nodeID);
+    var parent;
+    if(docElement)
+    {
+        parent = docElement.parentNode;
+    }
+
+    while(parent && parent.nodeName != "BODY")
+    {
+        if($(parent).attr("id") && $(parent).attr("id").search("divCL") != -1)
+        {
+            doc.parentCL = parent;
+            break;
+        }
+        
+        parent = parent.parentNode;
+    }
+}
+
+// This method is only for backwards compatibility: for those collections with docs that only have Lat and Lng meta
+// and no GPS.mapOverlay (and hence Coordinate) meta.
 // Param mainMarker: if set to true, marker is red. If false, marker is blue
 function createMarker(doc, pos, mainMarker)
+{
+    var marker;
+    if(mainMarker)
+    {
+        marker = new google.maps.Marker
+        ({
+            position: pos,
+            title:doc.title,
+            map:_map
+        });
+    }
+    else
+    {
+        marker = new google.maps.Marker
+        ({
+            position: pos,
+            title:doc.title,
+            map:_map,
+            icon:"interfaces/" + gs.xsltParams.interface_name + "/images/bluemarker.png"
+        });
+    }
+
+    var docElement = gs.jqGet("div" + doc.nodeID);
+    var parent;
+    if(docElement)
+    {
+        parent = docElement.parentNode;
+    }
+
+    while(parent && parent.nodeName != "BODY")
+    {
+        if($(parent).attr("id") && $(parent).attr("id").search("divCL") != -1)
+        {
+            doc.parentCL = parent;
+            break;
+        }
+        
+        parent = parent.parentNode;
+    }
+
+    var info = new google.maps.InfoWindow({content:doc.title});
+    marker.markerInfo = info;
+    doc.marker = marker;
+    attachClickHandler(marker, doc.nodeID);
+}
+
+// TODO: with the following, it seems that clicking on shape expands the entire document
+// Should it be that clicking on a shape should expand the doc section that contains that shape meta?
+function attachClickHandler(shapeOrMarker, nodeID)
+{
+    google.maps.event.addListener(shapeOrMarker, 'click', function()
+    {
+        document.location.href = gs.xsltParams.library_name + "?a=d&ed=1&c=" + gs.cgiParams.c + "&d=" + nodeID + "&dt=hierarchy&p.a=b&p.sa=&p.s=ClassifierBrowse";
+    });
+}
+
+// TODO:
+// Version of createMarker function containing Zeddy's modifications (pre-mapeditor?) to make markers
+// on the public *map* (not on map-editor) draggable/editable and to save these edits/rebuild with them.
+// Do we want to continue supporting editing on the main map? I thought we weren't going to and that editing
+// was exclusive to the map-editor, with the public map only displaying the saved features?
+function draggableCreateMarker(doc, pos, mainMarker)
 {
     var docEdit = (("docEdit" in gs.cgiParams) && (gs.cgiParams['docEdit']));
@@ -522 +687 @@
     var draggable_val = (!docEdit || loggedOutVar) ? false : true;
     
-    var marker
+    var marker;
     if(mainMarker)
     {
@@ -566 +731 @@
     marker.markerInfo = info;
     doc.marker = marker;
-    attachClickHandler(marker, doc.nodeID);
+    attachDraggableClickHandler(marker, doc.nodeID);
 
     ////////////////////////////////////////////////////// TEST