Problem applying CSS to Hype Element (or yet another beginner question)

So I’ve successfully implemented leaflet for showing a map with a popup.

I’ve included the leaflet.css file to format the map, its controls and popups etc. However the CSS doesn’t seem to be applied - getting missing image question mark for popup and no background on the map controls.

I’ve looked at the CSS and noticed the class selector leaflet-container, so have used that as my class in innerHTML.

Your help appreciated

css styling (47.7 KB)

Unticking “protect from external styles” fixed it.

in the console.
it says the is an unexpected token ":’ on line 459

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);

Also you have not included the images in the project.

The missing images are my next issue to solve. The leaflet.js library is looking for them in a directory called images. I haven’t figured out if its possible to place image files in a directory in the resources section.

Not as far as I know from within hype. But you can add the folder to the resource folder after export.

This would make a good Feature Request to be able to import a Folder and it’s image/script contents and retaining the folder hierarchy from the import.

Do you want to request it or do you want me to do it…

You could create the directory and place the images in it after you export the document. Unfortunately you wouldn’t be able to see them when previewing. you would just get a question mark.

Hi @MarkHunte
I’m in the process of trying to adapt Leaflet to Hype.
Is your proposition to @3saul for making yourself the request still available ? Because it is a function I’m longing to have for a long time.

Go ahead and make it… I cannot remember if we did or not…

1 Like