initial commit

.babelrc

@@ -0,0 +1,5 @@
+{
+  "stage": 0,
+  "loose": "all",
+  "plugins": ["object-assign"]
+}

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "globals": {
+    "mapboxgl": true,
+    "fs": true
+  },
+  "rules": {
+    "strict": [0],
+    "curly": [0],
+    "no-new": [0],
+    "no-alert": [0],
+    "no-extra-bind": [0],
+    "no-redeclare": [1],
+    "new-cap": [0],
+    "quotes": [2, "single"],
+    "eol-last": [0],
+    "no-mixed-requires": [0],
+    "no-path-concat": [0],
+    "camelcase": [0],
+    "consistent-return": [0],
+    "no-underscore-dangle": [0],
+    "comma-spacing": [0],
+    "key-spacing": [0],
+    "no-use-before-define": [0]
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+env.test.sh
+node_modules/

CONTRIBUTING.md

@@ -0,0 +1,27 @@
+## Developing
+
+    npm install & npm start & open http://localhost:9966/example/
+
+You'll need a [Mapbox access token](https://www.mapbox.com/help/create-api-access-token/) stored in localstorage. Set it via
+
+    localStorage.setItem('MapboxAccessToken', '<TOKEN HERE>');
+
+## Testing
+
+Tests require an MapboxAccessToken env variable to be set.
+
+    export MapboxAccessToken="YOUR ACCESS TOKEN"
+
+Lastly, run the test command from the console:
+
+    npm test
+
+## Deploying
+
+- `npm run build && npm run docs`
+- Update the version key in [package.json](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/package.json#L3)
+- Update [CHANGELOG.md](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/CHANGELOG.md)
+- Commit and push
+- `git tag -a vX.X.X -m 'vX.X.X'`
+- `git push --tags`
+- `npm publish`

LICENCE

@@ -0,0 +1,13 @@
+Copyright (c) 2015, Mapbox
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,36 @@
+Mapbox GL Geocoder
+---
+
+A geocoder control for [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) using the [Mapbox Geocoding API](https://www.mapbox.com/developers/api/geocoding/).
+
+## Usage
+
+### Quick start
+
+```html
+<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
+<script src='https://api.tiles.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.js'></script>
+
+<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
+<link href='https://api.tiles.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.0.0/mapbox-gl-geocoder.css' rel='stylesheet' />
+
+<script>
+mapboxgl.accessToken = '<YOUR_ACCESS_TOKEN>';
+
+var map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/streets-v8',
+  center: [-79.45, 43.65]
+});
+
+map.addControl(new mapboxgl.Geocoder());
+</script>
+```
+
+### Deeper dive
+
+- See [API.md](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md) for complete reference.
+
+## Contributing
+
+- See [CONTRIBUTING.md](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/CONTRIBUTING.md).

dist/mapbox-gl-geocoder.css

@@ -0,0 +1,145 @@
+/* Basics */
+.mapbox-geocoder-component,
+.mapbox-geocoder-component *,
+.mapbox-geocoder-component *:after,
+.mapbox-geocoder-component *:before {
+  -webkit-box-sizing:border-box;
+     -moz-box-sizing:border-box;
+          box-sizing:border-box;
+  }
+.geocoder-control {
+  font:15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  }
+
+.geocoder-control {
+  position:relative;
+  width:33.3333%;
+  max-width:300px;
+  min-width:200px;
+  max-width:360px;
+  z-index:1;
+  }
+
+.mapbox-geocoder-input {
+  background-color:white;
+  position:relative;
+  }
+
+.mapbox-geocoder-input input[type='text'] {
+  font-size:12px;
+  width:100%;
+  border:0;
+  background-color:transparent;
+  height:40px;
+  margin:0;
+  color:rgba(0,0,0,.5);
+  padding:10px;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  overflow:hidden;
+  }
+  .mapbox-geocoder-input input:focus {
+    color:rgba(0,0,0,.75);
+    outline:0;
+    box-shadow:none;
+    outline:thin dotted\8;
+    }
+
+.mapbox-geocoder-input button {
+  padding:0;
+  margin:0;
+  background-color:#fff;
+  border:none;
+  cursor:pointer;
+  }
+.mapbox-geocoder-input .geocoder-pin-right * {
+  background-color:#fff;
+  z-index:2;
+  position:absolute;
+  right:10px;
+  top:10px;
+  display:none;
+  }
+  .mapbox-geocoder-input .geocoder-pin-right *.active { display:block; }
+
+/* Auto suggestions */
+.mapbox-geocoder-input {
+  position:relative;
+  }
+  .mapbox-geocoder-input ul {
+    background-color:#fff;
+    left:0;
+    list-style:none;
+    margin:0;
+    padding:0;
+    position:absolute;
+    width:100%;
+    top:100%;
+    z-index:1000;
+    overflow:hidden;
+    font-size:12px;
+    }
+    .mapbox-geocoder-input ul > li > a {
+      clear:both;
+      cursor:default;
+      display:block;
+      padding:5px 10px;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      white-space:nowrap;
+      }
+      .mapbox-geocoder-input ul > li.active > a,
+      .mapbox-geocoder-input ul > li > a:hover {
+        background-color:#eee;
+        text-decoration:none;
+        cursor:pointer;
+        }
+
+.mapbox-geocoder-clearfix:after {
+  content:'';
+  display:block;
+  height:0;
+  clear:both;
+  visibility:hidden;
+  }
+
+/* Mobile */
+@media only screen and (max-width:640px) {
+
+/* Container */
+.geocoder-control.geocoder-control { width:100%; max-width:100%; }
+
+/* Input container */
+.geocoder-control.geocoder-control-input { top:0;left:0; }
+.mapbox-geocoder-profile { margin:5px 10px; }
+
+}
+
+@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
+   @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
+    @-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
+        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+/* icons */
+.geocoder-icon {
+  display:inline-block;
+  width:20px;
+  height:20px;
+  vertical-align:middle;
+  speak:none;
+  background-repeat:no-repeat;
+  }
+  .geocoder-icon-search {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0xMDMyLjM2MjIpIj48cGF0aCBkPSJNOC41IDRDNiA0IDQgNiA0IDguNSA0IDExIDYgMTMgOC41IDEzIDkuNCAxMyAxMC4yIDEyLjggMTAuOCAxMi4zTDEwLjkgMTIuMyAxNC4zIDE1LjdDMTQuNSAxNS45IDE0LjcgMTYgMTUgMTYgMTUuNiAxNiAxNiAxNS42IDE2IDE1IDE2IDE0LjcgMTUuOSAxNC41IDE1LjcgMTQuM0wxMi4zIDEwLjkgMTIuMyAxMC44QzEyLjggMTAuMiAxMyA5LjQgMTMgOC41IDEzIDYgMTEgNCA4LjUgNHpNOC41IDUuNUMxMC4yIDUuNSAxMS41IDYuOCAxMS41IDguNSAxMS41IDEwLjIgMTAuMiAxMS41IDguNSAxMS41IDYuOCAxMS41IDUuNSAxMC4yIDUuNSA4LjUgNS41IDYuOCA2LjggNS41IDguNSA1LjV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDEwMzIuMzYyMikiIGZpbGw9IiMwMDAiLz48L2c+PC9zdmc+);
+    }
+  .geocoder-icon-close {
+    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnNTMyNyIgaGVpZ2h0PSIyMCIgd2lkdGg9IjIwIj48ZGVmcyBpZD0iZGVmczUzMjkiLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNTMzMiIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIiBpZD0ibGF5ZXIxIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIGlkPSJnNTkzNiIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiIGlkPSJnNTkzMiIvPjxnIGlkPSJnNjAzOCIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggaWQ9InBhdGgzMDczIiBkPSJtMzIwNSA5OTcuMzYgMCAxLjUgMy41IDMuNS0zLjUgMy41IDAgMS41IDEuNSAwIDMuNS0zLjUgMy41IDMuNSAxLjUgMCAwLTEuNS0zLjUtMy41IDMuNS0zLjUgMC0xLjUtMS41IDAtMy41IDMuNS0zLjUtMy41LTEuNSAweiIgZmlsbD0iIzAwMCIvPjwvZz48L3N2Zz4=);
+    }
+  .geocoder-icon-loading {
+    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Im0xMCAyIDAgMy4zYzIuNiAwIDQuNyAyLjEgNC43IDQuN2wzLjMgMGMwLTQuNC0zLjYtOC04LTh6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTEwIDJDNi44IDIgMy43IDQuMSAyLjYgNy4xIDEuNCAxMCAyLjEgMTMuNiA0LjUgMTUuOGMyLjQgMi40IDYuNCAyLjkgOS40IDEuMiAyLjUtMS40IDQuMi00LjIgNC4yLTctMS4xIDAtMi4yIDAtMy4zIDAgMC4xIDIuMi0xLjcgNC4zLTMuOCA0LjZDOC43IDE1IDYuNCAxMy44IDUuNyAxMS43IDQuOCA5LjcgNS42IDcuMSA3LjYgNiA4LjMgNS42IDkuMSA1LjMgMTAgNS4zYzAtMS4xIDAtMi4yIDAtMy4zeiIgc3R5bGU9ImZpbGw6IzAwMDtvcGFjaXR5OjAuMiIvPjwvc3ZnPg==);
+    -webkit-animation: rotate 400ms linear infinite;
+       -moz-animation: rotate 400ms linear infinite;
+        -ms-animation: rotate 400ms linear infinite;
+            animation: rotate 400ms linear infinite;
+    }

example/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mapbox-gl-js Geocoder plugin</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.css' rel='stylesheet' />
+    <link href='../dist/mapbox-gl-geocoder.css' rel='stylesheet' />
+    <style>
+      body { margin:0; padding:0; }
+      .map {
+        position:absolute;
+        width:100%;
+        height:100%;
+        top:0;
+        right:0;
+        }
+    </style>
+  </head>
+  <body>
+    <div id='map' class='map'></div>
+    <script src='bundle.js'></script>
+  </body>
+</html>

example/index.js

@@ -0,0 +1,23 @@
+require('../');
+
+mapboxgl.accessToken = window.localStorage.getItem('MapboxAccessToken');
+
+var map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/streets-v8',
+  center: [-79.4512, 43.6568],
+  zoom: 13
+});
+
+var geocoder = new mapboxgl.Geocoder();
+var button = document.createElement('button');
+button.textContent = 'click me';
+
+map.getContainer().querySelector('.mapboxgl-ctrl-bottom-left').appendChild(button);
+map.addControl(geocoder);
+
+map.on('load', () => {
+  button.addEventListener('click', function() {
+    geocoder.set('Montreal Quebec');
+  });
+});

index.js

@@ -0,0 +1,28 @@
+/**
+ * A geocoder component using Mapbox Geocoding APi
+ * @class mapboxgl.Geocoder
+ *
+ * @param {Object} options
+ * @param {String} [options.position="top-right"] A string indicating the control's position on the map. Options are `top-right`, `top-left`, `bottom-right`, `bottom-left`
+ * @param {String} [options.accessToken=null] Required unless `mapboxgl.accessToken` is set globally
+ * @param {string|element} options.container html element to initialize the map in (or element id as string). if no container is passed map.getcontainer() is used instead.
+ * @param {Array<Array<number>>} options.proximity If set, search results closer to these coordinates will be given higher priority.
+ * @example
+ * var geocoder = Geocoder({
+ *   container: 'map'
+ * });
+ *
+ * map.addControl(directions);
+ * @return {Geocoder} `this`
+ */
+import Geocoder from './src/geocoder';
+
+function exportFn(options) {
+  return new Geocoder(options);
+}
+
+if (window.mapboxgl) {
+  mapboxgl.Geocoder = exportFn;
+} else if (typeof module !== 'undefined') {
+  module.exports = exportFn;
+}