Grouping/multiple selecting popups

[Initiostar]

@Acorn - It can be more readily implemented (without Layers) if you just add the same Class Name as the Pin so you have Pin/Shop Front. The Shop front needs a back-link to the map to complete the journey.
I set up a simple example of this with arrows and labels but you elevated it to its proper position.

@Acorn - agreed including the shop window details with the location class (pin) works much better than popups; changed shops 34 & 35 as examples: https://initiostar.co.uk/demo/zMap/.

To make it visibly easy to edit the layout, I placed the two shop details on their own "class" layers which avoids stacking on the MouseOff layer. As long as there is no link to a "class" layer and it is visible, it seems to work OK.

The upside is that "Close Pins" clears the Shop Window too - the sticky red mannequin brings the map back into view.

I did look at condensing the full shop-index into an accordion style dropdown category menu, but the full index scrolls well and not sure it is worth faffing around with additional code.

Tested all this on an Xperia X Compact 4.6" screen - the shop index font size could maybe go to 23px.

@LGF - I have attached an updated XAR. - I think now you should be able to avoid all popups.

Gary

BTW: should have said the links to pins needs javascript: hidePins();showPin('LOC34')

[letsgofishing]

Gary, a solid effort; the Shop Front is wizard as a concept.

It can be more readily implemented (without Layers) if you just add the same ClassName as the Pin so you have Pin/Shop Front. The Shop front needs a back-link to the map to complete the journey.
I set up a simple example of this with arrows and labels but you elevated it to its proper position.

I do like the red mannequin. It needs to be pointing.
I would personally go that little further and add an Anchor to every shop listing so on clicking the Pin the page srolls to the listing and the mannequin is there pointing.

Overall, I think this is a well-rounded approach that needs to be established as a Xara 'Map / You are Here' Template.

Acorn

@Gary - I blown away by your efforts to help solve this problem - thank you SO much! AND IT IS USABLE ON MOBILE!

Regarding the "internal reference for each pop up" - I'm a bit confused by "Ref> cpu(7)" - this is a link to Shop Popup1. Why does there have to be a link?
Sorry if this shows lack of understanding on my part, but why do I have to keep track of the layers - couldn't pin1 read 44 instead and the popup layer be renamed popup44?
All the shops are listed below the map so it's easy for me to see "who's who".


@Acorn - Thank you for all your thinking too! - like the idea of being able to go back the List of Places Menu...but I'll get this "simple version" working first.

[letsgofishing]

Errrr - I really liked the popups - combines 2 things into 1 - but now I'm back to dealing with 45 layers again....mmmm....
...maybe I can try and combine my existing popup layers but with the new approach....

why does the internal popup reference no.1 for instance, show Ref>cpu(7) and not (1) to correspond to popup layer1? Its "label" is used to trigger shop popup 1 at the same time (in addition to) the pin.....?

[Initiostar]

Errrr - I really liked the popups - combines 2 things into 1 - but now I'm back to dealing with 45 layers again....mmmm....
...maybe I can try and combine my existing popup layers but with the new approach....

why does the internal popup reference no.1 for instance, show Ref>cpu(7) and not (1) to correspond to popup layer1? Its "label" is used to trigger shop popup 1 at the same time (in addition to) the pin.....?

@LGF OK let's try to explain some things here:

1. The standard way to link to a popup is to link to the name you have given it in the P&L gallery. However, when you want to execute more than one action simultaneously, you would revert to using a JavaScript link. This requires you to identify Xara's internal reference for that popup (or if related to popup actions only see here: https://help.xara.com/article/26-und...d-web-features).

2. To find these, you would click on a standard popup – in my example REF> is the link to each popup. When you hover over that link (in a Chrome browser), in the bottom left of your screen you will see javascript: xr_cpu(n), where 'n' is the internal reference for that popup. It will be different for every popup across all variants and you must preview the complete site (note just the page) in order to get the correct reference. See: https://initiostar.co.uk/demo/HowTo/ - this was extended to help with the explanation (not for live use). I use the reference table to keep track of Xara's internal popup references.

3. The ONLY reason I created a shop popup is to create a Shop Window – without it just give each pin a class name 'hmtlclass=LOCx' and use the link javascript: showPin('LOCx'). Each pin then has a header anchor to its category.

4. Should you want to have the SHOP WINDOW, this can be a popup, OR a set of objects that are given the SAME class name as their associated pin. For the shop window popups, to show the pin AND open the shop window, this is two simultaneous actions and you need to use a javascript link to achieve that: showPin('LOCx'); xr_cpu(n).

5. Should you want to use a Class approach, you can as highlighted from the Clothing Jewellery link, simply create each shop window by giving any objects you want to appear in that space the same Class name as the pin to which they refer. As doing so would have all objects stacked on top of one another in the same space, I have used a visible layer for each class Shop Window - all objects on that layer have the same class name as the pin to which they refer. These layers must be visible when you publish.

6. All I did to switch from using a popup for Shops 34 & 35 was to create two layers, in this case with layer names of Class 35 and Class 34, The names could be anything, but it was easier to highlight I was using a class method for these two shops and to give them their shop number. Then, I copied and pasted the content from the popup to the Class layer and gave everything the class name associated with its pin.


Personally, I would switch to using Classes and not Popups (as per shops 34 & 35). You could try just removing any links to a previous popup, give all the objects the same class name as their pin and make it visible. Not tested it, but if it works would save you some time.

Gary

[letsgofishing]

Hi Gary - you really do go the extra mile...
I do understand the "mechanics" of the what bits of JS do, I was just wondering if what they are called(named) could be changed, but I see it's the "structure?" f the code.

I'm going to give the Classes a go for one category of shops and see how it comes out.
Many thanks,
Mike

EDIT:Sorry
I just wondering why the first Ref on the Popup Internal Reference is cpu7 - why not 1? What are Ref>cpu(1-6) being used for?

I will go the layers route but it would help a lot if the layer number eg: Beyond Boutique which is TH8, I want to call Class 8 - not class 35. And the name for the corresponding red dot to be htmlclass=LOC8

Many thanks,
Mike

[letsgofishing]

I've just worked out that I can label them corresponding shop numbers as long as I change all the names and LOC pins as well...

[Initiostar]

That's true, you can use any names you want, but you cannot have duplicates. You can only have 1 x TH8. so you might need something like TH8A if there is more than one shop with the same label.

[Egg Bramhill]

I've been experimenting for a few days now on creating a location spot that didn't require a clear button. The canvas option looked promising however mobile browsers couldn't accomodate ctx.clearRectange so whilst it worked fine on a pc and cleared the spots it didn't on mobile browsers.

I'v gone a different route now, here's the result. Only the Accomodation section works at present. I'm having issue with local and global variable at present for links to the websites but I'll push on. It's a fun challenge.

NOTE: I've made no effort to locate the location spots in the real locations as I don't know where they are. However it's very simple to do so.

DEMO

[Egg Bramhill]

Here's a link to the canvas method but it doesn't work on mobile browsers, all the location dots remain visible. Just click on any of the three orange buttons at the top. EDIT: Works okay in FF but not in Chrome of Edge!

DEMO

[letsgofishing]

That's true, you can use any names you want, but you cannot have duplicates. You can only have 1 x TH8. so you might need something like TH8A if there is more than one shop with the same label.

Yip - exactly what I did!