Get Lat long from Maps on mouse click, python dash

Dash Python
1

I want to get the lat lon values from map anywhere when i click.
I can only get the Data point lat lon values using clickData.
Is there any way to capture or store lat lon values by clicking anywhere on the maps??

2 Likes
2

Hey @rishabhjain,

Maybe you can try to attach the output of a callback to the children of an empty div.

and display the coordinates with :

 str(figure['layout'].update(dict(mapbox = dict(center = dict (lat = relayoutData['mapbox.center']['lat'], lon = relayoutData['mapbox.center']['lon'] ), zoom = relayoutData["mapbox.zoom"]))))

I know I was able to get the coordinates of my mouse when I was hovering the map with this formula. The aim was to avoid to zoom in/out everytime I was hovering on a new data point

3

Any news did you find a solution
i am facing the same problem and i can’t find one

4

Hi, you can use visdcc.Run_js to write your own javascript event listener and capture the values. :slightly_smiling_face:
here is the example code https://github.com/jimmybow/visdcc/blob/master/example/Run_js/Add_event_and_callback.py

5

do you have any example about using Visdcc with scattermapbox ?

6

In Dash Leaflet, you can get the mouse click events (which contains lat, lon information). See e.g. example 1 here,

1 Like
7

Based on @Emil 's example (which is not available anymore in github), here’s a full example without mapbox

I’m using JupyterDash within Jupyter Notebook, which you can replace with Dash

from jupyter_dash import JupyterDash

import json
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_leaflet as dl
# import settings

from dash.dependencies import Output, Input

MAP_ID = "map-id"
COORDINATE_CLICK_ID = "coordinate-click-id"

# app = dash.Dash(__name__, external_scripts=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
app = JupyterDash(__name__, external_scripts=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

# Create layout.
app.layout = html.Div([
    html.H1("Example: Gettings coordinates from click"),
    dl.Map(id=MAP_ID, style={'width': '1000px', 'height': '500px'}, center=[32.7, -96.8], zoom=5, children=[
        dl.TileLayer()
        ]),
    html.P("Coordinate (click on map):"),
    html.Div(id=COORDINATE_CLICK_ID)

])

@app.callback(Output(COORDINATE_CLICK_ID, 'children'),
              [Input(MAP_ID, 'click_lat_lng')])
def click_coord(e):
    if e is not None:
        return json.dumps(e)
    else:
        return "-"


# app.run_server(host='127.0.0.1', port=8081, debug=True) 
app.run_server(host='127.0.0.1', port=8080, debug=True, mode='inline')
1 Like