I have a huge dataset with geo-location and timestamps. My goal is to map this data on an interactive dashboard where it's possible to choose the timeframe that a user wants to map. I started doing this in Plotly Dash, and I saw most of the tutorials with Mapbox, but given it's limits in the free package, it is out of the question.
Is there some other (100% free) way to still interactively map this timeseries data using Dash?
I tried converting the dataset into geojson file and adding a geojson layer, but it still didn't show the data on the map. Combining different callback options from some online tutorials also didn't result with the data showed on map but simply an empty map (left as comments in the code snippet below).
Apart from this, I chose date range picker, but given the timestamp data, I would prefer to have the date picker available in detail (DD/MM/YYYY HH:MM:SS) on the dashboard (based on the data timestamps), though I am not sure if that's even possible.
Does some have a suggestion on how to solve this?
Below I share a small part of the data:
timestamp id lat lon mode geometry
0 2022-04-01 13:48:38 15 52.5170365 13.3888599 AUTO POINT (52.5170365 13.3888599)
1 2022-04-01 13:48:40 15 52.5170365 13.3888599 AUTO POINT (52.5170365 13.3888599)
2 2022-04-01 13:48:42 15 52.5170365 13.3888599 AUTO POINT (52.5170365 13.3888599)
3 2022-04-01 13:49:18 15 52.5170375 13.3888605 AUTO POINT (52.5170375 13.3888605)
4 2022-04-01 13:49:34 15 52.5170375 13.3888605 AUTO POINT (52.5170375 13.3888605)
5 2022-04-01 13:49:52 15 52.5170375 13.3888605 AUTO POINT (52.5170375 13.3888605)
6 2022-04-01 13:50:10 15 52.5170385 13.3888609 AUTO POINT (52.5170385 13.3888609)
7 2022-04-01 13:50:46 15 52.5170385 13.3888609 AUTO POINT (52.5170385 13.3888609)
8 2022-04-01 13:51:24 15 52.5170395 13.3888614 AUTO POINT (52.5170395 13.3888614)
9 2022-04-01 13:51:46 15 52.5170395 13.3888614 AUTO POINT (52.5170395 13.3888614)
..and also the code I wrote for the map:
import dash
import dash_daq as daq
from dash import dcc, html, Input, Output
from pandas_datareader import data as web
from datetime import datetime as dt
from datetime import date
import dash_leaflet as dl
import dash_leaflet.express as dlx
from jupyter_dash import JupyterDash
import plotly.express as px
import plotly.graph_objects as go
import json
min_date='01/04/2022'
max_date=dt.today()
#gdf = #the data showed above
geojson = json.loads(gdf.to_json())
# Build the dashboard
app = JupyterDash(__name__)
app.layout = html.Div([
html.H2('Dashboard', style={'text-align':'center', 'font-family': 'sans-serif'}),
dcc.DatePickerRange(
id='date-picker-range',
min_date_allowed=min_date,
max_date_allowed=max_date,
initial_visible_month=dt(dt.today().year, 4, 1).date(),
start_date=dt(2022, 4, 1).date(),
end_date=dt.today(),
show_outside_days=True,
day_size=32,
display_format='DD/MM/YYYY',
clearable=True,
style={'text-align':'center', 'width': '100%', 'height': '60px', 'font-size': '10'}),
#dcc.Graph(id='my-graph', figure=fig),
dl.Map([
dl.TileLayer(maxZoom=20)
#dl.GeoJSON(data=geojson)
],
id='map',
center=[52.517, 13.388],
zoom=14.5,
style={'width': '400px', 'height': '400px', 'margin': "auto", "display": "block"})
])
#@app.callback(
# Output("map", "figure"),
# [Input('date-picker-range', 'start_date'),
# Input('date-picker-range', 'end_date')])
if __name__ == '__main__':
app.run_server(mode="external", debug=True)