Add Geolocation component

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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

[AnnMarieW]

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

importdashfromdash.dependenciesimportInput, Outputimportdash_html_componentsashtmlapp=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"))defupdate_now(click):
returnTrueifclickandclick>0elseFalse@app.callback(Output("text_position", "children"),Input("geolocation", "local_date"),Input("geolocation", "position"),)defdisplay_output(date, pos):
ifpos:
returnhtml.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:

[alexcjohnson]

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.

[AnnMarieW]

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

[alexcjohnson]

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)

[AnnMarieW]

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

[alexcjohnson]

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.

[AnnMarieW]

Ok added the null fallback

[AnnMarieW]

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