Leaflet.js map not showing up with HTMLViewer

Targets Web
1

Hello all.

Xojo 2026 R1.1.
I am trying to open this file in a web app using this code which is in the page open event:

Var HTMLFile As FolderItem
htmlfile = GetFolderItem("C:/Git Repository/Wall App/WallMap.html", 0)


If HTMLFile <> Nil And HTMLFile.Exists Then 
  Var HTML As String
  Try 
    Var HTMLInput As TextInputStream = TextInputStream.Open(HTMLFile)
    HTML = HTMLInput.ReadAll
    HTMLInput.Close
    
  Catch E As IOException
    HTML = "<html><body><h1>Error Loading Map File.</h1></body></html>"
    
  End Try
  
  
  MapViewer.LoadHTML(Html)
  
Else
  
  MapViewer.LoadHTML("<html><body><h1> Map File not found.</h1></body></html>")
  
End If

WallMap.zip (4.2 KB)

It opens, however the objects shown are not the same as when I simply use a browser to load it. Can anyone suggest the correct way to do this?

Thank you,
Tim

2

WebHTMLViewer is not a browser. It’s a minimal version that can display HTML documents.

However, it doesn’t display everything a browser can do.

For example, consider these limitations:
Some JavaScript functions don’t run or preview correctly, especially with complex graphics.
It may also have some security limitations.

4

Thanks Jose.
Is there another object, control, tool or strategy that might be better suited?

Tim

5

I don’t know. I can’t see anything similar from third parties.

Someone on the forum might be able to give you an alternative.

Have a great afternoon.

6

You won’t be able to locally host like this with a WebHTMLViewer. There’s too many security hurdles. You need to serve it from your application. Have a look at the WebSDK.

Just saw that you’re loading arbitrary HTML using a TextInputStream. Same response. There will be hurdles and you should be doing this with the WebSDK.

1 Like
7

Thanks Anothony. I’ll look at the SDK.
Tim

8

Yeah, at the very least, you need to be serving that HTML file from your web app and calling WebHTMLViewer.LoadURL. That’s what creates an iframe on the page rather than a div.

Here’s an example of making that work, but you won’t be able to communicate effectively between Xojo and the iframe-constrained Map.

leaflet.xojo_binary_project.zip (12.4 KB)

2 Likes