Hi! I had a problem with an app I built that uses maplibre-gl-geocoder. The component wouldn't work because the events library required in index.js is not listed in the dependencies in package.json.

I added the dependency to my project's package.json, and now it works. I'm not sure if I'm doing something wrong, but maybe maplibre-gl-geocoder's package.json should have "events" in its dependencies list?

Thank you for your work on this library, though - it's great!

Hi! thanks for the amazing project. I have encountered what I think is a bug, because i think it should be irrelevant to my choice of geocoder (Nominatim).

To reproduce the bug:

1. search for "NUS singapore" (I have a map of singapore), press enter.
2. click on the one that says National University of Singapore from the dropdown list, it zooms in closer to the place;
3. click enter again and the map zooms in even closer;
4. search for the next query "NUH singapore" (do not clear manually clear search box), which has 2 results from the drop down. But when I zoom out the map, the pin for National University of Singapore is still there.

Please see attached screen recording for the reference.

Thank you!

Dupe of aws-amplify/amplify-ui#1797

Bug was discovered in the amplify-ui repo which wraps the maplibre-gl-geocoder component

Please describe your bug.

I'm using the Geocoder component, and I'm seeing an issue where I can't search for another set of places after clicking on a single result from the search result container. The issue does not happen if I clear the input of the search box before performing a search for the set of places so it is a minor bug.

What's the expected behaviour?

The search box should continue to allow searching for a new set of places, after clicking on a single result, without having to clear the content of the search box.

Help us reproduce the bug!

Type in "ATM" in the search box and hit "Enter" on the keyboard
The map should display markers for a set of ATMs
Click on the first result from the search result container
The map should display a single marker for the first result's ATM
Highlight the entire text and type in "Grocery Store" (highlighting entire text and overwriting it with "Grocery Store" will prevent it from clearing the input)
Hit "Enter" on the keyboard
Nothing will happen

Every instance of Carmen GeoJSON in the source code JSDocs and in API.md points to a 404 page on Github. I tried Googling for a definition of Carmen GeoJSON format but came up empty.

The source code example of the getPlaceById function in the geocoderApi parameter contains what I think may be a definition of a Carment GeoJSON feature as used in this project:

{
  type: string, 
  geometry: {
    type: string, 
    coordinates: [number]
  }, 
  place_name: string, 
  text: string, 
  center: [number] 
}[]

Am I correct in assuming everything is required except text?
Am I correct in assuming that the first type always has to be 'Feature' and geometry.type always has to be 'Point'?

NOTE: API.md incorrectly states that getPlaceById should return an array of text/placeId suggestions.

As seen here, a map will call onRemove internally when a control is removed from it. The Geocoder doesn't implement onRemove and hence throws an error when being removed from a map.

Resolved, closed

The documentation is wrong both in README.md (where it doesn't mention searchByPlaceId) and index.js (where it mentions getByPlaceId which doesn't exist in the code, also has the wrong returned values for both getByPlaceId and getSuggestions).

This adds unnecessary pain to developers, since they need to reverse-geocode the code to understand how to implement search with auto suggest.

Hi, I'm new to this API. Is it possible to customise popup information about a place when the marker is clicked? For instance, here my address is too long and it won't be able to fix into the default popup box.

Thanks a lot!

The options.popup parameter to MaplibreGeocoder is defaulted to false while the JSDoc definition and reference in API.md specify the default value of options.popup as true.

We can resolve this by either:

• Setting the default value of options.popup to true (L87)
• Updating the JSDoc description (L47) and the reference in API.md (L99) to a default value of false

Updating reference to the default value has the benefit of not impacting users' applications if they upgrade to the version which contains the fix.

We have migrated all unit tests in MapLibre GL JS from tap/tape to jest. I think it would make sense to do the same here.

Relevant issue in GL JS:

maplibre/maplibre-gl-js#273

When using maplibre In a custom web component, the selection for the value doesn't work properly. The Active element in the shadow root isn't the input element itself. My recommendation would be to use the value of this._inputEl because there's already a reference to it.

The project depends on nanoid version 2.0.1 which is affected by CVE-2021-23566.

This is showing up in vulnerability scans of several packages that depend on yours. Would it be possible to update the dependency to nanoid >=3.1.31?

I've cloned the branch, updated the dependency to version ^3.2.0, and ran the tests and they're all passing so it should be a quick fix.

If you could share the npm version used by this project I'd be happy to open a PR to do the update, I'm asking this because I don't want to break your current lock files as a result of the update.

Is there any concerns with adding support for additional geocoding providers? Default would stay as it is, but we could wrap other services and give users an option to specify which provider/service they want to use, and the associated credentials to access that service.

A couple of examples:

https://github.com/smeijer/leaflet-geosearch
https://github.com/perliedman/leaflet-control-geocoder

When placing the Geocoder component inside a form, the form cannot be submitted using the Enter key. This issue arises because the clear button lacks a type="button" attribute, causing it to default to type="submit". Consequently, it is triggered during form submission and cancels the submission within the _clear function.

It seems that master branch is now named main here and https://github.com/maplibre/maplibre-gl-geocoder/blob/main/CONTRIBUTING.md#deploying still references master

When I am searching for some points, for example 'Paris'. It zooms in really far, more than I would like.

It seems like the geocoding result is a point, but still has a bbox property?

If so, I think it would be a good idea if specified by the user, to have the zoom option be able to override a feature's bbox

Does this package has typescript types?
Is it possible to add support for typescript?

Can i Search with MGRS coordinates in reverse geocode ?

and if it's posable how to implement it in react

Currently we don't run any tests in CI:

In the current situation, we might end up publishing something broken. I would recommend to run the tests right before npm publish and create a separate github actions workflow which runs the tests against all pull requests.

I had an error of TypeError: EventEmitter is not a constructor when I use it with vite.

I found the below stackoverflow,
https://stackoverflow.com/questions/69717406/typeerror-eventemitter-is-not-a-constructor-at-new-mapboxgeocoder

then, I found the following dependencies are necessary to use this geocoder.

npm i -D events @types/events @types/node

I am not sure how many people are using vite with this geocoder, but this dependencies info can be documented somewhere in the repo. I think vite is becoming more popular.

Here is what I did to make it works with nominatim:

let GeoApi = {
    forwardGeocode: async(config) => {
        const features = []
        console.log('features:', features)
        return new Promise(async(resolve) => {
            try {
                let request = "https://nominatim.openstreetmap.org/search?q=" + config.query + "&format=geojson&polygon_geojson=1&addressdetails=1"
                const response = await fetch(request);
                const geojson = await response.json();
                for (let feature of geojson.features) {
                    let center = [
                        feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2,
                        feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2
                    ];
                    let point = {
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: center
                        },
                        place_name: feature.properties.display_name,
                        properties: feature.properties,
                        text: feature.properties.display_name,
                        place_type: ["place"],
                        center: center
                    }
                    features.push(point)
                }
            } catch (e) {
                console.error(`Failed to forwardGeocode with error: ${e}`);
            }
            resolve({
                features: features,
            });
        });
    },
};

Enjoy !

In Mapbox, I need to use below urls for adding a Geocoder control to the map on an html page, so what is the equivalent urls for maplibr-gl-geocoder of below:

Noticed that when the zoom level is less than 9 the proximity value is automatically unset. There is a comment stating that if the user is looking at the whole world it doesn't make sense to set the proximity scale. While I agree with that in general it seems like this should either be configurable or the value should be set lower than 9

https://github.com/maplibre/maplibre-gl-geocoder/blob/main/lib/index.js#L747

I'm trying to copy the example code https://maplibre.org/maplibre-gl-js-docs/example/geocoder/

But adding a collapsible search box using:

map.addControl(
  new MaplibreGeocoder(geocoder_api, {
    maplibregl: maplibregl,
    collapsed: true
  })
);

But it does not work.

I can get it to work in jsfiddle but the example doesn't work as a simple HTML file. See attached.

collapsed.zip