Embed Marine Traffic

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!

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

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

This worked great and looks fantastic, thanks!

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.