added dcc.Geolocation component

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []

CHANGELOG.md

@@ -73,6 +73,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
+- [#2349](https://github.com/plotly/dash/pull/2349) Added new `dcc.Geolocation` component
 - [#2261](https://github.com/plotly/dash/pull/2261) Added new `placeholder_text` property to `filterOptions` for DataTable which allows overriding the default filter field placeholder.
 
 ### Updated

components/dash-core-components/src/components/Geolocation.react.js

@@ -0,0 +1,190 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * The CurrentLocation component gets geolocation of the device from the web browser. See more info here:
+ * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
+ */
+
+export default class Geolocation extends Component {
+ constructor(props) {
+ super(props);
+ this.success = this.success.bind(this);
+ this.error = this.error.bind(this);
+ }
+ updatePosition() {
+ if (this.props.update_now) {
+ this.props.setProps({
+ update_now: false,
+ });
+ }
+ if (!navigator.geolocation) {
+ this.error({
+ code: 999,
+ message: 'Your browser does not support Geolocation',
+ });
+ } else {
+ const positionOptions = {
+ enableHighAccuracy: this.props.high_accuracy,
+ maximumAge: this.props.maximum_age,
+ timeout: this.props.timeout,
+ };
+
+ navigator.geolocation.getCurrentPosition(
+ this.success,
+ this.error,
+ positionOptions
+ );
+ }
+ }
+
+ componentDidMount() {
+ this.updatePosition();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.update_now ||
+ prevProps.maximum_age !== this.props.maximum_age ||
+ prevProps.timeout !== this.props.timeout ||
+ prevProps.high_accuracy !== this.props.high_accuracy
+ ) {
+ this.updatePosition();
+ }
+ }
+
+ success(pos) {
+ const crd = pos.coords;
+ const position_obj = {
+ lat: crd.latitude ?? null,
+ lon: crd.longitude ?? null,
+ accuracy: crd.accuracy ?? null,
+ alt: crd.altitude ?? null,
+ alt_accuracy: crd.altitudeAccuracy ?? null,
+ speed: crd.speed ?? null,
+ heading: crd.heading ?? null,
+ };
+
+ this.props.setProps({
+ local_date: new Date(pos.timestamp).toLocaleString(),
+ timestamp: pos.timestamp,
+ position: position_obj,
+ position_error: null,
+ });
+ }
+
+ error(err) {
+ if (this.props.show_alert) {
+ alert(`ERROR(${err.code}): ${err.message}`);
+ }
+ this.props.setProps({
+ position: null,
+ position_error: {
+ code: err.code,
+ message: err.message,
+ },
+ });
+ }
+
+ render() {
+ return null;
+ }
+}
+
+Geolocation.defaultProps = {
+ update_now: false,
+ high_accuracy: false,
+ position_error: null,
+ maximum_age: 0,
+ timeout: Infinity,
+ show_alert: false,
+};
+
+Geolocation.propTypes = {
+ /**
+ * The ID used to identify this component in Dash callbacks.
+ */
+ id: PropTypes.string,
+
+ /**
+ * The local date and time when the device position was updated.
+ * Format: MM/DD/YYYY, hh:mm:ss p where p is AM or PM
+ */
+ local_date: PropTypes.string,
+
+ /**
+ * The Unix timestamp from when the position was updated
+ */
+ timestamp: PropTypes.number,
+
+ /**
+ * The position of the device. `lat`, `lon`, and `accuracy` will always be returned. The other data will be included
+ * when available, otherwise it will be NaN.
+ *
+ * `lat` is latitude in degrees.
+ * `lon` is longitude in degrees.
+ * `accuracy` is the accuracy of the lat/lon in meters. *
+ *
+ * `alt` is altitude above mean sea level in meters.
+ * `alt_accuracy` is the accuracy of the altitude in meters.
+ * `heading` is the compass heading in degrees.
+ * `speed` is the speed in meters per second.
+ *
+ */
+ position: PropTypes.shape({
+ lat: PropTypes.number,
+ lon: PropTypes.number,
+ accuracy: PropTypes.number,
+ alt: PropTypes.number,
+ alt_accuracy: PropTypes.number,
+ heading: PropTypes.number,
+ speed: PropTypes.number,
+ }),
+
+ /**
+ * Position error
+ */
+ position_error: PropTypes.shape({
+ code: PropTypes.number,
+ message: PropTypes.string,
+ }),
+
+ /**
+ * If true, error messages will be displayed as an alert
+ */
+ show_alert: PropTypes.bool,
+
+ /**
+ * Forces a one-time update of 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 or an interval timer.
+ */
+ update_now: PropTypes.bool,
+
+ /**
+ * 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 default value), the device can save resources by
+ * responding more quickly and/or using less power.
+ */
+ high_accuracy: PropTypes.bool,
+
+ /**
+ * 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. Default: 0.
+ */
+ maximum_age: PropTypes.number,
+
+ /**
+ * 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.
+ */
+ timeout: PropTypes.number,
+
+ /**
+ * Dash-assigned callback that should be called to report property changes
+ * to Dash, to make them available for callbacks.
+ */
+ setProps: PropTypes.func,
+};

components/dash-core-components/src/index.js

@@ -7,6 +7,7 @@ import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle.react';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown.react';
+import Geolocation from './components/Geolocation.react';
 import Graph from './components/Graph.react';
 import Input from './components/Input.react';
 import Interval from './components/Interval.react';
@@ -37,6 +38,7 @@ export {
  DatePickerSingle,
  Download,
  Dropdown,
+ Geolocation,
  Graph,
  Input,
  Interval,

components/dash-core-components/tests/integration/geolocation/test_geolocation.py

@@ -0,0 +1,46 @@
+import time
+import os
+import pytest
+from dash import Dash, dcc, html, Input, Output
+
+
+@pytest.mark.skipif(
+ os.getenv("CIRCLECI") is not None, reason="geolocation is disabled on CI"
+)
+def test_geol001_position(dash_dcc):
+ dash_dcc.driver.execute_cdp_cmd(
+ "Emulation.setGeolocationOverride",
+ {"latitude": 45.527, "longitude": -73.5968, "accuracy": 100},
+ )
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ dcc.Geolocation(id="geolocation"),
+ html.Div(id="text_position"),
+ ]
+ )
+
+ @app.callback(
+ Output("text_position", "children"),
+ Input("geolocation", "position"),
+ Input("geolocation", "position_error"),
+ )
+ def display_output(pos, err):
+ if err:
+ return f"Error {err['code']} : {err['message']}"
+ if pos:
+ return (
+ f"lat {pos['lat']},lon {pos['lon']}, accuracy {pos['accuracy']} meters"
+ )
+ return "No position data available"
+
+ dash_dcc.start_server(app)
+
+ time.sleep(1)
+
+ dash_dcc.wait_for_text_to_equal(
+ "#text_position", "lat 45.527,lon -73.5968, accuracy 100 meters"
+ )
+
+ assert dash_dcc.get_logs() == []