Grouping/multiple selecting popups

[Acorn]

Thanks very much for the reply Gary.
The nature of the shops and the layout, requires that the shops are grouped together into Categories and visitors need to be able to find particular shops -when a visitor clicks a link ( the shop name) they need to see a marker on the map and I just see how any method can work on a cellphone size screen.
Here's a link to what I have at the moment: http://www.mikekaplandesign.com/Thesen

LGF, it is quite effective but a lot of bucks for little bang.
It needs to include the Shop Name, Grid Reference and probably a Link out to the Shop page/site. The dot should not close when you click on the map.

The categories ought not to just close.

The Shop Index needs to have the Map/Grid references in their own column, not at the end of the Shop Name.

It would be a big undertaking.

Acorn

[letsgofishing]

LGF, it is quite effective but a lot of bucks for little bang.
It needs to include the Shop Name, Grid Reference and probably a Link out to the Shop page/site. The dot should not close when you click on the map.

The categories ought not to just close.

The Shop Index needs to have the Map/Grid references in their own column, not at the end of the Shop Name.

It would be a big undertaking.

Acorn

Thanks Acorn - yes it would be a mission

[Acorn]

LGF, "Mission control to LGF, over."

jQuery - Multi-Pin Display.xar

This approach still avoids Layers.
Two simple functions to hide and toggle a Pin or a number of Pins. [toggle could be replace by show]

The code is in the Page Code body.
The triggers are JavaScript calls to the functions in the text list. A click toggle the Pin to show or to hide.
These can be even on the Pin itself; try TH2 > Pin(TH2) > click and follow the route.

Acorn

[letsgofishing]

LGF, "Mission control to LGF, over."

jQuery - Multi-Pin Display.xar

This approach still avoids Layers.
Two simple functions to hide and toggle a Pin or a number of Pins. [toggle could be replace by show]

The code is in the Page Code body.
The triggers are JavaScript calls to the functions in the text list. A click toggle the Pin to show or to hide.
These can be even on the Pin itself; try TH2 > Pin(TH2) > click and follow the route.

Acorn

Hey Acorn - that is awesome - going to try it with a list of the actual shop names on the left (these have to be there) and see how it works on a 640px wide page.

[letsgofishing]

@Acorn
The jquery works just great - so simple...
but there's a "physical" problem - I've made the type 13pt which is far too small but I can't fit anything larger.
Also, as you'll see, there are around 50 shops and scrolling down the list would make the map disappear....

I reckon the solution is to just see list of shops to the width of the page (which would allow the text to be much bigger) - and have the pins and the map on a "pop up" layer which fills the width of the browser - this would also make the map easier to read. Then a close button which lets you see the list of shops again.

What do you reckon? And many thanks once again for your work.

BTW: If I backspace on the first line to get rid of the "1" it shifts down to the next line and so on....?

I've uploaded the page as it stands to http://www.mikekaplandesign.com/Thesen

[Acorn]

LGF, I have tweaked your design (again) to presenting the Categories all in a Xara Vertical NavBar - easier to maintain:

jQuery - Multi-Pin Display with Xara NavBar.web

The para numbering you were concerned about was just Numbered Bullets.

Acorn

[letsgofishing]

LGF, I have tweaked your design (again) to presenting the Categories all in a Xara Vertical NavBar - easier to maintain:

jQuery - Multi-Pin Display with Xara NavBar.web

The para numbering you were concerned about was just Numbered Bullets.

Acorn

Thanks Acorn - almost going round to where I started with the drop down menus, but the much cleverer Jquery for the pointers.
Guess people will just have to live with pinch and zoom

[Initiostar]

Guess people will just have to live with pinch and zoom

@LGF _ I think you can still go with Acorn's navigation menu: have the map fill the browser window and call the menu when required: https://initiostar.co.uk/demo/zMap

When you select a shop, (using Acorn's code) it shows the pin on the map. I extended the code to close the menu and see the map fill the browser window, to make it more visible - you can of course still expand the map.

Having the menu and the map in the same space, avoids the possibility that a visitor selects a shop/pin, but has to scroll to the map to see that pin. This issue and others do not become obvious until you view a site on different mobiles. Also, to make the mobile version legible on a compact mobile, the font sizes needed to increase.

I also added header anchors to the shop index categories to allow the visitor to toggle between a pin on the map and its shop index category.

The code has been extended with the menu given a class name "places" and there is a toggle on the link "List Places" that shows and hides the menu.

Should you want the menus to be permanently visible, you may need to use scrollTo to ensure the map and pins are are always in view. I also turned on Scale-to-Fit-Width (maximum 640px).

Just a thought on usability.

Gary