Leaflet marker manager

[Guillermo Ballester Valor]

Hi all,

Because of changes in google-maps API conditions, I've been forced to move some pages using google maps to leaflet. The problem was that the pages added thousands of markers aroeund the whole world with meteorological data, tooltips and links. Adding all markers to a map is not a good idea because it overload the browsers.

For google-maps API there is a nice marker manager that allow to play with thousands of markers without problems. The idea in that markermanager is just to add to the map  the markers that should be visible in viewport. When user move or zoom the map the marker manager removes or adds the markers from the map and  then it have to display only few hundreds instead of thoushands.

I've wrote a single marker manager trying to imitate the google-mapa markermanager. I use it in my web pages and its performance has impressed me.

This is an example of how it works  

       https://ogimet.com/cgi-bin/ogimet_nav?lang=en

The javascript 'leaflet_manager.js' called in this page is not obfusced, so is easily readable. I have problem attaching that file to message. It is actually a very first version. If any of you are intersted in test or improve the leaflet marker manager please tell me. I am not a skilled programer in javascript so I'm sure there are many things to fix and add.

To use it, first contruct the object _AFTER_ leaflet map is initalized. Assuming 'map' is our leaflet map  object.

     mgr = new LeafletMarkerManager (map)

Then you should add to marker manager ALL the leaflet markers you want to manage. If you have them in an array arrayofMarkers[]

    mgr.addMarkerArray( arrayofMarkers )

or you can just add a single leaflet marker

   mgr.addMarker ( mymarker )

To delete a marker from marker manager (and leaflet map)

   mgr.removeMarker (mymarker)

or, to delete all markers in marker manager

   mgr.removeAllMarkers()

Hope it helps.

Regards

   

Guillermo.