Dynamic URL in iframe in UI template

[Erwin Kooi]

Hej! Does anyone know if it is possible to render an iframe in a Node-Red UI template node with a dynamic url?

What I try to do: Get a map with locator based on the coordinates my phone transmits via OwnTracks -> MQTT -> MyBroker -> Node-Red UI.

I have constructed the correct url for OpenStreetMaps using the reported coordinates: 

msg.payload.url  = "http://www.openstreetmap.org/export/embed.html?bbox=" + Number(msg.payload.lon - 0.02).toFixed(4) + "," + Number(msg.payload.lat - 0.02).toFixed(4) + "," + Number(msg.payload.lon + 0.02).toFixed(4) + "," +  Number(msg.payload.lat + 0.02).toFixed(4) + "&layer=mapnik&marker=" + msg.payload.lat + "," + msg.payload.lon;

Dropping this url in a browser renders the expected result.

When I try to use this msg.payload.url in a UI template node in an iframe src={{msg.payload.url}}, the dashboard complains it cannot find the url  /ui/{{msg.payload.url}}.

When I construct the entire iframe code in a function node 

msg.payload.iframe = "<iframe width=300 height=300 frameborder=0 scrolling=no marginheight=0 marginwidth=0 src=" + msg.payload.url + " style={border: 1px solid black}></iframe>";

and do a 

<div ng-bind-html="msg.payload.iframe"></div>

Nothing is shown. 

If I print the iframe code using a text UI node and copy-paste that text into a temporary index.html on my desktop and open that with a browser, everything works as expected.

I have really no clues left...

[Julian Knight]

Not sure of the answer on this but I'm wondering if it wouldn't be easier to use the Leaflet library?

[Erwin Kooi]

Thnx! Researching...

[Dave C-J]

Or see if node-red-contrib-web-worldmap helps

[Julian Knight]

Sorry Dave, I forgot your excellent node! :)