Moving symbols on map

Dash Python
1

Hey guys,

I have been using plotly and to a lesser extent dash for a few years now in Python for data science and love it.

I now need to make a web GUI which involves tracking moving points on a map. Basically there would be 6 dots and there locations would be updated in real time over a map. Additionally when one clicks on the dots, it should open an HTML div which can include well formatted hyperlinks to get more info about the dot.

My questions are:

  1. How do I manage the moving dots. All the demos are for stationary data. One option would be to use flask to continuously feed the data to the frontend, but then the map would reload every instant which might be slow. Is there a recommended way of doing something like this?
  2. How can I make a nicely formatted window appear when I click over one of the dots? At the very least it should have ability to have links, but ideally it could be a fully customizable html div (e.g. can have images, etc…).

I am pretty new to web development (background in math), so any help would be appreciated!

Thanks,
Roman

2

The Dash Leaflet component might suit your needs,

With this component, i guess you could

  1. Add a number of dots (using the Marker component). Add a callback (triggered by an Interval component) that updates the position attribute of the Marker(s).

  2. You can add a tool tip and/or a popup to the Marker(s). The latter supports full html, i.e. images etc.

Here is an example of how to create a such marker,