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

1

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 test.hype.zip (47.7 KB)

2

Unticking “protect from external styles” fixed it.

3

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.

4

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.

5

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…

6

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.

7

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.
Thanks

8

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

1 Like