Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Add Geolocation component #962

Closed
wants to merge 9 commits into from
Closed

Conversation

AnnMarieW
Copy link
Contributor

@AnnMarieW AnnMarieW commented May 3, 2021

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 😺
Here is a preview:

image


updatePosition() {
if (!navigator.geolocation) {
alert('Your browser does not support Geolocation');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we reuse this.error here? Something like

this.error({
    code: 'N/A',
    message: 'Your browser does not support Geolocation'
})

That way (a) we respect props.show_alert, and (b) props.position_error reflects this status.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, yes - that's much better. I made the change and it works great.

alt: crd.altitude,
alt_accuracy: crd.altitudeAccuracy,
speed: crd.speed,
heading: crd.heading,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there anything in pos.coords that we don't want in position_obj? If not, we can just use pos.coords directly. Unless the goal is to ensure that when there's always an entry for each item by the time this gets to Python, but if we pass an undefined to JSON.stringify it'll be deleted anyway, so if we want that we'll have to do something like speed: crd.speed ?? null (that's the null coalescing operator)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to have everything from pos.coords available. The only advantage I see of doing it this way is to rename the props. lat and lon are much easier to type than latitude and longitude

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, I didn’t notice the name changes, you have it right. Then perhaps just the null fallback for items that may be missing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok added the null fallback

@AnnMarieW
Copy link
Contributor Author

Moved to dash [PR #2349] (plotly/dash#2349)

@AnnMarieW AnnMarieW closed this Dec 2, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants