add extra mapbox-gl-geocoder examples by andrewharvey · Pull Request #5915 · mapbox/mapbox-gl-js

andrewharvey · 2017-12-23T12:54:44Z

Launch Checklist

briefly describe the changes in this PR

This tackles the first part of mapbox/mapbox-gl-geocoder#138 adding more examples of mapbox-gl-geocoder. I think it's better to keep all GL JS ecosystem examples together here making them easier to find and to re-use existing infrastructure compared to having a separate mapbox-gl-geocoder examples page.

Additional examples are:

using localGeocoder to search with lat/lon coordinates
using filter to limit results to a region from the Mapbox Geocoding API
search box outside the map Attach controls to arbitrary DOM nodes #3685 (comment) add example to use any element as the geocoder input mapbox-gl-geocoder#137 ( thanks to @tristen for providing this one at https://bl.ocks.org/tristen/a09627f01d3a3bc54139d52a5eb01386 ) (this one in particular keeps coming up with users)
keep map in sync with geocoder proximity bias Proximity updates based on map movement mapbox-gl-geocoder#118 (comment)

Before this can be merged:

gather feedback / review
coordinate a new release of mapbox-gl-geocoder
update version number of mapbox-gl-geocoder contained within this PR

andrewharvey · 2018-01-21T01:40:48Z

This PR is ready now.

tristen

Examples look great!

tristen · 2018-01-21T15:38:06Z

+    filter: function (item) {
+        // returns true if item contains New South Wales region
+        return item.context.map((i) => {
+            return (i.id.startsWith('region') && i.text === "New South Wales");


There's no support in IE for startsWith right?

That's right.

I've included a polyfill since I feel startsWith is much more readable than the alternative of i.id.substr(0, 6) === 'region' and simpler than a regexp.

👍 looks like that just needs a no-extend-native line for tests to pass.

Sorry, but after thinking some more I think it's probably better to simply split and shift since "id of the feature of the form {index}.{id}"

tristen · 2018-01-21T15:38:24Z

+description: >-
+  Use the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  control to search for places using Mapbox Geocoding API limiting results
+  to a region


tristen · 2018-01-21T15:39:23Z

+                type: "Point",
+                coordinates: [lng, lat]
+            },
+            place_name: 'Lat: ' + lat + ', Lng: ' + lng, // eslint-disable-line camelcase


Hmm that's annoying we have to eslint disable here but 🤷‍♂️

yes but I don't see any other way around it since place_name is defined in the carmen geojson spec

tristen · 2018-01-21T15:39:41Z

+  Use the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  control to search for places using Mapbox Geocoding API, supplementing
+  results from a local data source or function, in this case to match
+  geographic coordinates provided as input


tristen · 2018-01-21T15:40:25Z

+description: >-
+  Use the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  control to search for places using Mapbox Geocoding API on an input search
+  box external to the map


tristen · 2018-01-21T15:43:03Z

@@ -0,0 +1,13 @@
+/*---
+title: Use the geocoder on an external search box


Could the title and description be worded a little differently? I'm not sure a user looking to add a geocoder to an element outside the map would think to search "external search box".

I've changed the title to: "Place the geocoder input outside the map" and descirption to:

Use the mapbox-gl-geocoder
control to search for places using Mapbox Geocoding API attached to an
element outside the map

andrewharvey · 2018-01-21T22:30:56Z

Thanks for the review @tristen, I've implemented some changes.

ChrisLoer · 2018-04-03T19:58:28Z

@andrewharvey Not sure if it's worth ticketing, but I just ran across mapbox-gl-geocoder-local-geocoder while doing manual testing, and it was pretty hard to figure out what it was supposed to do. In fact, even looking at that regex, I still haven't managed to enter a search query that returns results that seem to be based on lat/long. Maybe it would help to add a line to the description providing an example query using the functionality?

andrewharvey · 2018-04-03T22:23:16Z

hey @ChrisLoer it's supposed to allow the implementer to do mapbox/mapbox-gl-geocoder#121, but being generic so you can supplement the geocoder with your own non-mapbox geocoder data, eg from your Dataset

is this the unclear regex?

// match anything which looks like a decimal degrees coordinate pair
var matches = query.match(/^[ ](-?\d+.?\d)[, ]+(-?\d+.?\d*)[ ]*$/);

to match queries like

-40.1, 160.9
-40.1 160.9
160.9,-40.1

as their coordinates

ChrisLoer · 2018-04-03T23:11:57Z

🤔 I thought I tried the simple "x,y" syntax and I was getting results with random addresses that contained those numbers. But I can't reproduce that behavior now -- works easily.

Probably just ignore me. 😳 Although adding something like "provided as input in the format ', '" would still make the example a bit more accessible I think.

mollymerp · 2018-04-03T23:12:58Z

hmm we're getting to the point where a Geocoder subheading in the examples nav might be worthwhile 💭

thanks @andrewharvey !

andrewharvey added the under development label Dec 23, 2017

andrewharvey force-pushed the geocoder-examples branch from ed0ce7f to df425fd Compare December 23, 2017 13:01

andrewharvey mentioned this pull request Dec 23, 2017

add examples mapbox/mapbox-gl-geocoder#138

Closed

5 tasks

andrewharvey changed the base branch from master to gh-pages December 24, 2017 06:20

andrewharvey mentioned this pull request Dec 24, 2017

point to external docs and rename examples directory as debug mapbox/mapbox-gl-geocoder#139

Merged

1 task

andrewharvey changed the base branch from gh-pages to mb-pages January 3, 2018 08:23

andrewharvey force-pushed the geocoder-examples branch from df425fd to adf7793 Compare January 3, 2018 08:36

andrewharvey mentioned this pull request Jan 18, 2018

v2.2.0 mapbox/mapbox-gl-geocoder#144

Merged

8 tasks

andrewharvey requested review from tristen and removed request for tristen January 18, 2018 10:44

add extra mapbox-gl-geocoder examples

45af8d7

andrewharvey force-pushed the geocoder-examples branch from adf7793 to 45af8d7 Compare January 21, 2018 01:39

andrewharvey removed the under development label Jan 21, 2018

andrewharvey changed the title ~~[wip] add extra mapbox-gl-geocoder examples~~ add extra mapbox-gl-geocoder examples Jan 21, 2018

tristen requested changes Jan 21, 2018

View reviewed changes

review changes to geocoder examples

3c9b9e9

tristen approved these changes Jan 21, 2018

View reviewed changes

split carmen id to get index rather than using startsWith

32ef2a2

andrewharvey force-pushed the geocoder-examples branch from 4a2cd7f to 32ef2a2 Compare January 22, 2018 09:01

andrewharvey merged commit 9c601e1 into mb-pages Jan 22, 2018

andrewharvey deleted the geocoder-examples branch January 22, 2018 09:53

andrewharvey mentioned this pull request Apr 4, 2018

group geocoder examples #6453

Merged

5 tasks

		@@ -0,0 +1,13 @@
		/*---
		title: Use the geocoder on an external search box

Uh oh!

Conversation

andrewharvey commented Dec 23, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Launch Checklist

Uh oh!

andrewharvey commented Jan 21, 2018

Uh oh!

tristen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andrewharvey commented Jan 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChrisLoer commented Apr 3, 2018

Uh oh!

andrewharvey commented Apr 3, 2018

Uh oh!

ChrisLoer commented Apr 3, 2018

Uh oh!

mollymerp commented Apr 3, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

andrewharvey commented Dec 23, 2017 •

edited

Loading

andrewharvey commented Jan 21, 2018 •

edited

Loading