Commit 78b26614 authored by Eric's avatar Eric

enhancement/bugfix: Search for and zoom to node

Added search for and zoom to node button

needed to move the layer control button out of the way though.
while working on that found a way to disable the event that caused the layer control to expand when hovered over.
also forced the layer control popup  to *always* have a scroll bar, which should fix an issue with _some_ browsers...

Fixes #11
parent d0705e13
......@@ -963,6 +963,13 @@ function create_MapLayers($numNodes, $numLinks, $numMarkers)
var fiveGHzStations = new L.LayerGroup();
var otherStations = new L.LayerGroup();
var upgradeStations = new L.LayerGroup();\n
var allStations = L.layerGroup([
nineHundredMHzStations,
twoGHzStations,
threeGHzStations,
fiveGHzStations,
otherStations]);
";
if ($numLinks > 0)
......@@ -1227,15 +1234,15 @@ map.fullscreenControl.setPosition('verticalcenterleft');
EOD;
$Content .= <<< EOD
//the ruler
var rulerOptions = {position: 'verticalcenterleft',
lengthUnit: {
factor: 0.621371,
display: 'Miles',
decimal: 3}
};
L.control.ruler(rulerOptions).addTo(map);
document.getElementById('ruler').title = 'Ruler\\n(ESC 1x to stop, 2x to remove)';
//the search button
L.control.search({
layer: allStations,
initial: false,
zoom: 16,
position: 'verticalcenterleft',
hideMarkerOnCollapse: true
}).addTo(map);
//the watermark logo
L.Control.Watermark = L.Control.extend({
......@@ -1268,12 +1275,7 @@ L.control.watermark({position: 'bottomright'}).addTo(map);
*/
legend.addTo(map);
legendHidden.addTo(map);
/*
* Layer Control
*/
var layerControls = L.control.groupedLayers(baseLayers, groupedOverlays, {position: 'verticalcenterleft'}).addTo(map);
L.DomEvent.disableClickPropagation(layerControls._container);
L.DomEvent.disableScrollPropagation(layerControls._container);
/*
* Scale Control
*/
......@@ -1337,6 +1339,24 @@ EOD;
/* Attribution */
//attributionCtrl({position: 'bottomleft'}).addTo(map);\n
//the left side controls go in the order they are added.
//we want the ruler and the layers control to be the last two on the bottom
$Content .= <<< EOD
//the ruler
var rulerOptions = {position: 'verticalcenterleft',
lengthUnit: {
factor: 0.621371,
display: 'Miles',
decimal: 3}
};
L.control.ruler(rulerOptions).addTo(map);
document.getElementById('ruler').title = 'Ruler\\n(ESC 1x to stop, 2x to remove)';
//Grouped Layer Control
var layerControls = L.control.groupedLayers(baseLayers, groupedOverlays, {position: 'verticalcenterleft'}).addTo(map);
L.DomEvent.disableClickPropagation(layerControls._container);
L.DomEvent.disableScrollPropagation(layerControls._container);
EOD;
return $Content;
}
?>
......
.leaflet-container .leaflet-control-search {
position:relative;
float:left;
background:#fff;
color:#1978cf;
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.8);
z-index:1000;
margin-left: 10px;
margin-top: 10px;
}
.leaflet-control-search.search-exp {/*expanded*/
background: #fff;
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
.leaflet-control-search .search-input {
display:block;
float:left;
background: #fff;
border:1px solid #666;
border-radius:2px;
height:22px;
padding:0 20px 0 2px;
margin:4px 0 4px 4px;
}
.leaflet-control-search.search-load .search-input {
background: url('../images/loader.gif') no-repeat center right #fff;
}
.leaflet-control-search.search-load .search-cancel {
visibility:hidden;
}
.leaflet-control-search .search-cancel {
display:block;
width:22px;
height:22px;
position:absolute;
right:28px;
margin:6px 0;
background: url('../images/search-icon.png') no-repeat 0 -46px;
text-decoration:none;
filter: alpha(opacity=80);
opacity: 0.8;
}
.leaflet-control-search .search-cancel:hover {
filter: alpha(opacity=100);
opacity: 1;
}
.leaflet-control-search .search-cancel span {
display:none;/* comment for cancel button imageless */
font-size:18px;
line-height:20px;
color:#ccc;
font-weight:bold;
}
.leaflet-control-search .search-cancel:hover span {
color:#aaa;
}
.leaflet-control-search .search-button {
display:block;
float:left;
width:30px;
height:30px;
background: url('../images/search-icon.png') no-repeat 4px 4px #fff;
border-radius:4px;
}
.leaflet-control-search .search-button:hover {
background: url('../images/search-icon.png') no-repeat 4px -20px #fafafa;
}
.leaflet-control-search .search-tooltip {
position:absolute;
top:100%;
left:0;
float:left;
list-style: none;
padding-left: 0;
min-width:120px;
max-height:122px;
box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
background-color: rgba(0, 0, 0, 0.25);
z-index:1010;
overflow-y:auto;
overflow-x:hidden;
cursor: pointer;
}
.leaflet-control-search .search-tip {
margin:2px;
padding:2px 4px;
display:block;
color:black;
background: #eee;
border-radius:.25em;
text-decoration:none;
white-space:nowrap;
vertical-align:center;
}
.leaflet-control-search .search-button:hover {
background-color: #f4f4f4;
}
.leaflet-control-search .search-tip-select,
.leaflet-control-search .search-tip:hover {
background-color: #fff;
}
.leaflet-control-search .search-alert {
cursor:pointer;
clear:both;
font-size:.75em;
margin-bottom:5px;
padding:0 .25em;
color:#e00;
font-weight:bold;
border-radius:.25em;
}
.leaflet-control-layers-group-name {
font-weight: bold;
margin-bottom: .2em;
margin-left: 3px;
}
.leaflet-control-layers-group {
margin-bottom: .5em;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
padding-right: 10px;
}
.leaflet-control-layers-group-name{font-weight:700;margin-bottom:.2em;margin-left:3px}.leaflet-control-layers-group{margin-bottom:.5em}.leaflet-control-layers-scrollbar{overflow-y:scroll;padding-right:10px}
\ No newline at end of file
......@@ -208,7 +208,8 @@ MAP_DETAILS {
display: inline;
}
.leaflet-control-layers-expanded, .leaflet-control-layers-list {
height: 200px !important;
height: 200px !important;
overflow: auto !important;
}
/** New stuff for the popup tabs **/
......
This diff is collapsed.
This diff is collapsed.
/*! Version: 0.5.0
Date: 2016-07-22 */
L.Control.GroupedLayers=L.Control.extend({options:{collapsed:!0,position:"topright",autoZIndex:!0,exclusiveGroups:[],groupCheckboxes:!1},initialize:function(a,b,c){var d,e;L.Util.setOptions(this,c),this._layers={},this._lastZIndex=0,this._handlingClick=!1,this._groupList=[],this._domGroups=[];for(d in a)this._addLayer(a[d],d);for(d in b)for(e in b[d])this._addLayer(b[d][e],e,d,!0)},onAdd:function(a){return this._initLayout(),this._update(),a.on("layeradd",this._onLayerChange,this).on("layerremove",this._onLayerChange,this),this._container},onRemove:function(a){a.off("layeradd",this._onLayerChange).off("layerremove",this._onLayerChange)},addBaseLayer:function(a,b){return this._addLayer(a,b),this._update(),this},addOverlay:function(a,b,c){return this._addLayer(a,b,c,!0),this._update(),this},removeLayer:function(a){var b=L.Util.stamp(a);return delete this._layers[b],this._update(),this},_initLayout:function(){var a="leaflet-control-layers",b=this._container=L.DomUtil.create("div",a);b.setAttribute("aria-haspopup",!0),L.Browser.touch?L.DomEvent.on(b,"click",L.DomEvent.stopPropagation):(L.DomEvent.disableClickPropagation(b),L.DomEvent.on(b,"wheel",L.DomEvent.stopPropagation));var c=this._form=L.DomUtil.create("form",a+"-list");if(this.options.collapsed){L.Browser.android||L.DomEvent.on(b,"mouseover",this._expand,this).on(b,"mouseout",this._collapse,this);var d=this._layersLink=L.DomUtil.create("a",a+"-toggle",b);d.href="#",d.title="Layers",L.Browser.touch?L.DomEvent.on(d,"click",L.DomEvent.stop).on(d,"click",this._expand,this):L.DomEvent.on(d,"focus",this._expand,this),this._map.on("click",this._collapse,this)}else this._expand();this._baseLayersList=L.DomUtil.create("div",a+"-base",c),this._separator=L.DomUtil.create("div",a+"-separator",c),this._overlaysList=L.DomUtil.create("div",a+"-overlays",c),b.appendChild(c)},_addLayer:function(a,b,c,d){var e=L.Util.stamp(a);this._layers[e]={layer:a,name:b,overlay:d},c=c||"";var f=this._indexOf(this._groupList,c);-1===f&&(f=this._groupList.push(c)-1);var g=-1!==this._indexOf(this.options.exclusiveGroups,c);this._layers[e].group={name:c,id:f,exclusive:g},this.options.autoZIndex&&a.setZIndex&&(this._lastZIndex++,a.setZIndex(this._lastZIndex))},_update:function(){if(this._container){this._baseLayersList.innerHTML="",this._overlaysList.innerHTML="",this._domGroups.length=0;var a,b,c=!1,d=!1;for(a in this._layers)b=this._layers[a],this._addItem(b),d=d||b.overlay,c=c||!b.overlay;this._separator.style.display=d&&c?"":"none"}},_onLayerChange:function(a){var b,c=this._layers[L.Util.stamp(a.layer)];c&&(this._handlingClick||this._update(),b=c.overlay?"layeradd"===a.type?"overlayadd":"overlayremove":"layeradd"===a.type?"baselayerchange":null,b&&this._map.fire(b,c))},_createRadioElement:function(a,b){var c='<input type="radio" class="leaflet-control-layers-selector" name="'+a+'"';b&&(c+=' checked="checked"'),c+="/>";var d=document.createElement("div");return d.innerHTML=c,d.firstChild},_addItem:function(a){var b,c,d,e=document.createElement("label"),f=this._map.hasLayer(a.layer);a.overlay?a.group.exclusive?(d="leaflet-exclusive-group-layer-"+a.group.id,b=this._createRadioElement(d,f)):(b=document.createElement("input"),b.type="checkbox",b.className="leaflet-control-layers-selector",b.defaultChecked=f):b=this._createRadioElement("leaflet-base-layers",f),b.layerId=L.Util.stamp(a.layer),b.groupID=a.group.id,L.DomEvent.on(b,"click",this._onInputClick,this);var g=document.createElement("span");if(g.innerHTML=" "+a.name,e.appendChild(b),e.appendChild(g),a.overlay){c=this._overlaysList;var h=this._domGroups[a.group.id];if(!h){h=document.createElement("div"),h.className="leaflet-control-layers-group",h.id="leaflet-control-layers-group-"+a.group.id;var i=document.createElement("label");if(i.className="leaflet-control-layers-group-label",""!==a.group.name&&!a.group.exclusive&&this.options.groupCheckboxes){var j=document.createElement("input");j.type="checkbox",j.className="leaflet-control-layers-group-selector",j.groupID=a.group.id,j.legend=this,L.DomEvent.on(j,"click",this._onGroupInputClick,j),i.appendChild(j)}var k=document.createElement("span");k.className="leaflet-control-layers-group-name",k.innerHTML=a.group.name,i.appendChild(k),h.appendChild(i),c.appendChild(h),this._domGroups[a.group.id]=h}c=h}else c=this._baseLayersList;return c.appendChild(e),e},_onGroupInputClick:function(){var a,b,c,d=this.legend;d._handlingClick=!0;var e=d._form.getElementsByTagName("input"),f=e.length;for(a=0;f>a;a++)b=e[a],b.groupID===this.groupID&&"leaflet-control-layers-selector"===b.className&&(b.checked=this.checked,c=d._layers[b.layerId],b.checked&&!d._map.hasLayer(c.layer)?d._map.addLayer(c.layer):!b.checked&&d._map.hasLayer(c.layer)&&d._map.removeLayer(c.layer));d._handlingClick=!1},_onInputClick:function(){var a,b,c,d=this._form.getElementsByTagName("input"),e=d.length;for(this._handlingClick=!0,a=0;e>a;a++)b=d[a],"leaflet-control-layers-selector"===b.className&&(c=this._layers[b.layerId],b.checked&&!this._map.hasLayer(c.layer)?this._map.addLayer(c.layer):!b.checked&&this._map.hasLayer(c.layer)&&this._map.removeLayer(c.layer));this._handlingClick=!1},_expand:function(){L.DomUtil.addClass(this._container,"leaflet-control-layers-expanded");var a=this._map._size.y-4*this._container.offsetTop;a<this._form.clientHeight&&(L.DomUtil.addClass(this._form,"leaflet-control-layers-scrollbar"),this._form.style.height=a+"px")},_collapse:function(){this._container.className=this._container.className.replace(" leaflet-control-layers-expanded","")},_indexOf:function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1}}),L.control.groupedLayers=function(a,b,c){return new L.Control.GroupedLayers(a,b,c)};
//# sourceMappingURL=leaflet.groupedlayercontrol.min.js.map
\ No newline at end of file
......@@ -255,25 +255,27 @@ if (!$mesh) {
echo "<script src='//bbecquet.github.io/Leaflet.PolylineOffset/leaflet.polylineoffset.js'></script>\n";
echo "<script src='//api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>\n";
echo "<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet'>\n";
echo "<script src='//ismyrnow.github.io/leaflet-groupedlayercontrol/src/leaflet.groupedlayercontrol.js'></script>\n";
echo "<link rel='stylesheet' href='//ismyrnow.github.io/leaflet-groupedlayercontrol/src/leaflet.groupedlayercontrol.css'>\n";
echo "<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' integrity='sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg' crossorigin='anonymous'>\n";
}else {
echo "<link href='css/leaflet.css' rel='stylesheet'>\n";
echo "<script src='javascripts/leaflet.js'></script>\n";
echo "<script src='javascripts/leaflet.polylineoffset.js'></script>\n";
echo "<script src='javascripts/Leaflet.fullscreen.min.js'></script>\n";
echo "<link href='css/leaflet.fullscreen.css' rel='stylesheet'>\n";
echo "<script src='javascripts/leaflet.groupedlayercontrol.min.js'></script>\n";
echo "<link href='css/leaflet.groupedlayercontrol.min.css' rel='stylesheet'>\n";
echo "<link href='javascripts/fontawesome-all.css' rel='stylesheet'>\n";
}
echo "<script src='javascripts/leaflet.groupedlayercontrol.js'></script>\n";
echo "<link rel='stylesheet' href='css/leaflet.groupedlayercontrol.css'>\n";
echo "<script src='javascripts/leaflet-hash.js'></script>\n";
echo "<script src='javascripts/L.Control.SlideMenu.js'></script>\n";
echo "<link href='css/L.Control.SlideMenu.css' rel='stylesheet'>\n";
echo "<script src='javascripts/leaflet-ruler.js'></script>\n";
echo "<link rel='stylesheet' type='text/css' href='css/leaflet-ruler.css'>\n";
echo "<link rel='stylesheet' href='css/leaflet-search.css'>\n";
echo "<script src='javascripts/leaflet-search.src.js'></script>\n";
/*
* check for the users custom.css files and use them if exists...
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment