No Map

debug/index.js

@@ -18,19 +18,29 @@ insertCss(
 
 var MapboxGeocoder = require('../');
 
-var mapDiv = document.body.appendChild(document.createElement('div'));
-mapDiv.style.position = 'absolute';
-mapDiv.style.top = 0;
-mapDiv.style.right = 0;
-mapDiv.style.left = 0;
-mapDiv.style.bottom = 0;
-
-var map = new mapboxgl.Map({
-  container: mapDiv,
-  style: 'mapbox://styles/mapbox/streets-v9',
-  center: [-79.4512, 43.6568],
-  zoom: 13
-});
+// var mapDiv = document.body.appendChild(document.createElement('div'));
+// mapDiv.style.position = 'absolute';
+// mapDiv.style.top = 0;
+// mapDiv.style.right = 0;
+// mapDiv.style.left = 0;
+// mapDiv.style.bottom = 0;
+
+var notMapDiv = document.body.appendChild(document.createElement('div'));
+notMapDiv.style.position = 'absolute';
+notMapDiv.style.top = 0;
+notMapDiv.style.right = 0;
+notMapDiv.style.left = 0;
+notMapDiv.style.bottom = 0;
+notMapDiv.style.backgroundColor = 'red';
+
+notMapDiv.classList.add("notAMap");
+
+// var map = new mapboxgl.Map({
+//   container: mapDiv,
+//   style: 'mapbox://styles/mapbox/streets-v9',
+//   center: [-79.4512, 43.6568],
+//   zoom: 13
+// });
 
 var coordinatesGeocoder = function(query) {
   var matches = query.match(/^[ ]*(-?\d+\.?\d*)[, ]+(-?\d+\.?\d*)[ ]*$/);
@@ -80,32 +90,34 @@ var geocoder = new MapboxGeocoder({
   mapboxgl: mapboxgl
 });
 
+geocoder.addTo('.notAMap')
+
 window.geocoder = geocoder;
 
 var button = document.createElement('button');
 button.textContent = 'click me';
 
-var removeBtn = document.body.appendChild(document.createElement('button'));
-removeBtn.style.position = 'absolute';
-removeBtn.style.zIndex = 10;
-removeBtn.style.top = '10px';
-removeBtn.style.left = '10px';
-removeBtn.textContent = 'Remove geocoder control';
-
-map
-  .getContainer()
-  .querySelector('.mapboxgl-ctrl-bottom-left')
-  .appendChild(button);
-map.addControl(geocoder);
-
-map.on('load', function() {
-  button.addEventListener('click', function() {
-    geocoder.query('Montreal Quebec');
-  });
-  removeBtn.addEventListener('click', function() {
-    map.removeControl(geocoder);
-  });
-});
+// var removeBtn = document.body.appendChild(document.createElement('button'));
+// removeBtn.style.position = 'absolute';
+// removeBtn.style.zIndex = 10;
+// removeBtn.style.top = '10px';
+// removeBtn.style.left = '10px';
+// removeBtn.textContent = 'Remove geocoder control';
+
+// map
+//   .getContainer()
+//   .querySelector('.mapboxgl-ctrl-bottom-left')
+//   .appendChild(button);
+// // map.addControl(geocoder);
+
+// map.on('load', function() {
+//   button.addEventListener('click', function() {
+//     geocoder.query('Montreal Quebec');
+//   });
+//   removeBtn.addEventListener('click', function() {
+//     map.removeControl(geocoder);
+//   });
+// });
 
 geocoder.on('results', function(e) {
   console.log('results: ', e.features);
@@ -116,6 +128,7 @@ geocoder.on('result', function(e) {
 });
 
 geocoder.on('clear', function(e) {
+  console.log(e)
   console.log('clear');
 });
 

lib/index.js

@@ -90,8 +90,32 @@ MapboxGeocoder.prototype = {
     }
   },
 
+  addTo(container){
+    // if the container is a map, add the control like normal
+    if (container._controlContainer){
+      //  it's a mapbox-gl map, add like normal 
+      container.addControl(this)
+    }
+    // if the container is not a map, but an html element, then add the control to that element
+    else if (typeof container == 'string' && (container.startsWith('#') || container.startsWith('.'))){
+      const parent = document.querySelectorAll(container);
+      if (parent.length == 0){
+        throw new Error(`Element ${container} not found.`)
+      }
+      parent.forEach((parentEl)=>{
+        const el = this.onAdd(); //no map
+        parentEl.appendChild(el);
+      })
+
+    }else{
+      throw new Error("Error: addTo Container must be a mapbox-gl-js map or a html element reference")
+    }
+  },
+
   onAdd: function(map) {
-    this._map = map;
+    if (map && typeof map != 'string'){
+      this._map = map;
+    }
 
     this.setLanguage();
 
@@ -182,20 +206,20 @@ MapboxGeocoder.prototype = {
     this.setRenderFunction(this.options.render);
     this._typeahead.getItemValue = this.options.getItemValue;
 
-    if (this.options.trackProximity) {
+    if (this.options.trackProximity && this._map) {
       this._updateProximity();
       this._map.on('moveend', this._updateProximity);
     }
 
     this.mapMarker = null;
     this._handleMarker = this._handleMarker.bind(this);
-
-    this._mapboxgl = this.options.mapboxgl;
-    if (!this._mapboxgl && this.options.marker) {
-      console.error("No mapboxgl detected in options. Map markers are disabled. Please set options.mapboxgl.");
-      this.options.marker = false;
+    if (this._map){
+      this._mapboxgl = this.options.mapboxgl;
+      if (!this._mapboxgl && this.options.marker) {
+        console.error("No mapboxgl detected in options. Map markers are disabled. Please set options.mapboxgl.");
+        this.options.marker = false;
+      }
     }
-
     return el;
   },
 
@@ -213,7 +237,7 @@ MapboxGeocoder.prototype = {
   onRemove: function() {
     this.container.parentNode.removeChild(this.container);
 
-    if (this.options.trackProximity) {
+    if (this.options.trackProximity && this._map) {
       this._map.off('moveend', this._updateProximity);
     }
 
@@ -279,7 +303,9 @@ MapboxGeocoder.prototype = {
         if (selected.properties && !exceptions[selected.properties.short_code] && selected.bbox) {
           var bbox = selected.bbox;
           flyOptions = extend({}, this.options.flyTo);
-          this._map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], flyOptions);
+          if (this._map){
+            this._map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], flyOptions);
+          }
         } else if (selected.properties && exceptions[selected.properties.short_code]) {
           // Certain geocoder search results return (and therefore zoom to fit)
           // an unexpectedly large bounding box: for example, both Russia and the
@@ -288,15 +314,19 @@ MapboxGeocoder.prototype = {
           // at ./exceptions.json provides "reasonable" bounding boxes as a
           // short-term solution; this may be amended as necessary.
           flyOptions = extend({}, this.options.flyTo);
-          this._map.fitBounds(exceptions[selected.properties.short_code].bbox, flyOptions);
+          if (this._map){
+            this._map.fitBounds(exceptions[selected.properties.short_code].bbox, flyOptions);
+          }
         } else {
           var defaultFlyOptions = {
             zoom: this.options.zoom
           }
           flyOptions = extend({}, defaultFlyOptions, this.options.flyTo);
           //  ensure that center is not overriden by custom options
           flyOptions.center = selected.center;
-          this._map.flyTo(flyOptions);
+          if (this._map){
+            this._map.flyTo(flyOptions);
+          }
         }
       }
       if (this.options.marker && this._mapboxgl){
@@ -513,6 +543,9 @@ MapboxGeocoder.prototype = {
   _updateProximity: function() {
     // proximity is designed for local scale, if the user is looking at the whole world,
     // it doesn't make sense to factor in the arbitrary centre of the map
+    if (!this._map){
+      return;
+    }
     if (this._map.getZoom() > 9) {
       var center = this._map.getCenter().wrap();
       this.setProximity({ longitude: center.lng, latitude: center.lat });
@@ -848,6 +881,9 @@ MapboxGeocoder.prototype = {
    */
   _handleMarker: function(selected){
     // clean up any old marker that might be present
+    if (!this._map){
+      return;
+    }
     this._removeMarker();
     var defaultMarkerOptions = {
       color: '#4668F2'