Add powered by Mapbox

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": false
+  }
+}

CHANGELOG.md

@@ -5,6 +5,17 @@
 - Bumps `nanoid` to v3.1.31 to resolve security vulnerability warning.
 - Adds `babelify` to build process to ensure mapbox-gl-geocoder remains ES5-compatible.
 
+### Footer
+
+- 🚨 Added Mapbox attribution footer. As we synthesize data sources in the future, based on data results there may be more lines.
+
+The footer pretty small and unobtrusive, but if this is an issue for your product please reach out to your Technical Account Management (TAM) representative.
+
+### Other
+
+- 🚨 Upgraded system font stack to include Apple fonts. This is used for text
+if Open Sans is not available.
+
 ## 4.7.4
 
 ### Features / Improvements 🚀

lib/index.js

@@ -18,6 +18,17 @@ const GEOCODE_REQUEST_TYPE = {
   REVERSE: 2,
 };
 
+/**
+ * Don't include this as part of the options object when creating a new MapboxGeocoder instance.
+ */
+function getFooterNode() {
+  var div = document.createElement('div');
+  div.className = 'mapboxgl-ctrl-geocoder--powered-by';
+  div.innerHTML = '<a href="https://mapbox.com">Powered by Mapbox</a>';
+
+  return div;
+}
+
 /**
  * A geocoder component using the [Mapbox Geocoding API](https://docs.mapbox.com/api/search/#geocoding)
  * @class MapboxGeocoder
@@ -243,14 +254,31 @@ MapboxGeocoder.prototype = {
     el.appendChild(this._inputEl);
     el.appendChild(actions);
 
-    this._typeahead = new Typeahead(this._inputEl, [], {
+    var typeahead = this._typeahead = new Typeahead(this._inputEl, [], {
       filter: false,
       minLength: this.options.minLength,
       limit: this.options.limit
     });
 
     this.setRenderFunction(this.options.render);
-    this._typeahead.getItemValue = this.options.getItemValue;
+    typeahead.getItemValue = this.options.getItemValue;
+
+    // Add support for footer.
+    var parentDraw = typeahead.list.draw;
+    typeahead.list.draw = function() {
+      parentDraw.call(this);
+      var footerNode = getFooterNode();
+
+      footerNode.addEventListener('mousedown', function() {
+        this.selectingListItem = true;
+      }.bind(this));
+
+      footerNode.addEventListener('mouseup', function() {
+        this.selectingListItem = false;
+      }.bind(this));
+
+      this.element.appendChild(footerNode);
+    };
 
     this.mapMarker = null;
     this._handleMarker = this._handleMarker.bind(this);

lib/mapbox-gl-geocoder.css

@@ -9,7 +9,7 @@
 .mapboxgl-ctrl-geocoder {
   font-size: 18px;
   line-height: 24px;
-  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, Helvetica, sans-serif;
   position: relative;
   background-color: #fff;
   width: 100%;
@@ -162,6 +162,22 @@
   animation: rotate 0.8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
 }
 
+.mapboxgl-ctrl-geocoder--powered-by {
+  display: block;
+  float: left;
+  padding: 6px 12px;
+  padding-bottom: 9px;
+  font-size: 13px;
+}
+
+.mapboxgl-ctrl-geocoder--powered-by a {
+  color: #909090;
+}
+
+.mapboxgl-ctrl-geocoder--powered-by a:not(:hover) {
+  text-decoration: none;  
+}
+
 /* Animation */
 @-webkit-keyframes rotate {
   from {
@@ -239,4 +255,7 @@
     text-align: center
   }
 
+  .mapboxgl-ctrl-geocoder--powered-by {
+    font-size: 11px !important;
+  }
 }