Embed Marine Traffic

App Building
, ,
1

I am attempting to import the Marine Traffic site into my app via an IFrame or custom component system. Although when I do, I only get the web page's background as a response or no response at all.

Marine Traffic can be found here:

It is this style of interactive map I would like to use. Marine Traffic also supply an embed page, although I get the same blank response when I use this method:

Any way to fix this or suggest other ways to embed the page would be great, thanks!

2

Hello @OwainB,
Please could you share a JSON App export of what you currently have?
This will give us more context to the issue

3

It looks like the script at https://www.marinetraffic.com/js/embed.js mainly serves to generate the src (and some other settings) for an iframe. You might be able to use that directly with the iframe component itself. The attached app runs the portion of the script that generates the src but you can also try using one of the following URLs:

https://www.marinetraffic.com/en/ais/embed/zoom:3/centery:36/centerx:23/maptype:4/shownames:false/mmsi:0/shipid:0/fleet:/fleet_id:/vtypes:/showmenu:/remember:false

https://www.marinetraffic.com/en/ais/customembed/mmsi:0/mtembedcode:YOUR_EMBED_CODE_HERE

Just make sure Storage and cookies is enabled for the component!

Hopefully that helps :slightly_smiling_face:
marinetraffic_embed.json

1 Like
4

This worked great and looks fantastic, thanks!

5

Hello,
Thanks for the URLs, these are working and display the map. But how can you make the page interactive so that filters, and searches work? Currently when searching for a specific vessel the iframe just showing a blank page and there is no option to navigate to the map again.
Thanks.

6

Hi @SanderL,

Could you share an export of your app? It might help to see a screen recording of this behavior

7

Hi Tess,

Please find attached app.json.
The page goes blank when filtering on a specific vessel.

Thanks.
TEST MAP.json (40.6 KB)

9

Do you have an example that is working outside of Retool, but not in Retool? I was able to get a "nothing to sea here" error, but that seemed like the expected response based on the url I tried (I haven't used this marine traffic service before, so not 100% sure about the url formatting)