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')
2 Likes
8

works great. Can this be done only with dash(without leaflet)?

9

I posted a solution here:

1 Like
10

Hi aash, I’ve tried this example but, albeit showing the map (twice ?) the coordinates don’t show. The ‘-’ remains regardless where you click on the map.
It said that jupyter_dash should be Dash so updating that bit did not much.

I tried this but don’t get any updated map coordinates

from dash import Dash, html, dcc, Input, Output, callback
import dash_leaflet as dl

app = Dash(__name__)


MAP_ID = "map-id"
BASE_LAYER_ID = "base-layer-id"

app.layout = html.Div([

    html.H1("Click on the map to get coords"),
    dl.Map(id=MAP_ID, style={'width': '600px', 'height': '500px'}, center=[-25.1, 131], zoom=4, children=[
        dl.TileLayer()
        ]),
    html.P("Coordinate (click on map):"),
    html.Div(id=COORDINATE_CLICK_ID),


])

@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 "-"

if __name__ == '__main__':
    app.run(debug=True)

cheers from down under

11

As part of the (breaking) 1.0.0 release, the on click property was renamed to clickData (from click_lat_lng) to align more closely with core Plotly components.

https://www.dash-leaflet.com/components/map_container

12

A post was split to a new topic: Obtaining clickData (lat, lon) on maps