[FEATURE] Show results above the search bar

[dabreegster]

Is your feature request related to a problem? Please describe. I have a map where the top bar can expand or shrink. I've placed the geocoder widget in a fixed position that's usually beneath this bar, but it's quite awkward to use:

Describe the solution you'd like I'd like a new option to render the results above the search bar. This would allow a better placement near the bottom of the screen. Skimming through the Svelte compnent, the ul would then appear above <div class="input-group">.

Describe alternatives you've considered I've also thought about always placing the geocoding control directly beneath my app's top bar, but if it also jumped around as that bar expands/collapses, that might be disorienting.

[zdila]

I am not sure if I understand you correctly. Do you want an option to display dropdown menu above the search input box? Like this?

This should be achievable by adding the following style:

maplibregl-ctrl-geocoder ul {
  top: auto;
  bottom: calc(100% + 6px);
}

[petr-hajek]

@dabreegster Hey, Dustin, thanks for reaching out! If I understand correctly what you want to achieve, you can actually do it easily by calling map.addControl(gc, "bottom-right"); It'll then add the control to the bottom corner and have the results displayed above the search box without any extra CSS work. The code I mentioned will work with MapTiler SDK or Maplibre, it might be slightly different in case you use different library. Let us know if it solved your issue so we can close this, thanks!

[dabreegster]

Hi both, thanks for the tips and sorry for the slow response! My current attempt is at https://github.com/acteng/atip/blob/nobuild_geocode_position/src/lib/common/Geocoder.svelte, following https://docs.maptiler.com/svelte/maplibre-gl-js/geocoding-control/.

I can't get the CSS override approach to work with the Svelte component, because nothing with the maplibregl-ctrl-geocoder class name gets created. It's a bit tricky to select the component in Firefox inspector (if you click the results element to focus in inspector, it closes the element), but you can see the class name is autogenerated by Svelte, due to how scoped CSS works:

map.addControl(gc, "bottom-right") isn't possible directly through the Svelte layer. I might try dropping down and using https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/maplibre-gl-js/ directly; the Svelte control adds indirection and I'm having some trouble tracing through how some of the config works.

[zdila]

@dabreegster I see you already use div wrapped which you position with style. You can keep using this approach.

Or you can implement it as in https://github.com/maptiler/maptiler-geocoding-control/blob/main/examples/maptiler-sdk/AppMapTilerSdk.svelte

@petr-hajek Using it as a Svelte component directly in Svelte app may bring some optimizations, but they are negligible.

[petr-hajek]

@dabreegster never mind my (deleted) comment, only now I had a look at your code

@zdila I believe what we are missing is an easy way how to define position when using createMapLibreGlMapController - something like in https://svelte-maplibre.vercel.app/examples/controls - possibly there will be more people using this library trying to add maptiler-geocoding-control as Svelte component