Basic Dynamic Search Control using the command (#54)

* Worldmap add search command and clear search command

* update in readme!

* update in readme regarding searcch results command

* removing unecessary commits

README.md

@@ -8,7 +8,7 @@ map web page for plotting "things" on.
 ![Map Image](https://dceejay.github.io/pages/images/redmap.png)
 
 ### Updates
-
+- v1.5.6 - Add search command and clear search functionality.
 - v1.5.5 - Allow multiple overlays to be enabled at once - Issue #53
 - v1.5.4 - Allow remote update of the split position via `msg.command.split`
 - v1.5.3 - Add side by side mode (via `msg.command` only).
@@ -246,6 +246,7 @@ Optional properties include
  - **lon** - move map to specified longitude.
  - **zoom** - move map to specified zoom level (1 - world, 13 to 20 max zoom depending on map).
  - **layer** - set map to specified base layer name - `{command:{layer:"Esri"}}`
+ - **search** - add dynamic search control. Object contains the string to be searched and if it contains **clear** then it clears the search results.
  - **showlayer** - show the named overlay(s) - `{command:{showlayer:"foo"}}` or `{command:{showlayer:["foo","bar"]}}`
  - **hidelayer** - hide the named overlay(s) - `{command:{hidelayer:"bar"}}` or `{command:{hidelayer:["bar","another"}}`
  - **side** - add a second map alongside with slide between them. Use the name of a *baselayer* to add - or "none" to remove the control. - `{command:{side:"Esri Satellite"}}`

worldmap/index.html

@@ -408,6 +408,34 @@ function moveToMarks() {
     }
 }
 
+// Clear Search With Marker names
+function clearSearch()
+{
+  var value = document.getElementById('search').value;
+  marks = [];
+  marksIndex = 0;
+  for (var key in markers) {
+      if ( (~(key.toLowerCase()).indexOf(value.toLowerCase())) && (mb.contains(markers[key].getLatLng()))) {
+          marks.push(markers[key]);
+      }
+  }
+  removeMarks();
+  if (lockit) {
+      document.getElementById('searchRes').innerHTML = "";
+  } else {
+      document.getElementById('searchRes').innerHTML = "";
+  }
+}
+
+function removeMarks() {
+    if (marks.length > marksIndex) {
+        var m = marks[marksIndex];
+        map.setView(m.getLatLng(), map.getZoom());
+        m.closePopup();
+        marksIndex++;
+    }
+}
+
 function toggleMenu() {
     menuOpen = !menuOpen;
     if (menuOpen) {
@@ -416,6 +444,21 @@ function toggleMenu() {
         document.getElementById("menu").style.display = 'none';
     }
 }
+
+function openMenu(){
+  if (!menuOpen) {
+      menuOpen = true;
+      document.getElementById("menu").style.display = 'block';
+  }
+}
+
+function closeMenu(){
+  if (menuOpen) {
+      menuOpen = false;
+      document.getElementById("menu").style.display = 'none';
+  }
+}
+
 document.getElementById("menu").style.display = 'none';
 
 //function clearHeat() {
@@ -1495,6 +1538,20 @@ function doCommand(cmd) {
         baselayername = cmd.layer;
         basemaps[baselayername].addTo(map);
     }
+    // Add search command
+    if (cmd.search) {
+      if(cmd.search !== "clear")
+      {
+        console.log("SEARCH",cmd.search);
+        document.getElementById('search').value = cmd.search;
+        openMenu();
+        doSearch();
+      }else {
+        document.getElementById('search').value = "";
+        closeMenu();
+        clearSearch();
+      }
+    }
     // Add side by side control
     if (cmd.side && (cmd.side === "none")) {
         sidebyside.remove();