Expand/break symbol apart

Tips & Tricks
1

Hello,
I’ve been working on a project with a symbol and I would like to ‘expand’ this symbol, ie have two distinct object instead of a symbol.
How can I do that ?

2

Cutting and pasting the elements out of the symbol doesn’t solve the problem?

3

Here's the current recommendation for this:

4

Thanks for the fastreply !
Unfortunately, following this steps leads to a very special behavior.
My symbols has only a box used as a container fo a leaflet map. So it has a special ID and a class. When I copy/paste this element out of the symbol, delete the symbol and give the box exactly the same ID and class as the original, it is not recognized as a leaflet container. Exactly as if Hype was stll looking for the original box.

5

So why not give it a new ID name? You can have two Leaflet containers on the same page.

6

I tried to go from :
hypeDocument.map = L.map(‘map’, {
to
hypeDocument.map = L.map(‘newmap’, {

but when I delete the symbol with the box ‘map’ ID, box ‘newmap’ remains blank

7

You should Post an examplefile :grinning:

8

You’re right. Here it is
Oh, and also, map seems to overflow box container…
And when I update with latest version of Leaflet, the map breaks…

9

DameLicorne.hype.zip (450.2 KB)
not sure if it solves your problem … i removed the symbol … this is what you wanted to do?!

1 Like
10

Hell ! yes ! Thank you !
There’s something else I dont’t understand. I replaced the old leaflet.js and leaflet.css with ne new version and the map broke.
Here’s the original file and the new leaflet version if you want to give it a try. I tried to turn all the ‘hypeDocument.map’ to ‘map’ but it didn’t do the trick
Archive.zip (496.5 KB)

11

Did you have a lookup for eventually API-changes in leaflet?

12

Well I did, but didn’t spot anything that seems to be related to this problem.
I started from scratch.
Map overflow is resolved, just had to switch overflow in Mesures from Visible to Hidden. But always the same problem with new Lealfet
NewTestLeaflet.hype.zip (10.8 KB)

13

OK, broken map has been fixed with adding this at the end of initMap code :slight_smile:

 window.onload = window.onresize = function() {
        map.invalidateSize();
        };
1 Like
14

what is the project about? looks interesting :slight_smile:
Did you make the pictures and picturetiles? interesting usecase :slight_smile:

something regarding bigpicture too. a tool from knightlab. https://storymap.knightlab.com/examples/bosch-garden/

1 Like
15

Hello Hans,
Yes, I needed a tool to navigate through a large res image and be able to have hotspots on it to trigger information. Thanks for the tool, i’ll look a it :slight_smile:

16

Hello Hans,
I did have a look at storymap. It is very interesting but I’m afraid I can’t get the all code of the finished project to host it on my space and customize it as I need.