new debug page for working without a map

Author: Scott Farley

debug/index.js

@@ -18,12 +18,12 @@ 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 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';
@@ -35,12 +35,12 @@ 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 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*)[ ]*$/);
@@ -97,27 +97,27 @@ 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);

debug/nomap.js

@@ -0,0 +1,60 @@
+'use strict';
+var mapboxgl = require('mapbox-gl');
+var insertCss = require('insert-css');
+var fs = require('fs');
+
+mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
+
+
+var meta = document.createElement('meta');
+meta.name = 'viewport';
+meta.content = 'initial-scale=1,maximum-scale=1,user-scalable=no';
+document.getElementsByTagName('head')[0].appendChild(meta);
+
+insertCss(fs.readFileSync('./lib/mapbox-gl-geocoder.css', 'utf8'));
+insertCss(
+  fs.readFileSync('./node_modules/mapbox-gl/dist/mapbox-gl.css', 'utf8')
+);
+
+var MapboxGeocoder = require('../');
+
+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 = 'darkcyan';
+
+notMapDiv.classList.add("notAMap");
+
+var geocoder = new MapboxGeocoder({
+  accessToken: mapboxgl.accessToken,
+  trackProximity: true
+});
+
+geocoder.addTo('.notAMap')
+
+window.geocoder = geocoder;
+
+
+geocoder.on('results', function(e) {
+  console.log('results: ', e.features);
+});
+
+geocoder.on('result', function(e) {
+  console.log('result: ', e.result);
+});
+
+geocoder.on('clear', function(e) {
+  console.log(e)
+  console.log('clear');
+});
+
+geocoder.on('loading', function(e) {
+  console.log('loading:', e.query);
+});
+
+geocoder.on('error', function(e) {
+  console.log('Error is', e.error);
+});