Marine traffic map as card

Configuration Frontend
1

Hello all

I am new in this but hopefully somone can help me. What I want to do is having a card that shows map from https://www.marinetraffic.com/ so I can track a certain ship. The card must update automatically. Is this something I can do?

I searched the forum and found a post where someone said it is possible to embed map from marine traffic (see Embed Map - How to Embed the Map | AIS Marine Traffic ). However, I am not sure how to do this.

2

i see web page card do not work with https://www.marinetraffic.com/
u can try add an html page to <config-directory>/www folder and reference them using /local/<file> .
Webpage Card - Home Assistant

here the code of your html.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
      <script type="text/javascript" src="http://www.marinetraffic.com/js/embed.js">
      </script>    
    </body>
</html>

i don’t know if it will work

3

As an iframe Marinetraffic.com - #9 by nickrout

2 Likes
4

Okay I am probably doing something really stupid because I dont get it to work.

I saved this in the config folder:

Screenshot 2021-09-27 at 09.46.23
Screenshot 2021-09-27 at 09.46.231446×728 47.8 KB

Then I made this Webpage card:

Screenshot 2021-09-27 at 09.47.44
Screenshot 2021-09-27 at 09.47.441912×766 78.3 KB

But all I get is a blank card…

5

Use the html nickrout suggested :wink:

6

Now it looks like this:

Screenshot 2021-09-27 at 15.59.13
Screenshot 2021-09-27 at 15.59.131522×954 90.6 KB

Screenshot 2021-09-27 at 16.01.02
Screenshot 2021-09-27 at 16.01.021954×734 81 KB

Still not seeing the page. I also tried to include the Italic sentences in @nickrout html suggestion.

As I said, this is my first post, so I’m probably missing something.

Thanks in advance!

7

I didn’t use a webcard, I used the iframe integration iframe Panel - Home Assistant

Other than that I will check my settings as they may have changed since I posted that solution.

1 Like
8

Yeah I also tried the iframe Panel with no luck… :confused:

9

Are you using HA in https?
If so, you must replace the js url by https://www.marinetraffic.com/js/embed.js in the html (cannot mix http and https on the same page)

2 Likes
10

I have been looking at the same thing. Based on nickrout’s previous example, this is working for me:

  1. Inside HA on a web card
  2. As a panel (along the side)
  3. As a stand-alone file in a browser - good for configuring the parameters
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Embedded AIS</title>
</head>

<body>
  <script type="text/javascript">
    width='1000';       // the width of the embedded map in pixels or percentage
    height='1000';      // the height of the embedded map in pixels or percentage
    border='1';     // the width of the border around the map (zero means no border)
    shownames='false';  // to display ship names on the map (true or false)
    latitude='25.5';    // the latitude of the center of the map, in decimal degrees
    longitude='-79.550';    // the longitude of the center of the map, in decimal degrees
    zoom='5';       // the zoom level of the map (values between 2 and 17)
    maptype='1';        // use 0 for Normal Map, 1 for Satellite
    trackvessel='0';    // MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option
    fleet='';       // the registered email address of a user defined fleet (user's default fleet is used) - overrides "zoom" option
    </script>
   <script type="text/javascript" src="http://www.marinetraffic.com/js/embed.js"></script>
</body>
</html>

Panel via configuration.yaml

panel_iframe:
  aistracker:
    title: "AIS Marine"
    url: "/local/marine-gulf-stream.html"
    icon: mdi:ferry

Web Card:

type: iframe
url: /local/marine-gulf-stream.html
aspect_ratio: 100%

Question: What does it take to get Home Assistant to act on an edit to the html file? Much of my troubleshooting time was spent trying to get the javascript edits to be picked up by HA.

11

I write custon event logs to a text file and this was the best solution I found to allow the file to update on each page load. Substitute your URL as necessary.

<html>
    <head>
        <script>
function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

</script>
    </head>
    <body>
        <script>document.write(httpGet("/local/logs/event_log.txt?" + Date.now()));</script>
    </body>
</html>

The date.now part makes each page load think that this is a different file so it forces a fresh relaod of the content. This may not work if your URL is also using parameters (the part after the ?) to pull specific information. Of course with a little creative programming you could make it work. Hope this helps.

1 Like
12

Great, that worked! Many thank!

1 Like