I have an array that contains over 1000+ markers for Google Earth.
At the moment I am looping through the array with a for loop which is causing the Earth to freeze until they have all loaded successfully.
Can anyone recommend the best way to handle this so it loads a lot quicker for visitors?
Ideally I was thinking of loading only those markers in view/bounds but haven't seen any documentation to support this idea.
Any help would be greatly appreciated!
Thanks
I would advise you to use HTML5 WebWorkers to instantiate the markers asynchronously and then just use whatever method they have for show()/hide(), iterating through your objects.
It will only work in latest browsers, that implement WebWorkers, but i don't think there is another efficient way
One possibility is to instead do this from the server using KML Updates:
https://developers.google.com/kml/documentation/updates
Each update would load in 100 markers, say, and display them and then a second later it reloads and pulls the next 100 markers.
Related
I am trying to determine if it is feasible for OpenLayers v5 to handle incremental updates to KML files. The KML files I am working with are large but are dynamic and receive updates every so often. Instead of refreshing the entire KML file it would be preferable from a performance perspective to just load the updates. We were thinking of passing the updates using the field. Any help would be much appreciated!
If you included tags in angle brackets, they were likely lost from your question.
I'm guessing you were thinking of using the KML NetworkLinkControl and Update tags? If so, then OpenLayers would need to support NetworkLink, NetworkLinkControl, Update, and other associated KML tags. I don't see any reference to NetworkLInkControl in the OpenLayers documentation, so you're probably out of luck on that option, but I might not be looking in the right place.
Another way to do this, since OpenLayers does appear to support NetworkLink KMLs, might be to split up your data KML into a number of areas, combine them via a series of NetworkLinks, and only update the ones on your server which have changes.
I have a sort of setup like... google maps. It has nothing to do with maps but the mechanism seems to be similar.
I have an image ~300MB and the client can drag the picture around having different parts of it in view in the browser. I want to load only the specific parts of the image which the user is looking at, and unload the parts which are out of view (to save RAM).
I thought of breaking the image in 15X15px chunks and load the correct chunks each time but I can't seem to wrap my mind around which technique should I use to actually perform this task.
Any suggestions?
Google Maps breaks up their images (including streetview etc) into smaller chunks. I've seen a lot of people use their own images WITH the Google Maps technology to create their own maps of whatever (one, for example, is a fantasy world/web game I can remember)
Perhaps, instead of reinventing the wheel, inspect the other guys' wheel and see if you can use the same technology to create what you need. GTA for example: http://www.gta4.net/map/
This should get you started: https://developers.google.com/maps/
Google maps api: https://developers.google.com/maps/ seems to allow everything I need but it is clumsy and limited for the types of things I want to do.
It's like solving the problem backwards.. figuring out how to work with the map, and the hiding the map layer... which is... doing a lot of work for nothing.
With that, that seemed to be the best solution out there until I cam acroos this:
Panojs
http://www.dimin.net/software/panojs/
This seems to be super easy to use and quite flexible.
or Zoom.it which is based on SeaDragon which is also super easy to use!
http://www.zoom.it/
Cheers
I have been developing an application on google chrome, and I've been using the MarkerWithLabel library, which i believe is written by google developers. I am using a little over 100 markers on the map and it seemed to be pretty smooth until i checked in firefox (and lets not even mention IE). It is pretty damn laggy in FF. Any way to optimize it?
http://jsfiddle.net/zDTNS/2 Here is a sample in jsfiddle
To clarify, having 200 regular markers works fine. The problem shows up when using MarkerWithLabel
Generally speaking the best way to optimize any Google maps application is using a clustering technique. As the application loads more and more markers the client-side rendering over-head will only increase. The addition of labels only compounds the issue.
A number of clustering techniques exist and are simple to implement, I'd suggest starting with this article: https://developers.google.com/maps/articles/toomanymarkers.
Edit Leaving above in place in case anyone doesn't have the same spec requirement, but similar issue.
My only other suggestion would be to turn off the labels when above a certain zoom level? This will at least alleviate some of the worst of the rendering issues.
Edit After doing a bit of research the library introduced here has been shown to have far more favorable performance characteristics than markerWithLabel. It relies on a html canvas though so is ie9+.
After spending 2 weeks researching and trying all sorts of methods, most suggested on here, I arrived to the conclusion that there just is no way to optimize at the moment. For some reason firefox struggles when there are divs on top of the map and keeping them in sync. The performance on the latest firefox was almost the same as IE8.
I found that having a ton of google markers does not cause any lagging, but divs do. What I ended up doing was create a server side function that converts text to png. When initializing the google marker, you make the icon url TextToImage.aspx?text=Hello&size=13
Then I set the anchor of the new marker to (15, 15) and that became my new 'label'. I added some click and mouseover listeners to the label marker and voila! Insane improvement to performance.
If you only want a couple of characters inside a pin, another alternative is:
https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=${displayCharacters}|${pinColorHex}|${fontColorHex}
Check this example.
i'm refreshing an array of markers every 5 seconds using the setInterval function.
I need to compare the two arrays (before/after the refresh) in order to select which markers will be added (or removed) to the map. Is there any efficent way to do it (beyond the classical approach of two chained for loops)?
Deleting all markers before the refresh is automatically closing the infowindow (which is not desirable).
thanks
Refer this discussion
JavaScript array difference
.i think Joshaven Potters answer gives solution for u.
We want to build a google map liked javascript library to show our map data(we can not use google map or yahoo map).
We have done 60% of all the work,we can display the map tiles(img) according to user's drag operation.
Howver we found some problem:
We have a container(div element) to fill the tiles,when use drag on this container,we will do some caculatioin to see if new tiles should to be loaded.
It works. But it seems that when image are loaded,we can hardly move the mouse until imgaes are loaded completed or error.
It seems that the image load thread and the event handle thread is the same.
So any idea to fix it?
Multithreading in javascript exists, but it's still quite new. https://developer.mozilla.org/En/Using_web_workers