Embed Javascript

Anvil Q&A
1

Hi,

Any suggestions on how I would could embed the single ship map from here: Embed VesselFinder map into your website - VesselFinder into part of an Anvil form?

Something like this:
Anvil Form headline
Embedded single ship map
Anvil form components

I have tried to embed this code into a Custom HTML form, but I don’t know how to render it.
I tried the iFrame example and that works, but I can’t figure out how to implement it in my own app as I can’t call the script?

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

    // Single ship tracking
    var imo="9506291";        // 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>
2

How did you try to put it into a Custom HTML form? The only difference between an HTML Form and normal forms is that you specify the html directly so that shouldn’t be a problem: are you getting some error or something?

Could you share a clone link so we can see the context more clearly?

3

looking at the source code they use document.write so you’d have to put this code in your native libraries since document.write should only be used on load.
But it’s also strongly discouraged:

If we look at the javascript inside the src file
at the end of the src file there’s an iframe that’s created
we can take the output, pass it to chat gpt and ask it to turn it into some usable code
with a bit of mangling we can make it work with anvil as an mvp

1 Like
4

Hi!

I tried your example here: Anvil | Login

I get this error

KeyError: vesselfinder

  • at Vessel_info, line 62

How should I recreate the app?
This is what I did:

  • Created a form
  • Copy/pasted your code
  • Turned the form into a custom component
  • Inserted it in Form 1
5

you also need to look at the html inside of the custom component and paste that in

6

Of course, thanks! Now it works.