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
This commit is contained in:
Rohan Asmat 2018-10-25 00:43:26 +02:00 committed by Dave Conway-Jones
parent 16e588567d
commit 27dd9a1fea
2 changed files with 59 additions and 1 deletions

View File

@ -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"}}`

View File

@ -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();