Giter VIP home page Giter VIP logo

search-playground's Introduction

Mapbox Geocoder Playground Tool

We’ve updated our search playground: https://mapbox.com/search-playground/ Internal debugging? Use this link instead. The Mapbox Geocoder Playground Tool is used to test geocoder results for forward and reverse geocoding and experiment with query parameters

Using the playground

  • Use the text input area for querying.
  • Use image to see the geocoder results in a json format.
  • Use image to share the response.
  • Use image to open/close the Settings panel, where you can try out geocoding parameters.
  • Use image to report any issue related to this tool.
  • The image will open our geocoder documentation site.

Internal only:

  • Use image to open hecate
  • Use the osm link to open JOSM

The search bar is the equivalent of an API query. For a forward geocode, enter text or an address. For a reverse geocode, enter coordinates.

Forward Geocoding Enter a query in the search bar to get the coordinates and data about the feature.

Reverse Geocoding Click on the map to see the coordinates in the search bar and the features that match those coordinates will be returned in the suggestions list below the search bar.

Set query parameters Click the cog icon to open a GUI of the query parameters available in the geocoding API.

For more information, see the parameters section of the documentation.

Parameters available in the playground:

- Autocomplete
- Country filtering
- Type filtering
- Proximity biasing
- Results limit
- Language selection
- Strict mode for language

⚠️ Internal use only

  • Toggle between staging and production server.
  • Test geocoding layers.

What you cannot do...

❌ Use it as a permanent endpoint

Run it locally with parcel

yarn install
yarn build
yarn start

Deploying

Deploys are managed by updating the hey-pages & publisher-production branches. To deploy run the following:

git checkout publisher-production

git merge master

git push

[Internal only] Follow the #publisher channel in slack to watch for a successful build/publish.

search-playground's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

search-playground's Issues

Get region from autocomplete result

How can I get region from the selected result from autocomplete?

From the result I am getting, there is 3rd object named region but actually it is department not region.

Here is the example address:

54b route de brie, 91800 Brunoy, France

Mapbox is giving me: Essonne // Its department not region

But actually its: Ile-de-France

How do I get the correct region?

Here is my working demo:

https://jsfiddle.net/rv085oL1/

Show setting panel per default

Context

As per comment:

I didn't discover the "settings" option in the search playground until my third visit to the page, and only once I was explicitly looking for a way to control options. I was naturally just drawn to the search interface, and although I did try clicking a few of the buttons in the upper right, the first two I clicked didn't really grab my interest so I stopped exploring. Is the "settings" functionality a central enough part of the "Search Playground" that it makes sense for it to be showing/selected from the beginning?

Add additional icons to disambiguate result type

Context

Sometimes multiple results will show up that look like duplicates but are really different feature types. A quick way to disambiguate would be to add additional icons that differentiate between features.

For example, the first result here is an address, the second is the name of the office building (a POI feature type) at that same address.
screen shot 2019-01-04 at 9 57 45 am

We have nice icons for interpolated addresses and roads, so extending this to other features would be nice.

Incomplete search term can populate the result but complete search term cannot

Trying search for some location, but somehow complete address return empty result, while incomplete address return the result I need.

For example:

  1. Incomplete Search Term: "987B BUANGKOK GRE" - can find the location
    Using this API call: https://api.mapbox.com/geocoding/v5/mapbox.places/987B%20BUANGKOK%20GREEN.json?access_token=pk.eyJ1IjoidGVhbWxpb24iLCJhIjoiY2t0cGE5ejEyMDhidTJybXBxNDJzb3Q3OSJ9.Q08qRfje9TI7mK7JYR8AOQ&autocomplete=true&country=sg

image
image

  1. Complete Search Term: "987B BUANGKOK GREEN" - return empty array
    image

image

Update to Mapbox Streets v11

This page is currently using Mapbox Streets v8 (see this line). The most recent version of Mapbox Streets is v11. We should update!

cc @ingalls @scottsfarley93 👋 I don't want to make this change until I can run the site locally and confirm nothing will break. Let me know when you have a chance to take a look at that issue, and I can make this change.

Labels to icons on the landing page

Context

image

Would be good to have a label with a name/short description of what it does when clicked on along with highlighting them.

Currently it highlights the icon buttons but doesn't display a label.

No Subway Station in autocomplte suggestion

Context

When I search for a subway station in Paris (ex : Charonne, Pigalle, ...), I have no result.
However I do have some information about bus station when I search for "Charonne".

How can I have subway station in autocomplete ?

Charonne
https://docs.mapbox.com/search-playground/#{%22url%22:%22%22,%22index%22:%22mapbox.places%22,%22approx%22:true,%22staging%22:false,%22onCountry%22:true,%22onWorldview%22:true,%22onType%22:true,%22onProximity%22:false,%22onBBOX%22:true,%22onLimit%22:true,%22onLanguage%22:true,%22countries%22:[{%22name%22:%22France%22,%22code%22:%22fr%22}],%22worldviews%22:[],%22proximity%22:%22%22,%22typeToggle%22:{%22country%22:false,%22region%22:false,%22district%22:false,%22postcode%22:false,%22locality%22:false,%22place%22:true,%22neighborhood%22:false,%22address%22:true,%22poi%22:true},%22types%22:[%22address%22,%22poi%22,%22place%22],%22bbox%22:%222.2336651389490783,48.76682506586417,2.504513212546186,48.914650142788105%22,%22limit%22:%2210%22,%22autocomplete%22:true,%22languages%22:[{%22code%22:%22fr%22,%22name%22:%22French%22}],%22languageStrict%22:false,%22onDebug%22:false,%22selectedLayer%22:%22%22,%22debugClick%22:{},%22localsearch%22:false,%22routing%22:false,%22query%22:%22charonne%22}

Pigalle
https://docs.mapbox.com/search-playground/#{%22url%22:%22%22,%22index%22:%22mapbox.places%22,%22approx%22:true,%22staging%22:false,%22onCountry%22:true,%22onWorldview%22:true,%22onType%22:true,%22onProximity%22:false,%22onBBOX%22:true,%22onLimit%22:true,%22onLanguage%22:true,%22countries%22:[{%22name%22:%22France%22,%22code%22:%22fr%22}],%22worldviews%22:[],%22proximity%22:%22%22,%22typeToggle%22:{%22country%22:false,%22region%22:false,%22district%22:false,%22postcode%22:false,%22locality%22:false,%22place%22:true,%22neighborhood%22:false,%22address%22:true,%22poi%22:true},%22types%22:[%22address%22,%22poi%22,%22place%22],%22bbox%22:%222.2336651389490783,48.76682506586417,2.504513212546186,48.914650142788105%22,%22limit%22:%2210%22,%22autocomplete%22:true,%22languages%22:[{%22code%22:%22fr%22,%22name%22:%22French%22}],%22languageStrict%22:false,%22onDebug%22:false,%22selectedLayer%22:%22%22,%22debugClick%22:{},%22localsearch%22:false,%22routing%22:false,%22query%22:%22pigalle%22}

Thanks in adavance

Sidebar

Context

The sidebar should reduce the size of the map and be a sister div to the map instead of being an overlay. This will ensure that all results are always visible on the map when we call map.fitBounds.

At the moment if the sidebar is open (it is by default), results can be hidden underneath the sidebar.

cc/ @mapbox/search

Improve experience when navigating between list of results

Context

When searching in /search-playground, a list is displayed with the results in real time, but it is not easy to navigate between the results.

🔹 You cannot use the up/dow keys to select a result
🔹 You cannot see which option was selected.

image

Add URL field to playground interface

Context

The old search api playground made it easy to see the full request URL which made troubleshooting query parameters straightforward and reflects what users would do IRL.

screen shot 2018-10-22 at 3 40 25 pm

The new API playground doesn't include a field like this, and the URL is only ever rendered in a long string that's hard to parse, like:

https://www.mapbox.com/search-playground/#{"url":"","index":"mapbox.places","staging":false,"onCountry":true,"onType":true,"onProximity":true,"onBBOX":true,"onLimit":true,"onLanguage":true,"countries":[],"proximity":"","typeToggle":{"country":false,"region":false,"district":false,"postcode":false,"locality":false,"place":false,"neighborhood":false,"address":false,"poi":false},"types":[],"bbox":"","limit":"","autocomplete":true,"languages":[],"languageStrict":false,"onDebug":false,"selectedLayer":"","debugClick":{},"query":"san fran"}

Here's an example of how tilequery playground gets everything on one page as well:

https://www.mapbox.com/help/tilequery-api-playground/

Request

Add a place where the full request URL is rendered.

Wrapped Text In Place Field

The text in the place_name field is being wrapped with a ... due to unavailability of the space in the panel.

Use case: I tend to copy place names from the reverse query to search box to replicated the results with forward query and with the wrapped text, its difficult to get the entire text and the region/country features in the address text.

Would be good to have this fixed and is not very important/blocker at the moment.

screen shot 2018-06-22 at 4 42 31 pm

Priority: LOW

Kosovo's Code is not rs but xk

Context

If you set the country as Kosovo and try to search City's in Kosovo you will not get any results because Kosovo's ISO_3166-1_alpha-2 Code is wrong.

Incorrect Address

Context

When I search for 10650 Toebben Dr, Independence, KY 41051 I get 10650 Toebben Drive, Walton, Kentucky 41094, United States returned. This address is incorrect. I've already been in contact with Sam and my Account Manager Nelle about this issue.

This is revenue impacting and blocking our clients from using the software as the address being returned isn't the right location. Issue has been ongoing for over a month with no true follow up.

Thanks

Preserve map zoom level and visible map window

It appears the map zoom level and visible window of the map are not captured in the URL of search-playground. When I click on that URL it shows the map at a low zoom level, looking at most of the United States. It's helpful to retain the zoom and map window focus for debugging purposes.

For example, that URL brings me to this view:

selection_627

But when I was debugging, the view of the map I was using was:

selection_628

and I expect that view of the map to be preserved in the URL.

cc @samely @Fa7C0n @ingalls

Geocoding not working for Mexico

Context

Coordinates that Mapbox return are in a wrong position, they are in the street but a wrong number- This is what Mapbox returns (1 of many examples)

image

this is what google maps return with the correct location of "paseo de Los Laureles 404"

image

Clicking Parse Button Throws vue TypeError

Context

Clicking the parse button in the sandbox threw an error gave no visual indication there was an error or missing/incorrect params in the API call.

QUERY:

https://docs.mapbox.com/search-playground/#{%22url%22:%22youngstown,%20oh%22,%22index%22:%22mapbox.places%22,%22approx%22:true,%22staging%22:false,%22onCountry%22:false,%22onWorldview%22:false,%22onType%22:false,%22onProximity%22:true,%22onBBOX%22:true,%22onLimit%22:true,%22onLanguage%22:true,%22countries%22:[],%22worldviews%22:[],%22proximity%22:%22%22,%22typeToggle%22:{%22country%22:false,%22region%22:false,%22district%22:false,%22postcode%22:false,%22locality%22:false,%22place%22:false,%22neighborhood%22:false,%22address%22:false,%22poi%22:false},%22types%22:[],%22bbox%22:%22%22,%22limit%22:%22%22,%22autocomplete%22:true,%22languages%22:[],%22languageStrict%22:false,%22onDebug%22:false,%22selectedLayer%22:%22%22,%22debugClick%22:{},%22localsearch%22:true,%22routing%22:true,%22query%22:%22%22}

EXCEPTION:

main.js:333 Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at Vue$3.parseURL (main.js:333)
    at boundFn (vue.js:194)
    at invoker (vue.js:1992)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.js:1790)

CODE:

        // methods functions perform CRUD operations on the `data` property
        methods: {
            help: function(url = 'https://docs.mapbox.com/api/search/#forward-geocoding') {
                window.open(url, '_blank');
            },
            //Parse Settings from a Mapbox API URL
            parseURL: function() {
                const url = new URL(this.cnf.url);

                this.resetCnf();

Screen Shot 2021-09-04 at 8 04 09 PM

Screen Shot 2021-09-04 at 7 59 19 PM

Geocoding autocomplete search doesn't display/show any Argentine addresses

I know that I should report issues related to seach resource through https://labs.mapbox.com/geocoder-feedback/ but the issue seemed really important and I thought that I should post it here.

It seems like Argentine addresses are not displayed to the user if the user is searching a street located in Argentina

Photo of the geocoding playground :

(https://user-images.githubusercontent.com/48655321/62747326-4de8b580-ba2a-11e9-81ab-31b4343f065b.png)

Not really a bug - Missing zipcodes in Denmark

Context

Missing zipcodes in Denmark - Zipcode 6100 does not excist - But if search for "Haderslev" you can in the response see that the zipcode actually is "attached" to the feature... ?

Transfer /search-playground to docs.mapbox.com

@mapbox/frontend-platform and @mapbox/docs are working together to transfer this site to the new docs.mapbox.com domain.

Here are the steps in the process.

  • Launch the staging site at docs.tilestream.net.
  • QA the staging site .
  • Launch the production site at docs.mapbox.com.
  • 301 redirect from www to docs.
  • Delete www files and branches.

We're going to start on this today, and try to finish it today or tomorrow.

URL for page with the results side pane open

Context

Currently, an url for the search-playground (with all parameters set) can be shared (example) which would open the playground with the all parameters set and the query itself.

It would be great to have url that could be shared with side pane open with response in it. Something like a shared url that could open the page similar to below screenshot.

image

Belfast results are not shown in search

Report issues related to search results through https://www.mapbox.com/geocoder-feedback/
** The above link to geocoder-feedback** is not giving any opportunity to feedback on search results being not being returned.

Context

While using the tool we put in BT6 9LF as code to view the results and no features were returned. Can we be directed to correct place to raise this issue and if not let us know why the address is not found in results
image

Bounding Box Tool Doesn't Allow Drawing

Proximity toggle and bbox toggle should default to off and then fill with current map center or extent when turned on, and when the icon is clicked (as in our internal version). Much easier than drawing a box or clicking a point, just use the current map view. Also the drawing tool is very buggy.

Context

gif

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.