From: Sarah Hoffmann <lonvia@denofr.de>
Date: Sat, 21 Oct 2017 11:53:24 +0000 (+0200)
Subject: Merge pull request #821 from mtmail/ui-scrollwheel-minimap
X-Git-Tag: v3.1.0~41
X-Git-Url: https://git.openstreetmap.org/nominatim.git/commitdiff_plain/cc785ccad06a5ae0a8a4f81de35910d0826ff185?hp=f17be2403f98e7ec1eb83585ec625dfede49046d

Merge pull request #821 from mtmail/ui-scrollwheel-minimap

UI: scrollwheel, minimap
---

diff --git a/lib/template/address-html.php b/lib/template/address-html.php
index 63072911..db735477 100644
--- a/lib/template/address-html.php
+++ b/lib/template/address-html.php
@@ -13,8 +13,10 @@
     <form class="form-inline" role="search" accept-charset="UTF-8" action="<?php echo CONST_Website_BaseURL; ?>reverse.php">
         <div class="form-group">
             <input name="format" type="hidden" value="html">
+            lat
             <input name="lat" type="text" class="form-control input-sm" placeholder="latitude" value="<?php echo $fLat; ?>" >
-            <span id="switch-coords">&lt;&gt;</span>
+            <span id="switch-coords" title="switch lat and lon">&lt;&gt;</span>
+            lon
             <input name="lon" type="text" class="form-control input-sm" placeholder="longitude" value="<?php echo $fLon; ?>" >
             max zoom
 
diff --git a/lib/template/includes/html-footer.php b/lib/template/includes/html-footer.php
index b5ebb137..1746a532 100644
--- a/lib/template/includes/html-footer.php
+++ b/lib/template/includes/html-footer.php
@@ -10,4 +10,5 @@
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/leaflet.min.js"></script>
+<script src="js/Control.Minimap.min.js"></script>
 <script src="js/nominatim-ui.js"></script>
diff --git a/lib/template/includes/html-header.php b/lib/template/includes/html-header.php
index 251e9037..942af095 100644
--- a/lib/template/includes/html-header.php
+++ b/lib/template/includes/html-header.php
@@ -8,5 +8,6 @@
     <base href="<?php echo CONST_Website_BaseURL;?>" />
     <link href="nominatim.xml" rel="search" title="Nominatim Search" type="application/opensearchdescription+xml" />
     <link href="css/leaflet.css" rel="stylesheet" />
+    <link href="css/Control.Minimap.min.css" rel="stylesheet" />
     <link href="css/bootstrap-theme.min.css" rel="stylesheet" />
     <link href="css/bootstrap.min.css" rel="stylesheet" />
diff --git a/lib/template/includes/html-top-navigation.php b/lib/template/includes/html-top-navigation.php
index 2f539cdb..41b638ab 100644
--- a/lib/template/includes/html-top-navigation.php
+++ b/lib/template/includes/html-top-navigation.php
@@ -21,8 +21,8 @@
                     About &amp; Help <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right">
-                    <li><a href="http://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a></li>
-                    <li><a href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ" target="_blank">FAQ</a></li>
+                    <li><a href="https://wiki.openstreetmap.org/wiki/Nominatim" target="_blank">Documentation</a></li>
+                    <li><a href="https://wiki.openstreetmap.org/wiki/Nominatim/FAQ" target="_blank">FAQ</a></li>
                     <li role="separator" class="divider"></li>
                     <li><a href="#" class="" data-toggle="modal" data-target="#report-modal">Report problem with results</a></li>
                 </ul>
diff --git a/lib/template/includes/introduction.php b/lib/template/includes/introduction.php
index 8ff057de..74135818 100644
--- a/lib/template/includes/introduction.php
+++ b/lib/template/includes/introduction.php
@@ -1,9 +1,9 @@
 <h2>Welcome to Nominatim</h2>
 
-<p>Nominatim is a search engine for <a href="http://www.openstreetmap.org">OpenStreetMap</a>
+<p>Nominatim is a search engine for <a href="https://www.openstreetmap.org">OpenStreetMap</a>
 data. This is the debugging interface. You may search for a name or address(forward search) or
 look up data by its geographic coordinate(reverse search). Each result comes with a
 link to a details page where you can inspect what data about the object is saved in 
 the database and investigate how the address of the object has been computed.</p>
 
-For more information visit the <a href="http://wiki.openstreetmap.org/wiki/Nominatim">Nominatim wiki page</a>.
+For more information visit the <a href="https://wiki.openstreetmap.org/wiki/Nominatim">Nominatim wiki page</a>.
diff --git a/lib/template/includes/report-errors.php b/lib/template/includes/report-errors.php
index 5d0ac904..31877d4e 100644
--- a/lib/template/includes/report-errors.php
+++ b/lib/template/includes/report-errors.php
@@ -1,7 +1,7 @@
 <p>
-    Before reporting problems please read the <a target="_blank" href="http://wiki.openstreetmap.org/wiki/Nominatim">user documentation</a>
+    Before reporting problems please read the <a target="_blank" href="https://wiki.openstreetmap.org/wiki/Nominatim">user documentation</a>
     and
-    <a target="_blank" href="http://wiki.openstreetmap.org/wiki/Nominatim/FAQ">FAQ</a>.
+    <a target="_blank" href="https://wiki.openstreetmap.org/wiki/Nominatim/FAQ">FAQ</a>.
 
     If your problem relates to the address of a particular search result please use the 'details' link 
     to check how the address was generated before reporting a problem.
diff --git a/settings/defaults.php b/settings/defaults.php
index 9df95e03..9c0859ba 100644
--- a/settings/defaults.php
+++ b/settings/defaults.php
@@ -94,7 +94,7 @@ if (isset($_GET['debug']) && $_GET['debug']) @define('CONST_Debug', true);
 @define('CONST_Default_Lat', 20.0);
 @define('CONST_Default_Lon', 0.0);
 @define('CONST_Default_Zoom', 2);
-@define('CONST_Map_Tile_URL', 'http://{s}.tile.osm.org/{z}/{x}/{y}.png');
+@define('CONST_Map_Tile_URL', 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
 @define('CONST_Map_Tile_Attribution', ''); // Set if tile source isn't osm.org
 
 @define('CONST_Search_AreaPolygons', true);
diff --git a/website/css/Control.Minimap.min.css b/website/css/Control.Minimap.min.css
new file mode 100644
index 00000000..d83baa24
--- /dev/null
+++ b/website/css/Control.Minimap.min.css
@@ -0,0 +1 @@
+.leaflet-control-minimap{border:rgba(255,255,255,1) solid;box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:3px;background:#f8f8f9;transition:all .6s}.leaflet-control-minimap a{background-color:rgba(255,255,255,1);background-repeat:no-repeat;z-index:99999;transition:all .6s}.leaflet-control-minimap a.minimized-bottomright{-webkit-transform:rotate(180deg);transform:rotate(180deg);border-radius:0}.leaflet-control-minimap a.minimized-topleft{-webkit-transform:rotate(0deg);transform:rotate(0deg);border-radius:0}.leaflet-control-minimap a.minimized-bottomleft{-webkit-transform:rotate(270deg);transform:rotate(270deg);border-radius:0}.leaflet-control-minimap a.minimized-topright{-webkit-transform:rotate(90deg);transform:rotate(90deg);border-radius:0}.leaflet-control-minimap-toggle-display{background-image:url(images/toggle.svg);background-size:cover;position:absolute;border-radius:3px 0 0}.leaflet-oldie .leaflet-control-minimap-toggle-display{background-image:url(images/toggle.png)}.leaflet-control-minimap-toggle-display-bottomright{bottom:0;right:0}.leaflet-control-minimap-toggle-display-topleft{top:0;left:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.leaflet-control-minimap-toggle-display-bottomleft{bottom:0;left:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.leaflet-control-minimap-toggle-display-topright{top:0;right:0;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.leaflet-oldie .leaflet-control-minimap{border:1px solid #999}.leaflet-oldie .leaflet-control-minimap a{background-color:#fff}.leaflet-oldie .leaflet-control-minimap a.minimized{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)}
diff --git a/website/css/images/toggle.png b/website/css/images/toggle.png
new file mode 100644
index 00000000..7a55db43
Binary files /dev/null and b/website/css/images/toggle.png differ
diff --git a/website/css/images/toggle.svg b/website/css/images/toggle.svg
new file mode 100644
index 00000000..b2932709
--- /dev/null
+++ b/website/css/images/toggle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18"><defs><marker orient="auto" overflow="visible"><path d="M-2.6-2.828L-5.428 0-2.6 2.828.228 0-2.6-2.828z" fill-rule="evenodd" stroke="#000" stroke-width=".4pt"/></marker><marker orient="auto" overflow="visible"><g fill="none" stroke="#000" stroke-width=".8" stroke-linecap="round"><path d="M4.566 4.75L-.652 0"/><path d="M1.544 4.75L-3.674 0"/><path d="M-1.566 4.75L-6.784 0"/><path d="M4.566-5.013L-.652-.263"/><path d="M1.544-5.013l-5.218 4.75"/><path d="M-1.566-5.013l-5.218 4.75"/></g></marker><marker orient="auto" overflow="visible"><path d="M-5.6-5.657L-11.257 0-5.6 5.657.057 0-5.6-5.657z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M4.616 0l-6.92 4v-8l6.92 4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M-10.69-4.437L1.328-.017l-12.018 4.42c1.92-2.61 1.91-6.18 0-8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker><marker orient="auto" overflow="visible"><path d="M-4.616 0l6.92-4v8l-6.92-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10 0l4-4L0 0l14 4-4-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10.69 4.437L-1.328.017l12.018-4.42c-1.92 2.61-1.91 6.18 0 8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker></defs><path d="M13.18 13.146v-5.81l-5.81 5.81h5.81z" stroke="#000" stroke-width="1.643"/><path d="M12.762 12.727l-6.51-6.51" fill="none" stroke="#000" stroke-width="2.482" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/website/css/search.css b/website/css/search.css
index 9c061783..9215a1d7 100644
--- a/website/css/search.css
+++ b/website/css/search.css
@@ -8,9 +8,9 @@ form #q {
   min-width: 500px;
 }
 @media (max-width: 850px) {
-form #q {
-  min-width: 400px;
-}
+  form #q {
+    min-width: 400px;
+  }
 }
 form .checkbox-inline {
   margin-left: 10px;  
@@ -43,7 +43,7 @@ form label {
 
 #map-wrapper {
   position: relative;
-  min-height: 700px;
+  min-height: 500px;
   width: 75%;
   padding-right: 20px;
   display: inline-block;
@@ -51,8 +51,8 @@ form label {
 }
 
 #map {
-  height: 100%;
-  min-height: 700px;
+  height: 90%;
+  min-height: 500px;
   background:#eee;
 }
 
diff --git a/website/js/Control.Minimap.min.js b/website/js/Control.Minimap.min.js
new file mode 100644
index 00000000..4b3cbca9
--- /dev/null
+++ b/website/js/Control.Minimap.min.js
@@ -0,0 +1 @@
+(function(factory,window){if(typeof define==="function"&&define.amd){define(["leaflet"],factory)}else if(typeof exports==="object"){module.exports=factory(require("leaflet"))}if(typeof window!=="undefined"&&window.L){window.L.Control.MiniMap=factory(L);window.L.control.minimap=function(layer,options){return new window.L.Control.MiniMap(layer,options)}}})(function(L){var MiniMap=L.Control.extend({includes:L.Mixin.Events,options:{position:"bottomright",toggleDisplay:false,zoomLevelOffset:-5,zoomLevelFixed:false,centerFixed:false,zoomAnimation:false,autoToggleDisplay:false,minimized:false,width:150,height:150,collapsedWidth:19,collapsedHeight:19,aimingRectOptions:{color:"#ff7800",weight:1,clickable:false},shadowRectOptions:{color:"#000000",weight:1,clickable:false,opacity:0,fillOpacity:0},strings:{hideText:"Hide MiniMap",showText:"Show MiniMap"},mapOptions:{}},initialize:function(layer,options){L.Util.setOptions(this,options);this.options.aimingRectOptions.clickable=false;this.options.shadowRectOptions.clickable=false;this._layer=layer},onAdd:function(map){this._mainMap=map;this._container=L.DomUtil.create("div","leaflet-control-minimap");this._container.style.width=this.options.width+"px";this._container.style.height=this.options.height+"px";L.DomEvent.disableClickPropagation(this._container);L.DomEvent.on(this._container,"mousewheel",L.DomEvent.stopPropagation);var mapOptions={attributionControl:false,dragging:!this.options.centerFixed,zoomControl:false,zoomAnimation:this.options.zoomAnimation,autoToggleDisplay:this.options.autoToggleDisplay,touchZoom:this.options.centerFixed?"center":!this._isZoomLevelFixed(),scrollWheelZoom:this.options.centerFixed?"center":!this._isZoomLevelFixed(),doubleClickZoom:this.options.centerFixed?"center":!this._isZoomLevelFixed(),boxZoom:!this._isZoomLevelFixed(),crs:map.options.crs};mapOptions=L.Util.extend(this.options.mapOptions,mapOptions);this._miniMap=new L.Map(this._container,mapOptions);this._miniMap.addLayer(this._layer);this._mainMapMoving=false;this._miniMapMoving=false;this._userToggledDisplay=false;this._minimized=false;if(this.options.toggleDisplay){this._addToggleButton()}this._miniMap.whenReady(L.Util.bind(function(){this._aimingRect=L.rectangle(this._mainMap.getBounds(),this.options.aimingRectOptions).addTo(this._miniMap);this._shadowRect=L.rectangle(this._mainMap.getBounds(),this.options.shadowRectOptions).addTo(this._miniMap);this._mainMap.on("moveend",this._onMainMapMoved,this);this._mainMap.on("move",this._onMainMapMoving,this);this._miniMap.on("movestart",this._onMiniMapMoveStarted,this);this._miniMap.on("move",this._onMiniMapMoving,this);this._miniMap.on("moveend",this._onMiniMapMoved,this)},this));return this._container},addTo:function(map){L.Control.prototype.addTo.call(this,map);var center=this.options.centerFixed||this._mainMap.getCenter();this._miniMap.setView(center,this._decideZoom(true));this._setDisplay(this.options.minimized);return this},onRemove:function(map){this._mainMap.off("moveend",this._onMainMapMoved,this);this._mainMap.off("move",this._onMainMapMoving,this);this._miniMap.off("moveend",this._onMiniMapMoved,this);this._miniMap.removeLayer(this._layer)},changeLayer:function(layer){this._miniMap.removeLayer(this._layer);this._layer=layer;this._miniMap.addLayer(this._layer)},_addToggleButton:function(){this._toggleDisplayButton=this.options.toggleDisplay?this._createButton("",this._toggleButtonInitialTitleText(),"leaflet-control-minimap-toggle-display leaflet-control-minimap-toggle-display-"+this.options.position,this._container,this._toggleDisplayButtonClicked,this):undefined;this._toggleDisplayButton.style.width=this.options.collapsedWidth+"px";this._toggleDisplayButton.style.height=this.options.collapsedHeight+"px"},_toggleButtonInitialTitleText:function(){if(this.options.minimized){return this.options.strings.showText}else{return this.options.strings.hideText}},_createButton:function(html,title,className,container,fn,context){var link=L.DomUtil.create("a",className,container);link.innerHTML=html;link.href="#";link.title=title;var stop=L.DomEvent.stopPropagation;L.DomEvent.on(link,"click",stop).on(link,"mousedown",stop).on(link,"dblclick",stop).on(link,"click",L.DomEvent.preventDefault).on(link,"click",fn,context);return link},_toggleDisplayButtonClicked:function(){this._userToggledDisplay=true;if(!this._minimized){this._minimize()}else{this._restore()}},_setDisplay:function(minimize){if(minimize!==this._minimized){if(!this._minimized){this._minimize()}else{this._restore()}}},_minimize:function(){if(this.options.toggleDisplay){this._container.style.width=this.options.collapsedWidth+"px";this._container.style.height=this.options.collapsedHeight+"px";this._toggleDisplayButton.className+=" minimized-"+this.options.position;this._toggleDisplayButton.title=this.options.strings.showText}else{this._container.style.display="none"}this._minimized=true;this._onToggle()},_restore:function(){if(this.options.toggleDisplay){this._container.style.width=this.options.width+"px";this._container.style.height=this.options.height+"px";this._toggleDisplayButton.className=this._toggleDisplayButton.className.replace("minimized-"+this.options.position,"");this._toggleDisplayButton.title=this.options.strings.hideText}else{this._container.style.display="block"}this._minimized=false;this._onToggle()},_onMainMapMoved:function(e){if(!this._miniMapMoving){var center=this.options.centerFixed||this._mainMap.getCenter();this._mainMapMoving=true;this._miniMap.setView(center,this._decideZoom(true));this._setDisplay(this._decideMinimized())}else{this._miniMapMoving=false}this._aimingRect.setBounds(this._mainMap.getBounds())},_onMainMapMoving:function(e){this._aimingRect.setBounds(this._mainMap.getBounds())},_onMiniMapMoveStarted:function(e){if(!this.options.centerFixed){var lastAimingRect=this._aimingRect.getBounds();var sw=this._miniMap.latLngToContainerPoint(lastAimingRect.getSouthWest());var ne=this._miniMap.latLngToContainerPoint(lastAimingRect.getNorthEast());this._lastAimingRectPosition={sw:sw,ne:ne}}},_onMiniMapMoving:function(e){if(!this.options.centerFixed){if(!this._mainMapMoving&&this._lastAimingRectPosition){this._shadowRect.setBounds(new L.LatLngBounds(this._miniMap.containerPointToLatLng(this._lastAimingRectPosition.sw),this._miniMap.containerPointToLatLng(this._lastAimingRectPosition.ne)));this._shadowRect.setStyle({opacity:1,fillOpacity:.3})}}},_onMiniMapMoved:function(e){if(!this._mainMapMoving){this._miniMapMoving=true;this._mainMap.setView(this._miniMap.getCenter(),this._decideZoom(false));this._shadowRect.setStyle({opacity:0,fillOpacity:0})}else{this._mainMapMoving=false}},_isZoomLevelFixed:function(){var zoomLevelFixed=this.options.zoomLevelFixed;return this._isDefined(zoomLevelFixed)&&this._isInteger(zoomLevelFixed)},_decideZoom:function(fromMaintoMini){if(!this._isZoomLevelFixed()){if(fromMaintoMini){return this._mainMap.getZoom()+this.options.zoomLevelOffset}else{var currentDiff=this._miniMap.getZoom()-this._mainMap.getZoom();var proposedZoom=this._miniMap.getZoom()-this.options.zoomLevelOffset;var toRet;if(currentDiff>this.options.zoomLevelOffset&&this._mainMap.getZoom()<this._miniMap.getMinZoom()-this.options.zoomLevelOffset){if(this._miniMap.getZoom()>this._lastMiniMapZoom){toRet=this._mainMap.getZoom()+1;this._miniMap.setZoom(this._miniMap.getZoom()-1)}else{toRet=this._mainMap.getZoom()}}else{toRet=proposedZoom}this._lastMiniMapZoom=this._miniMap.getZoom();return toRet}}else{if(fromMaintoMini){return this.options.zoomLevelFixed}else{return this._mainMap.getZoom()}}},_decideMinimized:function(){if(this._userToggledDisplay){return this._minimized}if(this.options.autoToggleDisplay){if(this._mainMap.getBounds().contains(this._miniMap.getBounds())){return true}return false}return this._minimized},_isInteger:function(value){return typeof value==="number"},_isDefined:function(value){return typeof value!=="undefined"},_onToggle:function(){L.Util.requestAnimFrame(function(){L.DomEvent.on(this._container,"transitionend",this._fireToggleEvents,this);if(!L.Browser.any3d){L.Util.requestAnimFrame(this._fireToggleEvents,this)}},this)},_fireToggleEvents:function(){L.DomEvent.off(this._container,"transitionend",this._fireToggleEvents,this);var data={minimized:this._minimized};this.fire(this._minimized?"minimize":"restore",data);this.fire("toggle",data)}});L.Map.mergeOptions({miniMapControl:false});L.Map.addInitHook(function(){if(this.options.miniMapControl){this.miniMapControl=(new MiniMap).addTo(this)}});return MiniMap},window);
diff --git a/website/js/nominatim-ui.js b/website/js/nominatim-ui.js
index 25233643..0560b45f 100644
--- a/website/js/nominatim-ui.js
+++ b/website/js/nominatim-ui.js
@@ -27,7 +27,7 @@ jQuery(document).on('ready', function(){
 
     map = new L.map('map', {
                 attributionControl: (nominatim_map_init.tile_attribution && nominatim_map_init.tile_attribution.length),
-                scrollWheelZoom:    !L.Browser.touch,
+                scrollWheelZoom:    true, // !L.Browser.touch,
                 touchZoom:          false
             });
 
@@ -39,6 +39,9 @@ jQuery(document).on('ready', function(){
 
     map.setView([nominatim_map_init.lat, nominatim_map_init.lon], nominatim_map_init.zoom);
 
+    var osm2 = new L.TileLayer(nominatim_map_init.tile_url, {minZoom: 0, maxZoom: 13, attribution: (nominatim_map_init.tile_attribution || null )});
+    var miniMap = new L.Control.MiniMap(osm2, {toggleDisplay: true}).addTo(map);
+
     if ( is_reverse_search ){
         // We don't need a marker, but an L.circle instance changes radius once you zoom in/out
         var cm = L.circleMarker([nominatim_map_init.lat,nominatim_map_init.lon], { radius: 5, weight: 2, fillColor: '#ff7800', color: 'red', opacity: 0.75, clickable: false});
@@ -90,9 +93,9 @@ jQuery(document).on('ready', function(){
         $('#map-position-inner').html([html_center,html_zoom,html_viewbox,html_click,html_mouse].join('<br/>'));
 
         var reverse_params = {
-            lat: map.getCenter().lat.toFixed(5),
-            lon: map.getCenter().lng.toFixed(5),
-            zoom: map.getZoom(),
+            // lat: map.getCenter().lat.toFixed(5),
+            // lon: map.getCenter().lng.toFixed(5),
+            // zoom: 2,
             format: 'html'
         }
         $('#switch-to-reverse').attr('href', 'reverse.php?' + $.param(reverse_params));
@@ -258,7 +261,7 @@ jQuery(document).on('ready', function(){
                     // center: [nominatim_map_init.lat, nominatim_map_init.lon],
                     // zoom:   nominatim_map_init.zoom,
                     attributionControl: (nominatim_map_init.tile_attribution && nominatim_map_init.tile_attribution.length),
-                    scrollWheelZoom:    false,
+                    scrollWheelZoom:    true, // !L.Browser.touch,
                     touchZoom:          false,
                 });
 
@@ -268,6 +271,8 @@ jQuery(document).on('ready', function(){
             attribution: (nominatim_map_init.tile_attribution || null ) //'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
 
+        var osm2 = new L.TileLayer(nominatim_map_init.tile_url, {minZoom: 0, maxZoom: 13, attribution: (nominatim_map_init.tile_attribution || null )});
+        var miniMap = new L.Control.MiniMap(osm2, {toggleDisplay: true}).addTo(map);
 
         var layerGroup = new L.layerGroup().addTo(map);