How to integrate VesselFinder maps into a python dashboard?

Dash Python
1

I’m trying to integrate in a dashboard a map generated by VesselFinder site to visualize and track the movements of ships.

The VesselFinder site provides the javascript snippet to display the map on an html page:

<script type="text/javascript">
    // Map appearance
    var width="20%";         // width in pixels or percentage
    var height="100";         // height in pixels
    var names=true;           // always show ship names (defaults to false)

    // Single ship tracking
    var imo="9227429";        // display latest position (by IMO, overrides MMSI)
    var show_track=true;      // display track line (last 24 hours)
</script>
<script type="text/javascript" src="https://www.vesselfinder.com/aismap.js"></script>

As much as I tried however to create a js file putting it in the assets folder, I was not able to see the map on my dashboard. Do you have any suggestions?

Thanks in advance
Lukesky1971

2

Hi all,
I’ve find a possible solution and I share here it.
I’ve been able to embed the map in the dashboard using IFrame.

Here is the code:

html.Iframe(src="https://www.vesselfinder.com/aismap?imo=9465538",
            style={"height": "350px", "width": "100%"}

Now I’ve only to resolve the problem to update it in order to track ship movements.
If you have any idea fell free to post it here

Lukesky1971

3

Just a quick and dirty code (I also don’t know how often the map updates) but what about making an interval callback with the output being the src of the iframe?

from dash import Dash, html, dcc, Output, Input

app = Dash(__name__)

graphs = html.Iframe(id='ship_map', 
            src="https://www.vesselfinder.com/aismap?imo=9465538",
            style={"height": "350px", "width": "100%"})


app.layout = html.Div([
    dcc.Interval(id='interval'),
    graphs
])

@app.callback(
    Output("ship_map", 'src'),
    Input("interval", 'n_intervals'),
)
def title_date(interval):
    print(interval)
    return 'https://www.vesselfinder.com/aismap?imo=9465538'


if __name__ == "__main__":
    app.run_server(debug=True)

You could also reload the entire iframe within the layout, might be taxing performance wise…food for thought.

1 Like