Add Geolocation component

Geolocation

The Geolocation component uses the Geolocation API. This will cause the user's browser to ask for permission to access location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).

Component Properties

Prop name	Description	Default value	Example values
id	id of component	n/a
local_date	The local date and time that the device position was updated	datetime string	10/20/2020, 7:02:48 AM
timestamp	The Unix timestamp from when the position was updated
position	A dictionary with the following keys: `lat` latitude in degrees `lon` longitude in degrees `accuracy` of the lat/lon in meters When available: `alt` altitude in meters `alt_accuracy` in meters `heading` in degrees `speed` in meters per sec	n/a
update_now	Forces a one-time update to the position data. If set to `True` in a callback, the browser will update the position data and reset `update_now` back to False. This can, for example, be used to update the position with a button click or an interval timer.	False	True or False
high_accuracy	If true and if the device is able to provide a more accurate position,it will do so. Note that this can result in slower response times or increased power consumption (with a GPS chip on a mobile device for example). If false the device can take the liberty to save resources by responding more quickly and/or using less power.	False	True or False
maximum_age	The maximum age in milliseconds of a possible cached position that is acceptable to return. If set to 0,it means that the device cannot use a cached position and must attempt to retrieve the real current position. If set to Infinity the device must return a cached position regardless of its age.	0
timeout	The maximum length of time (in milliseconds) the device is allowed to take in order to return a position. The default value is Infinity, meaning that data will not be return until the position is available.	Infinity

Quickstart

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Button("Update Position", id="update_btn"),
        dcc.Geolocation(id="geolocation"),
        html.Div(id="text_position"),
    ]
)

@app.callback(Output("geolocation", "update_now"), Input("update_btn", "n_clicks"))
def update_now(click):
    return True if click and click > 0 else False

@app.callback(
    Output("text_position", "children"),
    Input("geolocation", "local_date"),
    Input("geolocation", "position"),
)
def display_output(date, pos):
    if pos:
        return html.P(
            f"As of {date} your location was: lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters",
        )
    else:
        return "No position data available"

if __name__ == "__main__":
    app.run_server(debug=True)

Demo app

To see a full demo, run dl_geolocation_demo.py. Note - it's a Dash Labs app :smiley_cat: Here is a preview:

plotly / dash-core-components

Add Geolocation component #962

Geolocation

Component Properties

Quickstart

Demo app