maybe any plugin or is there any js selector to use?

[TheSoulrester]

hey :)

might it be possible to create a little plugin for agosm to add on-hover events for a menu?

idea: if you hover on the menu "löschgruppe 1" the popup of the marker for "löschgruppe 1" should be visible.
same if you then hover on "löschgruppe 2" the popp of löschgruppe 1 closes and löschgruppe 2 opens.

if there won't be any plugin, how am i able to select these markers seperatly with an jquery-hover event?

for example (a little stupid and not perfectly/working script):

$( "li" ).hover(function() {
  togglePopup() [...];
});

i hope you understood what i meant :D ;)

[astridx]

That is certainly possible.
But I have no idea how to integrate it into the extension in a general form. So that others can also use it. It's not like it's the rule that a marker belongs to a menu item.
Do I understand you correctly?

[TheSoulrester]

ok, no problem ;)

but how would i be able to open the marker with my own javascript?

to open a leaflet-popup, i would need https://leafletjs.com/reference-1.7.1.html#map-openpopup
am i right?

but how would i now be able to open a specific popup?

like:
if (mouseover on ul>li.test1234) {
popup open test1234;
}
if (mouseout on ul>li.test1234 {
popup close test1234;
}

do you know what i mean? ;)

[astridx]

I don't understand exactly what you mean. Can you maybe describe it with a link to a page. If I can look at it practically, I usually understand better what is meant.

[TheSoulrester]

if i am hovering above "löschgruppe 1" in the sidebar, the popup of "löschgruppe 1" should open, so the user will see where the löschgruppe 1 is located at.
same for the other links

[astridx]

Thanks. Now I understand what you mean.

Is it very important to you that the pop-up is opened via the menu, or would it also be an option if a list was displayed below the map? If you click on the list entry, the pop-up opens.

For example, like this:

http://jsfiddle.net/abenrob/ZkC5M/

[TheSoulrester]

I can not really imagine yet. your fiddle does not seem to work? :/

it would be awesome if this is not displayed below. in my opinion it is better placed in the sidebar because below the map, it could be overseen.

[astridx]

In https://github.com/astridx/pkg_agosms/releases/tag/v3.0.1 I added a marker list and with this a possibility to open a pop up form outside the map. You can activate the marker list here:

It looks like this:

If you do not like to use the marker list, you can add a special class to the Element, that should open the pop up. You can find the name of the class in the marker list. It looks like this

... <a class="agmarkerlista_specialpin1" href="#">Open Link.</a> ...

Here the class name is agmarkerlista_specialpin1 where the last digit is variable. If you add agmarkerlista_specialpin1 to the menu item, it will open by click.

Note: At the moment I only look for the fist class. So, if you have more elements with the same classname agmarkerlista_specialpin1, only the first one opens the pop up.

Note: I decided in favour of click and against hover, because in my opinion this is not user-friendly on touch devices. Is that very important to you?

[TheSoulrester]

Thank you,

if there is no other way, this would be fine.

But is it possible to change the layout a bit?
i would prefer a 2 column layout so that it more looks like this

by the way: if i click on "show on map" it scrolls streight up the complete site (because of domain.tld/here/is/my/map**#**
it would be better if it only scrolls up to the map like bootstrap "scrollspy"?

German: schreibe das mal kurz auf deutsch ;) - hoffe versteht man dann besser. beim auf "show on map" drücken scrollt man bis ganz nach oben, besser wäre es jedoch dass nur bis maximal zur karte hochgescrollt wird (sowas ähnliches wie bootstrap "scrollspy"?)

[astridx]

if there is no other way, this would be fine.

You have seen that besides the markerlist there is also the selector that you could use in your navigation. For example: Add the class agmarkerlistli_specialpin1 to the menu item for opening the pop up of Testname 1. (Note: At the moment you can use this class one time, only the first found element opens the pop up. So you have to deactivate the markerlist, if you want to use the class on an other place for opening the popup).

i would prefer a 2 column layout so that it more looks like this

You can style the list by using the classes in your customs css.

<li class="agmarkerlistli_specialpin1" hidden="">
<p>Testname 1</p>
<a class="agmarkerlista_specialpin1" "="" href="#map90">Show on map.</a>
</li>
<li class="agmarkerlistli_specialpin2">
<p>Testname 2</p>
<a class="agmarkerlista_specialpin2" "="" href="#map90">Show on map.</a>
</li>

by the way: if i click on "show on map" it scrolls streight up the complete site (because of domain.tld/here/is/my/map**#**
it would be better if it only scrolls up to the map like bootstrap "scrollspy"?

You're right. Thank you. The href should lead to the map. I have corrected that here:
https://github.com/astridx/pkg_agosms/releases/tag/v3.0.3

Please let me know if this is ok for you.

[TheSoulrester]

You have seen that besides the markerlist there is also the selector that you could use in your navigation. For example: Add the class agmarkerlistli_specialpin1 to the menu item for opening the pop up of Testname 1. (Note: At the moment you can use this class one time, only the first found element opens the pop up. So you have to deactivate the markerlist, if you want to use the class on an other place for opening the popup).

awesome, that works :) - thank you

by the way: if i click on "show on map" it scrolls streight up the complete site (because of domain.tld/here/is/my/map**#**
it would be better if it only scrolls up to the map like bootstrap "scrollspy"?

You're right. Thank you. The href should lead to the map. I have corrected that here:
https://github.com/astridx/pkg_agosms/releases/tag/v3.0.3

would it be possible to add an offset?
my menu is sticky and round about 80px wide. after clicking, it scrolls to the map, but my sticky menu overlaps the map a bit. so i would add an offset of 80px and everything should be fine :)

[TheSoulrester]

Hi :)

will it be possible to add such an offset? :)

[astridx]

is there a link to the website so that you can look to understand it better?

[TheSoulrester]

https://www.feuerwehr-bamberg.de/das-sind-wir/feuerwehr

on mobile devices - its better to see what i mean ;)

but now i have a new "idea" - would it be possible to detect whether it is necessary to scroll down to the map, specially on desktop devices? because most time it won't be neccessary to scroll down or up to the map except on mobile devices.

[astridx]

https://www.feuerwehr-bamberg.de/das-sind-wir/feuerwehr

on mobile devices - its better to see what i mean ;)

Will it work for you if you add the following code to user.css? Then, however, the map will always be displayed with a margin at the top.

#map192 {
  margin-top: 80px;
}

I have no idea how to set the distance only when the top menu is in front of it.