Put All The Markers at Once!
The way OpenLayers puts markers on the stage is fine when they are not so much, but once you need more than 100, the library’s solution is not good. The question is is there a way to put all the markers faster than the built in method.
Yes, There is a Way to Speed Up Markers Load
I once wrote about how to speed up markers on OpenLayers, it is clear that my decision was to concatenate the DOM elements like a string after I’ve generated all the markers as markup with innerHTML as it’s faster than appendChild. The only question left is how to convert Longitude/Latitude pair in pixels.
The Answer’s Given by OpenLayers
There is a method called getLayerPxFromLonLat() which do the job. Let me show you a snippet:
ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat)); console.log(ll);
You can see what’s inside the ll object. You can now reference the pixel as ll.y and ll.x.
Related posts:
- OpenLayers extreme optimization. Cut, compress and deploy!
- Optimizing OpenLayers. Speed up markers load time!
- Optimizing OpenLayers. Make it smaller and faster!
cool cool cool that rocks
thanks!
hi stoimen,
nice post again, even i don’t get what’s openlayers and what’s used aobut
yeah!
Dear Stoimen,
Your idea is cool! I’m been tried to resolve this headache, I’m not a good grasp of your idea “generated all the markers as markup with innerHTML”. In convention, the markers are added to the marker layer..so how to position the markers with using innerHtml ?
Thanks in advance!
Hi,
I actually noticed that all the chain from new OpenLayers.Marker is slow because once you make instance of an Icon class, than pass it as a parameter to the Marker class and than add it for every marker to the Markers Layer.
What I think is that you basically can avoid all this, because the final result of generation of all these DOM elements is slow. Important note is to say that after changing all this process to simple innerHTML string manipulation the zoom in/out will not be as smooth as before.
Now the code may look like something like:
which is slow. What I did is that I noticed all this was producing a simply DOM nodes so I switched to string concatenation.
// after the loop has finished.. append all this to the dom via innerHTML, which is way faster than appendChild
markersDiv.innerHTML = emptyString;
You’ll see this is very very fast comparing to the OpenLayers method.
If you’ve any questions don’t hesitate to ask. I’ll be very glad to help you!
regards,
stoimen
Dear Stoimen,
Thanks a lot for your fast response! I’ll try it!
Other than the zoom in/out issue, i did registered a mouseover event of a popup for every marker. Without implementing the marker layer, is there anyways to register the mouseover event for the markers ?
Best Regards,
ilotus
Yes, you have to register event listener for every marker, but that’s really a pain. Better approach is to use event delegation, i.e. attach event listener to the marker layer DIV and than to process all the children. Thus whenever you add markers they will have this event listener attached to them, because it’s attached to their parent in reality.
regards,
stoimen