[JS] OpenLayerMarker lijst te lang

[eagle00789]

Mijn vraag
Ik heb van deze website het OpenLayers Marker Multilayer Example in gebruik voor een export van onze klanten te mappen op een kaart met daarbij alle locaties van die betreffende klant (indien het adres in het systeem waarvanuit de export wordt gemaakt is opgenomen).
Nu loop ik tegen het probleem aan dat de klantenlijst te lang wordt en ik niet kan scrollen in de lijst, maar deze valt gewoon buiten beeld.
Hieronder het screenshot zonder op de pagina zelf te moeten uitzoomen (klantnamen zijn geblurred):

Hieronder het screenshot als ik uitzoom tot 80% op de pagina zodat ik weer een beetje kaart zie onder de klantenlijst.


Relevante software en hardware die ik gebruik
Powershell tbv de export uit de applicatie die voor mij de lat-lon ophaalt als deze niet is ingevuld maar wel het adres ingevuld is en deze dan ook direct in de betreffende applicatie bij de klant wegschrijft (scheelt heel veel verzoeken naar het internet naar

code:

https://nominatim.openstreetmap.org/search?q=$CustomerStreet1Web+$CustomerCity+$CustomerCountry&format=xml

de eerder genoemde website voorbeeld dat ik dus slechts een beetje heb omgebouwd zodat we altijd de juiste zoomlevel van de kaart hebben en dat deze start in het midden van Nederland.

Wat ik al gevonden of geprobeerd heb
De eerder genoemde website geeft me niet echt een duidelijk beeld wat voor parameters ik kan meegeven om dit te bereiken. Ik heb wel via een githublink een pagina gevonden op internet archive waar meer staat uitgelegd van deze versie van de javascript library die ik gebruik, maar ook hier staat niets vermeld hoe we de klantlijst scrollbaar kunnen maken.
Of gebruik ik nu een te oude methode en hebben jullie suggesties voor een nieuwe methode om dit te doen warbij (dit zoek ik nog) ook locaties van 1 klant aan en uitgezet kunnen worden om deze wel/niet zichtbaar te hebben?
Mijn powershell export maakt netjes de volgende code voor de markers per klant/locatie

code:

['latitude', 'longitude','Klantnaam', 'Locatienaam','id_voor_rood_kruis_of_groen_vinkje_als_weergave_']

De laatste parameter in mijn export code geeft aan of de klant wordt weergegeven als een rood kruis of een groen vinkje op de kaart.
dit doe ik door de volgende code te gebruiken in mijn javascript in de for-loop van alle markers:

code:

        if (markers[i][4] == 0) {
          var extGraphic = './green-ok-icon-2.png'
        } else {
          var extGraphic = './red-not-ok-icon-22.png'
        }

[eagle00789]

Heeft iemand een suggestie, of mogelijk zelfs een alternatief voor me? ik zie het namelijk niet meer.

[RobIII]

Als ik het goed begrijp wil je klanten op de kaart tonen? Waarom niet "gewoon" Google maps? Ik heb effe zitten kijken, ik heb namelijk exact dat gebouwd, waarbij je met een dropdown met checkboxen kunt filteren op bepaalde groepen. Alleen is mijn dingeske al zo oud dat 'ie begint te zeuren over verlopen API keys, oude JS libraries etc. etc.

Edit: Heb 't weer aan de praat gekregen. Ik heb je een screenshot (blurred) ge-DM'ed. Dan kun je iig zien of ik je goed begrijp.

[ Voor 73% gewijzigd door RobIII op 22-11-2023 12:04 ]

[Kalentum]

Dus je hebt een lijst met klanten? En heeft elk van die klanten 1 of meer locaties?

Ik zou dit oplossen door in de eerste plaats niet voor elke klant een layer te maken maar 1 layer met alle punten. Dan kan die layerswitcher ook weg.

En dan boven/naast/onder de kaart een lijst van klanten neerzetten met checkboxen.

Een mogelijke oplossingsrichting https://openlayers.org/en.../filter-points-webgl.html

[eagle00789]

Er zijn klanten met dus slechts 1 locatie, maar ook klanten met 120 of zelfs meer locaties (op dit moment precies 128 locaties, maar krijgt er nog dit jaar minimaal 20 bij).

[RobIII]

RobIII schreef op woensdag 22 november 2023 @ 11:22:
Ik heb effe zitten kijken, ik heb namelijk exact dat gebouwd

Ik heb 't even opgegraven en snel opgekalefaterd zodat 't weer draait. Het is dat ik het min-of-meer kant-en-klaar had liggen, maar het is eigenlijk niet de bedoeling complete oplossingen te posten in de Devschuur, maar dit is voor nu even alles waar ik tijd voor had/heb ipv je stapsgewijs naar de oplossing toe te helpen.

[eagle00789]

Beste @RobIII Je bent helemaal geweldig.
Ik heb hem gedownload en ben nu de nodige aanpassingen aan het doen om het weer werkend te maken aan mijn kant zonder webserver eis zoals nu wel het geval is ivm de jsons en de php, maar dat gaat me wel lukken. hiermee kan ik zeker een stuk verder.
Als ik het werkend heb aan mijn kant met de voorbeelddata ga ik verder om deze aan te passen voor mijn klanten.

[RobIII]

Het zou dan mooi zijn als je jouw versie dan ook nog post (hier of op github / bitbucket / gitlab / whatever).

[eagle00789]

@RobIII Dat zal ik dan zeker doen.