mapbox / mapbox-gl-geocoder

Geocoder control for mapbox-gl-js using Mapbox Geocoding API

Mapbox GL Geocoder

A geocoder control for mapbox-gl-js using the Mapbox Geocoding API. For a JavaScript geocoder without a graphical user interface see the Mapbox SDK for JS.

Usage

• https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/
• https://docs.mapbox.com/mapbox-gl-js/example/?search=mapbox-gl-geocoder

If you are supporting older browsers, you will need to use a polyfill. We recommend working with @babel/polyfill.

Usage with a module bundler

npm install --save @mapbox/mapbox-gl-geocoder

import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
...
const geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl
});

Using without a Map

It is possible to use the plugin without it being placed as a control on a mapbox-gl map. Keep in mind that the Mapbox Terms of Service require that POI search results be shown on a Mapbox map. If you don't need POIs, you can exclude them from your search results with the options.types parameter when constructing a new Geocoder.

Deeper dive

API Documentation

See API.md for complete reference.

Examples

See https://docs.mapbox.com/mapbox-gl-js/examples/#geocoder.

Contributing

See CONTRIBUTING.md.

mapbox-gl-geocoder's Issues

Error During npm start

Getting the following error with the 0.1.0 release when I try to npm start or require this into another app with require('mapbox-gl-geocoder')

ReferenceError: [BABEL] /Users/abe/Development/pcwaPoliticalBoundaries/node_modules/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.js: Unknown option: /Users/abe/Development/pcwaPoliticalBoundaries/node_modules/mapbox-gl-geocoder/dist/.babelrc.presets while parsing file: /Users/abe/Development/pcwaPoliticalBoundaries/node_modules/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.js

MapBox geocode controller: how to disable automatic zoom into location?

For MapBox geocoderControl API, how do you prevent the map from zooming in when the user enters a location? For example, right now if I search for New York, the map zooms into New York. I want the map to stay where it is and avoid setting the view again since that transition from zooming in and resetting very quickly causes the page to flash, which could be a nuisance for the user. I'm using geocoderControl.on('select') method.

z-index of dropdown not high enough relative to other map controls

I was looking at https://www.mapbox.com/blog/custom-markers-mapboxgl/ and noticed that when the geocoder dropdown is open I can see the arrows of the Navigation control through it.

Geocoder is aggressively filtering results

English language.
Results are filtered such that results containing accents are not displayed.

Example - If I search for "Zurich", there are no results.
English keyboard cannot type the accent over the "u"

Also, English city names are not displayed.
Example - If I search for "Rome", there are no results. However, there are results for "Roma"

Selecting a suggestion does not work on mobile devices

I've added the geocoder to a mobile app but when I touch click on a item from the list, the list simply closes and the suggestion is never selected.

Including intersecting streets

Are there any plans to include intersecting streets with the gl-geocoder?

No error handling

If you search for a thing and the HTTP request fails (you're offline or something), right now there's no feedback because gl-geocoder throws. Should it handle this situation and show an error?

Placeholder as option

Especially when country or type is set, it would be nice to instruct this more in the placeholder text of the input.

Clearing output should remove clear link and re-populate placeholder

Implements .on but not .off

Once you bind an event, you can't unbind it. Ideally this uses events to do its events handling rather than rolling-its-own.

overuse/misuse of Object.assign

Object.assign changes its first input by reference, see http://mistakes.io/#85bfcfcfe6061a2ffd89

This means that if you initialize multiple mapbox-gl-geocoder instances, the later ones may acquire options from previous ones by mistaken side-effect.

Drop geocoder prefix from event names

Documented here: https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on. The names overall should gel with mapbox-gl-js vernacular.

Export raw class as well, export factory as lowercase.

Only exposing a factory means that one cannot do an instanceof check against mapbox.Geocoder.

And the pattern is

mapbox.Geocoder // requires new, is a traditional class
mapbox.geocoder // is a factory, doesn't require new

Autocomplete results don't update when a user types very quickly

☝️

Simplify

This code really doesn't need to use babel, and would benefit greatly from cutting unnecessary complexity.

add a pointzoom feature like the mapbox.js geocoder

If the geocoder returns a result without a bbox object, the map just centers the map on the result, and if the current zoom level is very low (i.e. zoomed out) then the centering of the map on the search result isn't very helpful. It would be great to implement a minimum zoom level for a point result that does not have an associated bbox.

The mapbox.js library is currently using a pointZoom option of 16.

options: {
        proximity: true,
        position: 'topleft',
        pointZoom: 16,
        keepOpen: false,
        autocomplete: false
    }

and using it in the chooseResult function:

if (result.bbox) {
    this._map.fitBounds(util.lbounds(result.bbox));
} else if (result.center) {
    this._map.setView([result.center[1], result.center[0]], (this._map.getZoom() === undefined) ?
        this.options.pointZoom :
        Math.max(this._map.getZoom(), this.options.pointZoom));
}

so it can be easily added to the change event on the "flyTo" instead of just centering:

input.addEventListener('change', function() {
  var selected = this._typeahead.selected;
  if (selected) {
    if (this.options.flyTo) {
      if (selected.bbox && selected.context <= 3) {
        var bbox = selected.bbox;
        map.fitBounds([[bbox[0], bbox[1]],[bbox[2], bbox[3]]]);
      } else {
        map.flyTo({ center: selected.center });
      }
    }
    this._input = selected;
    this.fire('result', { result: selected });
  }
}.bind(this));

Fire a `results` event with the outcome of the API response

Switch exceptions.json to exceptions.js

For #52, we need to hit compatibility with webpack, and requiring .json files is not something webpack does by default.

Use new IControl interface for control registration

mapbox/mapbox-gl-js#3497

The new IControl interface will allow mapbox-gl-geocoder to remove any dependency on mapboxgl, eliminating a popular class of installation bugs. Once mapboxgl is updated, or before if you're feeling saucy, update to the new interface.

Add Filtering by type in geocoder options

Thanks for the nice plugin!
Please add filtering by type in the geocoder options.
That way Points of Interest (POI) can be excluded from the type ahead list or type of "address" only can be shown.

Capturing paste event is problematic on mac

Would be good to catch a paste event on geocoder input

Error 422 not handled for invalid values

I had a typo in my 'options' - specifically, I used "AU" for the country code instead of 'au'

The only indication that there is a problem, as seen in the browser console is:

Error: Uncaught, unspecified "error" event. ([object Object])
[2]</n.prototype.emit()
 mapbox-gl-geocoder.js:1
[1]</n.prototype<.fire()
 mapbox-gl-geocoder.js:1
[1]</n.prototype<._geocode/this.request.onload<()
 mapbox-gl-geocoder.js:1
bound ()
 self-hosted:752

Eventually I thought to check the network tab in the debugger where I found the underlying error:

message:"Stack "AU" is not a known stack. Must be one of: cn, jp, au, nz, sg, kr, br, ca, at, be, ch, de, dk, es, fi, fr, it, nl, no, se, gb, ie, us, af, ax, al, dz, as, ad, ao, ai, aq, ag, ar, am, aw, az, bs, bh, bd, bb, by, bz, bj, bm, bt, bo, ba, bw, bv, bn, bg, bf, bi, kh, cm, cv, ky, cf, td, cl, cx, co, km, cg, cd, ck, cr, ci, hr, cu, cw, cy, cz, dj, dm, do, ec, eg, sv, gq, er, ee, et, fk, fo, fj, gf, pf, tf, ga, gm, ge, gh, gi, gr, gl, gd, gp, gu, gt, gg, gn, gw, gy, ht, va, hn, hk, hu, is, in, id, ir, iq, im, il, jm, je, jo, kz, ke, ki, kp, kw, kg, la, lv, lb, ls, lr, ly, li, lt, lu, mo, mk, mg, mw, my, mv, ml, mt, mh, mq, mr, mu, yt, mx, fm, md, mc, mn, me, ms, ma, mz, mm, na, nr, np, nc, ni, ne, ng, nu, nf, mp, om, pk, pw, ps, pa, pg, py, pe, ph, pn, pl, pt, pr, qa, re, ro, ru, rw, bl, sh, kn, lc, mf, pm, vc, ws, sm, st, sa, sn, rs, sc, sl, sx, sk, si, sb, so, za, gs, ss, lk, sd, sr, sj, sz, sy, tw, tj, tz, th, tl, tg, tk, to, tt, tn, tr, tm, tc, tv, ug, ua, ae, um, uy, uz, vu, ve, vn, vg, vi, wf, eh, ye, zm, zw"

A nice to have would be to catch the error and print a message in the Javascript console.

Backspace does not work when also using mapbox-gl-draw

Example here - http://bl.ocks.org/danswick/c142d7afa2c9c511bfbea71b4273e61c.

I have only been able to replicate this issue when using mapbox-gl-geocoder and mapbox-gl-draw at the same time. The first geocoding request works as expected, but if you clear the previous query and type a new one, backspace no longer works.

Bump Suggestions version

When tristen/suggestions#6 is hit.

Unexpected HTTP or server errors will not be emitted because the control assumes all error responses are JSON

mapbox-gl-geocoder/index.js

Line 175 in 70ffc65

this.fire('error', { error: JSON.parse(this.request.responseText).message });

This code is overoptimistic and leaves open a wide possibility to bomb out of the function if JSON.parse fails. There are many unexpected errors: HTTP errors, errors that reach a proxy but not the destination - these will all trigger a bug in the current system.

'fire' should not be a public API function

There is no reason to expose fire as a public API method: it is part of the eventemitter's private surface. Users of Mapbox GL Geocoder consume existing events, they do not contribute their own. The testcase for fire provides evidence for this reason: there is no reason why you'd use a control as an arbitrary event emitter.

sometimes Suggestions list isn't updated

The Typeahead/suggestions are updated based on the results of the Geocoding response here however the underlying suggestions library doesn't update the list in the update method.

It updates Suggestions.data but this isn't feed back into the Suggestions.list, hence the results don't show up.

The Suggestions test case, dispatches some events after Suggestions.update which actually update the Suggestions.list.

To fix this issue, the mapbox-gl-geocoder will need to either need to dispatch a keyup event or this needs to be addressed in Suggestions so that a call to update actually updates the list. I'm happy to put together a PR but I'm not sure which approach is best, to address in Suggestions or workaround it here?

mouseup event from suggestions selection flows down to map event

It seems like mapbox-gl-geocoder is letting the mouseup event and possibly others pass through to the map when a selection from the suggestions is clicked, leading to unintended side effects.

See http://jsbin.com/luzigituse/edit?html,console,output

If you start searching for a place and then click on something from the suggestion dropdown, the map still gets the mouseup event. In this example it causes mapbox-gl-draw to start drawing at that clicked location but it really affects anything also bound to the mouse events on the map.

mapboxgl check will not work

https://github.com/mapbox/mapbox-gl-geocoder/blob/master/index.js#L4

Same bug as mapbox/mapbox-gl-directions#84

Disable animation option

Sometimes you don't want an automatic flyTo when a result is selected.

Inaccurate geocoordinates when selecting a 'region' result

When selecting a geocoder result that is a 'region', the map zooms to the wrong spot.

It seems the result.center value is incorrect.

Example -

1. Use the example at https://www.mapbox.com/mapbox-gl-js/example/point-from-geocoder-result/
2. In the geocoder, type in 'Cork, Ireland' and select the result
3. Notice the map and the marker are now centered well west of Cork, Ireland.

Selection of results is coarse and not customizable

regardless of what you click on, you'll get a map.flyTo

mapbox-gl-geocoder/src/geocoder.js

Lines 44 to 46 in b2b2ff1

	map.flyTo({
	center: selected.center
	});

This isn't always what you want: if you're at zoom level 2 and select an address, flying to that address at a super-high zoom level is no good. This part of the code needs to be a little more sophisticated.

.flyTo:false removes map-panning completely

Check out https://jsfiddle.net/dm5zw8gn/. While the code intends simply to remove the flyTo animation, it completely prevents the geocoder from moving the map to the desired spot

cc/ @tristen

Don't filter the result on the client

I'm using fuzzy filtering in suggestions which is a dependency to this plugin and it's inadvertently filtering out legit results (Like typing Florence to return Firenze). The suggestions package should have a bypass option to omit filtering. Capturing here as it was surfaced in this plugin.

cc @apendleton @geografa

Form submitted on input clear when geocoder is within form

When the geocoder div is within a form and .geocoder-icon-close button clicked or user hits return after selecting a suggestion from keyboard, the form is submitted.

I confirmed this by taking the example code from here and adding a wrapping form around div.map and div.geocoder-container. Then I entered an address with suggestions and clicked the "x" (aka button.geocoder-icon-close). The form was submitted rather than simply clearing the input value.

I then also repeated the test, but instead of clicking the "x", I arrowed down to select a suggestion and clicked return. The form was also submitted.

This was in Safari, Chrome, and Firefox.

The mapbox-gl-geocoder is really handy! Thanks for all your great work. Just a little detail that would be great to fix or have insight about how to eliminate the behavior.

Add center and width css option(s) -- feature request

Hello,

I already started a feature request on the GL JS side and was referred over here. I'm hoping that it would be possible to add both a center and width css property to the geocoder plugin.

A good example of this can be found here: https://www.mapbox.com/bites/00121/

This would word better for longer strings and is easier for the end user as well.

I did notice that the css appears to be on the GL JS style sheet vs the geocoder style sheet.

Thanks again.

Weird search results for United States, Canada and Russia

When searching for United States, Canada or Russia, the map zooms out, showing the whole world instead of zooming in on those particular countries. It looks like it tries to do some positioning vertically, but it's not really accurate.

We have a map where we show stores all over the world, including in these three countries. so it's quite important that these, large, countries gets handled correctly.

Get & set are not similar

These functions are briefly named and sound like they should be symmetrical, but it doesn't look like they are. They should definitely at least be more descriptive, saying what they set and get.

Improve documentation for webpack use

This module is available on npm, but there are no no examples of usage ofr this case - just CDN usages as far as I can find on the site. Give that most people are using something like webpack or browserify, it might help developers if there was documentation for usage!

Use mapbox-sdk-js

Currently this module does its own URL construction and supports a limited set of params. Rely on mapbox-sdk-js instead.

Choosing to fitBounds isn't robust enough

If the address data is more specific the code shouldn't default to fitBounds.

Issue raised here: http://stackoverflow.com/questions/35422524/mapbox-geocoder-seems-to-center-in-the-incorrect-location-for-new-york-city-addr

Incorrect styling in IE

Tested with Browserstack, Windows 10, IE 11

Why should this module wrap coordinates to -180, 180?

Currently one of the few uses of mapboxgl in this codebase is to use .wrap() to allow someone to pass an array of coordinates to query.

I see no justification for this API: query should only accept a string of valid geocoder input. If someone wants to search for coordinates, they must convert them into a string themselves.

Mobile Safari issues

Hey there!

I have noticed some annoying things in Safari on iOS 9.3.4.

First, we are unable to touch autocomplete suggestions from the geocoder. When we touch a result, the keyboard closes and nothing happens. Second, the keyboard doesn't close when the result is selected (by tapping "Go" or "Return") even though the input is out of focus. Also, tapping "Go" or "Return" doesn't select the closest match to what was typed, but rather the first suggestion in the list. Both issues can be clearly seen here: http://jmp.sh/b89NJ36

I am going to continue to investigate, but any suggestions would be welcome. I'm also just alerting whomever reads these in case they aren't already aware. :)

Use wrap when coordinates are queried from the API

Like mapbox/mapbox-gl-directions#54

Javascript error when user selects a country only

In the geocoder, type in a country only (i.e. "Canada") and select the result from the list.

mapbox-gl-geocoder.js:1 Uncaught TypeError: Cannot read property 'length' of undefined(anonymous function) @ mapbox-gl-geocoder.js:1o.value @ mapbox-gl-geocoder.js:25i.handleMouseDown @ mapbox-gl-geocoder.js:24(anonymous function) @ mapbox-gl-geocoder.js:24

debounce function closing

Should the debounce call capture the timeout value at line 78? I'm wondering if that line of code should read

 }.bind(this), 200));

instead of

 }.bind(this)), 200);

Feel free to close this ticket.

FlyTo speed geocoder result

Just a quick question, is it possible to adjust the flyto speed of the geocoder since the FlyTo option is a boolean.

Object assign error

Hey,

I'm importing mapbox-gl-geocoder from npm and using it with browserify. I get the following error:

Unknown plugin "object-assign" while parsing file: .../node_modules/mapbox-gl-geocoder/index.js

Any clue ?

EDIT :
Got it to work with https://www.npmjs.com/package/babel-plugin-object-assign since I'm using babelify, but I found another error:

geocoder.js:6 Uncaught ReferenceError: mapboxgl is not defined which is this line :

export default class Geocoder extends mapboxgl.Control {

My code is the following

import mapboxgl             from 'mapbox-gl'; // 0.12.1
import Geocoder             from 'mapbox-gl-geocoder';

Limit suggestions to given bounds

Geocoder offers a way to limit results to a certain country. It would be helpful to have an additional option to limit results to a given bounding box.

Usecase

Think of a website for a local event that offers a map with location search: if the users enter street names, they expect to only get suggestions for the given local area (which usually is much smaller than a whole country).