(feature) Mark searched location on map (OpenSeaMap#100)

When a user searches for a location and selects it, the map is centered at the location but the location is not pinned with a marker.
wschildbach · Feb 19, 2018 · 7f8fb59 · 7f8fb59
1 parent 201a07c
commit 7f8fb59
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/index.php b/index.php
@@ -107,6 +107,9 @@
                 ignoredLayers : ignoredLayers
             });
 
+            // Marker that is pinned at the last location the user searched for and selected.
+            var searchedLocationMarker = null;
+
             // Load map for the first time
             function init() {
                 var buffZoom = parseInt(getCookie("zoom"));
@@ -131,13 +134,14 @@ function init() {
                     lon = mLon;
                 }
                 drawmap();
+                layer_marker = new OpenLayers.Layer.Markers("Marker",{
+                    layerId: -2 // invalid layerId -> will be ignored by layer visibility setup
+                });
+                map.addLayer(layer_marker);
                 try{
                   // Create Marker, if arguments are given
                   if (mLat != -1 && mLon != -1) {
-                      layer_marker = new OpenLayers.Layer.Markers("Marker",{
-                          layerId: -2 // invalid layerId -> will be ignored by layer visibility setup
-                      });
-                      map.addLayer(layer_marker);
+
                       var mtext = he.encode(decodeURIComponent(getArgument("mtext")))
                                     .replace(/\n/g, '<br/>');
                       mtext = mtext.replace('&#x3C;b&#x3E;', '<b>')
@@ -707,7 +711,7 @@ function addSearchResults(xmlHttp) {
                     pos = buff.indexOf(",");
                     placeName = buff.substring(0, pos);
                     description = buff.substring(pos +1).trim();
-                    htmlText += "<tr style=\"cursor:pointer;\" onmouseover=\"this.style.backgroundColor = '#ADD8E6';\"onmouseout=\"this.style.backgroundColor = '#FFF';\" onclick=\"jumpTo(" + placeLon + ", " + placeLat + ", " + zoom + ");\"><td  valign=\"top\"><b>" + placeName + "</b></td><td>" + description + "</td></tr>";
+                    htmlText += "<tr style=\"cursor:pointer;\" onmouseover=\"this.style.backgroundColor = '#ADD8E6';\"onmouseout=\"this.style.backgroundColor = '#FFF';\" onclick=\"jumpToSearchedLocation(" + placeLon + ", " + placeLat + ");\"><td  valign=\"top\"><b>" + placeName + "</b></td><td>" + description + "</td></tr>";
                 }
                 htmlText += "<tr><td>&nbsp;</td><td align=\"right\"><br/><input type=\"button\" id=\"buttonMapClose\" value=\"<?=$t->tr("close")?>\" onclick=\"closeActionDialog();\"></td></tr></table>";
                 showActionDialog(htmlText);

diff --git a/javascript/map_utils.js b/javascript/map_utils.js
@@ -113,6 +113,24 @@ function shorter_coord(coord) {
     return Math.round(coord*100000)/100000;
 }
 
+/**
+ * Centers the map to a location the user searched for and selected. The location is marked with a pin.
+ */
+function jumpToSearchedLocation(longitude, latitude) {
+
+    /**
+     *  The user has previously searched and selected a location. A marker already exists on the map for that location.
+     *  I remove that marker.
+     */
+    if (searchedLocationMarker !== null) {
+        layer_marker.removeMarker(searchedLocationMarker);
+    }
+    // I add a market at the location the user searched for.
+    searchedLocationMarker = addMarker(layer_marker, longitude, latitude, -1);
+
+    // I center the map at the searched location.
+    jumpTo(longitude, latitude, zoom)
+}
 
 // Common utilities------------------------------------------------------------
 function jumpTo(lon, lat, zoom) {
@@ -205,6 +223,8 @@ function addMarker(layer, buffLon, buffLat, popupContentHTML) {
         marker.events.register("mousedown", mFeature, markerClick);
         map.addPopup(mFeature.createPopup(mFeature.closeBox));
     }
+
+    return marker;
 }
 
 // Vector layer utilities------------------------------------------------------