Geolocatos button shape

[AdrianCiges]

Hi all;

I’m developing a code to plot some locations and, first of all, I need to locate the user. I am using this code, which works very well:

loc_button = Button(label=“Mi ubicación”)
loc_button.js_on_event(“button_click”, CustomJS(code=“”"
navigator.geolocation.getCurrentPosition(
(loc) => {
document.dispatchEvent(new CustomEvent(“GET_LOCATION”, {detail: {lat: loc.coords.latitude, lon: loc.coords.longitude}}))
}
)
“”"))
result = streamlit_bokeh_events(
loc_button,
events=“GET_LOCATION”,
key=“get_location”,
refresh_on_update=False,
override_height=75,
debounce_time=0)

if result:
if “GET_LOCATION” in result:
st.write(f"Tu ubicación es: {result.get(‘GET_LOCATION’)}")
ubi = result.get(“GET_LOCATION”)

The proble is that the button shape looks very messy and I’m not founding the way to change it. Can you help me?

[Charly_Wargnier]

Hi @AdrianCiges,

Have you tried customizing the appearance of the Bokeh button by adjusting its properties? For example:

loc_button = Button(label="Mi ubicación", width=150, height=50, button_type="success")

Best,
Charly

[AdrianCiges]

Hi Charly, thanks for this but I’ve tried and anything have changed

[Charly_Wargnier]

I’m not very familiar with Bokeh, but it seems you might need to use inline CSS for styling and padding.

If Bokeh isn’t essential for your project, you might want to explore more versatile options like Folium. Check out these resources:

• Streamlit with Folium on GitHub
• Folium on Streamlit

I hope this helps.

Best,
Charly