MaplibreGeocoder allows you to search for places on a MapLibre map. I’ve added it to this map so that if you search e.g. “York” you’ll get several possible answers, and by default the map is scaled so that they all fit on screen. When you click on one it zooms in to show the selected POI.
The challenge is that for point POIs “zoom in” is by default to the maximum zoom supported by the map. If you search for “The Mended Drum” (of which there is only one in OSM) you’ll see the problem.
If I change the search control creation code from
searchControl = new MaplibreGeocoder( geocoderApi, { maplibregl: maplibregl });
I can change the “fly to zoom” to whatever I set that variable to. The problem is that it applies not just when you’ve got the final POI selected, it also applies when you’re showing multiple POIs in widely separated places; it doesn’t calculate the zoom to keep them all on screen. Is there a way to do that?
For completeness, the code README is here, and that links to “documentation” here, but alas that doesn’t contain any usage information. My guessing that this bit of code might be relevant. My code is here.
I think that’s what this documentation page is trying to say; but it does not match what the code actually does in a couple of areas:
" when a bbox isn’t found in the response" is untrue; there is code to explicitly treat results as centroids and find a bbox that covers them, and this is true for single result areas too - the centroid is obtained and a “max zoom” that would show that calculated (always the map’s max zoom)
“Default: 16” is likewise not true.
One other thing that doesn’t work is that the “map max zoom” is still used before a single result is selected. Search for “Mended Drum” here and it’ll initially zoom in to 25 (the map max zoom) and will only zoom back out to 15 (the selected “zoom” value) when the single result is selected from the list of one.
Edit “Default: 16 is likewise not true.” is slightly misleading above as it is used after selecting an item from the search list. It isn’t used before (when the search list is created, or if you don’t select anything).
No, as described above I’ve just edited the text of the .js . Re the readme I do not have npm installed and nether want nor need to install it to test and run js functionality on a website. Re the contributing file I have no idea what nvm even is and I have no wish to find out.
I’m also not convinced that what I’ve done is the “best fix” or even a very good one - manipulating the map max zoom on the fly is surely not the best fix to the problem.
Presumably there is a way of controlling directly how the map moves. How that is done is undocumented in any of the code I have seen. There are (uncalled during my testing) references to “flyto” in the geocoder code**, but no documentation of parameters used and why. I can also see https://maplibre.org/maplibre-gl-js/docs/examples/fly-to-a-location/ (which isn’t helpful - it is just some code and doesn’t explain why it does what it does or how to make it do anything differently). There is also https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto, but that just lists the parameters in the code; it’s not really documentation at all.
Hence the reason for documenting what I have done to work around the issue here, in the hope that it will help someone else.
** but because the map move is event driven I’ve no idea if this is even what I should be looking for!