Esri · jwasilgeo · Oct 28, 2019 · Oct 15, 2019 · Oct 15, 2019 · Oct 23, 2019
diff --git a/.gitignore b/.gitignore
@@ -20,6 +20,7 @@ coverage
 # Debugging Files
 debug/*
 !debug/sample.html
+!debug/sample-multiple.html
 
 # Built Files and watch cache
 dist/

diff --git a/debug/sample-multiple.html b/debug/sample-multiple.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Esri Leaflet Geocoder</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
+
+  <!-- Load Leaflet from their CDN -->
+  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+  <script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
+
+  <script src="../node_modules/esri-leaflet/dist/esri-leaflet-debug.js"></script>
+
+  <link rel="stylesheet" href="../dist/esri-leaflet-geocoder.css" />
+  <script src="../dist/esri-leaflet-geocoder-debug.js"></script>
+
+  <!-- Make the map fill the entire page -->
+  <style>
+    #map {
+      position: fixed;
+      top: 100px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 375px;
+      width: 80%;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="map"></div>
+
+  <script>
+    var map = L.map("map").setView([37.74, -121.62], 9);
+    // var tiles = L.esri.basemapLayer('Topographic').addTo(map);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    var getProviders = function () {
+      return [
+        L.esri.Geocoding.arcgisOnlineProvider({
+          // countries: ['USA', 'GUM', 'VIR', 'PRI'],
+          // categories: ['Address', 'Postal', 'Populated Place', ],
+          // maxResults: 3
+        }),
+        L.esri.Geocoding.mapServiceProvider({
+          label: "States and Counties",
+          url:
+            "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
+          layers: [2, 3],
+          searchFields: ["NAME", "STATE_NAME"]
+        })
+      ];
+    }
+
+    // this is the geocoder control and behavior based on the original testing page "sample.html"
+    var searchControl = L.esri.Geocoding.geosearch({
+      providers: getProviders()
+    }).addTo(map);
+
+    var results = L.layerGroup().addTo(map);
+
+    searchControl.on("results", function (data) {
+      results.clearLayers();
+      for (var i = data.results.length - 1; i >= 0; i--) {
+        results.addLayer(L.marker(data.results[i].latlng));
+      }
+    });
+
+    // add additional geocoder controls throughout the map control corners for testing
+    L.esri.Geocoding.geosearch({
+      position: "topleft",
+      providers: getProviders()
+    }).addTo(map);
+
+    L.esri.Geocoding.geosearch({
+      position: "topright",
+      providers: getProviders()
+    }).addTo(map);
+
+    L.esri.Geocoding.geosearch({
+      position: "topright",
+      providers: getProviders()
+    }).addTo(map);
+
+    L.esri.Geocoding.geosearch({
+      position: "bottomleft",
+      providers: getProviders()
+    }).addTo(map);
+
+    L.esri.Geocoding.geosearch({
+      position: "bottomleft",
+      providers: getProviders()
+    }).addTo(map);
+
+    L.esri.Geocoding.geosearch({
+      position: "bottomright",
+      providers: getProviders()
+    }).addTo(map);
+
+    L.esri.Geocoding.geosearch({
+      position: "bottomright",
+      providers: getProviders()
+    }).addTo(map);
+  </script>
+</body>
+
+</html>
diff --git a/src/Controls/Geosearch.js b/src/Controls/Geosearch.js
@@ -53,12 +53,6 @@ export var Geosearch = Control.extend({
     if (suggestions.length > 0) {
       this._suggestions.style.display = 'block';
     }
-    // set the maxHeight of the suggestions box to
-    // map height
-    // - suggestions offset (distance from top of suggestions to top of control)
-    // - control offset (distance from top of control to top of map)
-    // - 10 (extra padding)
-    this._suggestions.style.maxHeight = (this._map.getSize().y - this._suggestions.offsetTop - this._wrapper.offsetTop - 10) + 'px';
 
     var list;
     var header;
@@ -94,6 +88,34 @@ export var Geosearch = Control.extend({
       }
       suggestionTextArray.push(suggestion.text);
     }
+
+    // when the geocoder position is either "topleft" or "topright":
+    // set the maxHeight of the suggestions box to:
+    //  map height
+    //  - suggestions offset (distance from top of suggestions to top of control)
+    //  - control offset (distance from top of control to top of map)
+    //  - 10 (extra padding)
+    if (this.getPosition().indexOf('top') > -1) {
+      this._suggestions.style.maxHeight = (this._map.getSize().y - this._suggestions.offsetTop - this._wrapper.offsetTop - 10) + 'px';
+    }
+
+    // when the geocoder position is either "bottomleft" or "bottomright":
+    // 1. set the maxHeight of the suggestions box to:
+    //  map height
+    //  - corner control container offsetHeight (height of container of bottom corner)
+    //  - control offsetHeight (height of geocoder control wrapper, the main expandable button)
+    // 2. to move it up, set the top of the suggestions box to:
+    //  negative offsetHeight of suggestions box (its own negative height now that it has children elements
+    //  - control offsetHeight (height of geocoder control wrapper, the main expandable button)
+    //  + 20 (extra spacing)
+    if (this.getPosition().indexOf('bottom') > -1) {
+      this._setSuggestionsBottomPosition();
+    }
+  },
+
+  _setSuggestionsBottomPosition: function () {
+    this._suggestions.style.maxHeight = (this._map.getSize().y - this._map._controlCorners[this.getPosition()].offsetHeight - this._wrapper.offsetHeight) + 'px';
+    this._suggestions.style.top = (-this._suggestions.offsetHeight - this._wrapper.offsetHeight + 20) + 'px';
   },
 
   _boundsFromResults: function (results) {
@@ -133,6 +155,7 @@ export var Geosearch = Control.extend({
 
     if (this.options.collapseAfterResult) {
       this._input.value = '';
+      this._lastValue = '';
       this._input.placeholder = '';
       DomUtil.removeClass(this._wrapper, 'geocoder-control-expanded');
     }
@@ -159,6 +182,13 @@ export var Geosearch = Control.extend({
     if (!activeRequests) {
       DomUtil.removeClass(this._input, 'geocoder-control-loading');
 
+      // when the geocoder position is either "bottomleft" or "bottomright",
+      // it is necessary in some cases to recalculate the maxHeight and top values of the this._suggestions element,
+      // even though this is also being done after each provider returns their own suggestions
+      if (this.getPosition().indexOf('bottom') > -1) {
+        this._setSuggestionsBottomPosition();
+      }
+
       // also check if there were 0 total suggest results to clear the parent suggestions element
       // otherwise its display value may be "block" instead of "none"
       if (!suggestionsLength) {
@@ -199,6 +229,13 @@ export var Geosearch = Control.extend({
   geocodeSuggestion: function (e) {
     var suggestionItem = e.target || e.srcElement;
 
+    if (
+      suggestionItem.classList.contains('geocoder-control-suggestions') ||
+      suggestionItem.classList.contains('geocoder-control-header')
+    ) {
+      return;
+    }
+
     // make sure and point at the actual 'geocoder-control-suggestion'
     if (suggestionItem.classList.length < 1) {
       suggestionItem = suggestionItem.parentNode;
@@ -248,6 +285,8 @@ export var Geosearch = Control.extend({
     DomEvent.addListener(this._suggestions, 'mousedown', this.geocodeSuggestion, this);
 
     DomEvent.addListener(this._input, 'blur', function (e) {
+      // TODO: this is too greedy and should not "clear"
+      // when trying to use the scrollbar or clicking on a non-suggestion item (such as a provider header)
       this.clear();
     }, this);
 

diff --git a/src/esri-leaflet-geocoder.css b/src/esri-leaflet-geocoder.css
@@ -69,6 +69,11 @@ only screen and (min-device-pixel-ratio: 2) {
     display: none;
 }
 
+/* 
+TODO: find out why this is underneath other map corner controls
+(try out a "topright" position and then suggestions will be under the attribution
+or another geocoder in the "bottomright")
+*/
 .geocoder-control-suggestions {
   width: 100%;
   position: absolute;
@@ -78,6 +83,7 @@ only screen and (min-device-pixel-ratio: 2) {
   overflow: auto;
   display: none;
 }
+
 .geocoder-control-list + .geocoder-control-header {
   border-top: 1px solid #d5d5d5;
 }
@@ -133,6 +139,13 @@ only screen and (min-device-pixel-ratio: 2) {
   right: 0;
 }
 
+/* styles when positioned on bottom */
+
+.leaflet-bottom .geocoder-control-suggestions {
+  margin-top: 0;
+  top: 0;
+}
+
 /* styles when on a touch device */
 
 .leaflet-touch .geocoder-control {