0

I was hoping you could help me with something I am stuck with. I am a newbie in the use of leaflet library on mobile and I encounter a problem with performances.

In fact, I try to build an app with an interactive metro map that might have 350 markers if not more. Because it is an image, not a map, my 350 markers are always displayed, no matter if it's zoomed in or zoomed out... and performances are impacted... It becomes VERY slow... :(

Does anyone have any clue to solve the issue?

Maybe a way to make markers appear only if they are in the area shown on the screen and disappear if they are out?

Improve this question
2
  • You would probably be interested in that post: stackoverflow.com/questions/37043791/…
    – ghybs
    Aug 11, 2016 at 17:51
  • Thanks for answer. The fact is, I think the two options offered won't fit for the project... The Canvas-based layer solution would allow me to hide some parts but I need them to be always clickable when you navigate the map... so I'm not really sure what to hide... Every station have informations to display when you click on it. I'm afraid that the cluster solution wouldn't be relevant... stations are stations... zoommed in or zoomed out, I can't really group them...
    – Pierro
    Aug 12, 2016 at 10:28

2 Answers 2

Reset to default
1

Keeping markers without canvas and without clustering will prevent you from any performance improvement at low zoom levels: when zoom is low enough to see your entire area, all your markers will be shown.

Stations may not be distinguishable one from another at low zoom levels (hence the rationale for using clustering in many situations).

Have you tried the canvas approach? You should realize that shapes (including L.circleMarker) are still click-able.

Demo: https://plnkr.co/edit/vqtHibiL8GZiPCd6L6gq?p=preview

(you can switch the map option preferCanvas to false to see the difference in performance with 500 circle markers based on canvas or SVG)

Improve this answer
1
  • Hi ghybs, very sorry not to answer earlier, I hadn't all the informations from my dev to answer you. Clusters still don't have sense for our project and we tried with canvases. Performances are still very bad and Android crashes everytime we open the map... :(
    – Pierro
    Aug 23, 2016 at 20:12
-1

I suggest using clusters to avoid several markers displayed on the map at the same time.

A Leflet plugin that manage clusters very well is: Leaflet.markercluster.

markerclustersample

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.