Allow custom styling and positioning of the GeolocateControl button

[swiss-chris]

User Story

As a developer, I can create, style and position my own GeolocateControl button, so that I can harmonize the look and feel with other custom buttons on the map.

Rationale

We provide a custom map for multiple software teams and this map comes with our own, custom styled buttons/controls in the top right corner of the map. We would like to offer the possibility of displaying a GeolocateControl button in our map as well, but I haven't found a way to implement my own styling and position of this button. Is there a way to do it, and if not, could you provide an API so that we could build and position our own button and redirect its click events to this API ?

Impact

Currently, the best solution I could find is to place the button apart from the other buttons in the top left of the map, which breaks the look and feel of the map. The button looks different and is far away from the other buttons. I can't place it on the bottom right because it would overlap with our copyright links.

[HarelM]

Seems like a duplicate of the following discussion (that was converted from an issue):
#2960

You can use regular css to style the button.
You are welcome to propose API changes in order to allow better styling of the position marker.
You can easily create a custom control and style it however you like, the geolocation control shipped with this library can help if you need some info on how to get the position etc...

[swiss-chris]

Hi @HarelM

Thanks for your response.

Simply styling the button you provide won't help me. On the one hand, it will be easier/more consistent and maintainable to create our own button together with our other custom buttons, and on the other hand, our buttons are stacked dynamically below each other. Depending on how many buttons we show, the location button would be lower or higher in the list of buttons (on the top right of the map).

The solution I'm looking for looks like this:

• We can create our own button and position it with our other buttons. When we show it on the map, the map behaves as if we had added a GeolocateControl to the map.
  • When the user clicks on our button, the map behaves the same as if the user had clicked on the GeolocateControl button (they see their current location on the map, assuming the browser supports it)
  • When the user clicks on our button a second time, the map behaves the same as if the user had clicked on the GeolocateControl button a second time (they no longer see their current location on the map).

If this is not a feature you want to offer, could you perhaps help me understand how I could build this myself, without needing to change the MapLibre code myself (i.e. without needing to create a PR against your repo) ?

[HarelM]

You can create a custom control, and have it displayed and work however you see fit.
You can implement the IControl interface and use map.addControl(yourControl).
The discussion that I linked has both links to the code of the location control provided by this library as well as a custom location control I implemented for my app using angular and capacitor.
Feel free to poke there.

[swiss-chris]

I opened a new issue with a better suggestion: #3103