Add a scrollable list of markers

leaflet-search has such a function. But you need to search anything. This example is with geojson markers, but it works with leaflet-marker also.

hupe13, many thanks for the fast response. I don’t know what I am doing wrong, no search field is shown in the map:

[leaflet-search textPlaceholder=”Search…” position=”top-left” propertyName=iconClass]

You are searching leaflet-marker, right? The option iconClass in leaflet-search is valid only, if you use this option in leaflet-marker. Valid propertyNames for leaflet-search are the options, which you are using in leaflet-marker. popupContent is always a valid propertyName for leaflet-search. https://leafext.de/en/leafletsearch/searchmarker/

I hate and love it to find errors: I wrote top-left instead of topleft. This was the game changer. No I have to struggle with other issues… I will see.

A list of all markes is not shown, you can only search for specific ones. Or is there a certain command to show all by default?

Also, the Search field seems to be off a bit. Is this just me? Using Hueman Pro as theme.

A list of all markes is not shown, you can only search for specific ones. Or is there a certain command to show all by default?

Have all marker a popup?

[leaflet-marker title="Title 1" lat=0 lng=0]Marker 1[/leaflet-marker]

Then you can search:

[leaflet-search propertyname=popupContent ....] 

Also, the Search field seems to be off a bit. Is this just me? Using Hueman Pro as theme.

This is a css problem from your theme. Put the css somewhere, in the customizer, in your functions.php, child-theme, …., or simply in a html block with <style>...</style>:

.leaflet-control-search .search-input {
     margin: 4px 0 4px 4px !important;
}

I tested it with the Hueman theme. If it does not work with Hueman Pro, ask the theme support.

• This reply was modified 1 month, 3 weeks ago by hupe13. Reason: customizer

CSS works, now it looks good, many thanks!

Changing the propertyName from title to popupContent just changes the content of the search result when I enter a letter. But it doesn’t show the whole list. I just want to have a scrollable list with all entries without typing anything into the search field.

a scrollable list of all markers

Unfortunately, there is no such thing in this plugin.

OK, many thanks for clarification.

I tried it: https://leafext.de/extra/scrollable-list/

Looks great! Many thanks for the fast test.

One issue I have on mya side. Some titles are a bit longer and that leads to text wrapping and looks not so good. Would it be possible to have the width dynamically set according to the title length?

This width is a big problem with another error at the moment, I have not been able to solve it yet.

Other things I discovered:

• When zooming in, the list only shows the markers in the zoomed in window, not all; would be good to have all markes ain the list at any time
• This comes together with another one: When clicking on a marker, the map zooms in to the new marker, showing only the markers in the new area and the clicked marker moves out of sight in the list (clicked marker should stay visible on the list) –> could be avoided if list always shows all markers and not according to the shown map area
• When scrolling by clicking on the right bar and moving it up and down, also the map goes up and down (not always)
• I guess the colors and look and feel of the list can be adopted with additional CSS

I pushed new code. There is a new option: update = true/false to update the list or not. There are still some issues.

Am besten, wir machen per Mail weiter, wenn du m?chtest.