OpenLayers KML Incremental Updates - javascript

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.

Related

How to call a JS function or Python method when a glyph is completely rendered?

I am using bokeh as a Server Application. When I make a selection in a plot I do some actions in python and I update some sources (CDS). This changes are reflected in the plot. Is there a way to check when the glyphs are completely rendered (after the update)? I want to call a JavaScript function when all is completely loaded? With that function I want to call other python method to update the CDS again.
If I do not wait for this profiles to be rendered probably the application breaks, and that´s what I want to avoid. Actually I did some tests in the past and I had to create a huge CDS instead of several smaller CDS to make it work properly.
My Use Case. Why do I want to make this?
I have many tabs in my layout, they can be 10 for example. And each tab has some plots (3-6 plots). If I update the entire ColumnDataSource at the same time, it will take a while. Then I want to make it more fluent, so I would like to update only the data of the current visible tab, it will render faster and the user would receive an immediate response. I can disable the rest of the tabs temporarily to prevent malfunctions. At this moment I would need to call the JS or python method in order to update the content of the rest of the tabs.
Here a drawing of what I want to achieve in order to speed up the process:
About the data
Basically I have two DataFrames, one to build the cloud of points (around 5000 row and 130 columns) and I extract from the selected points another DataFrame to know which lines I should draw (360 columns and 5 to 15 rows), making some filters and selections. The algorythm I have used is in the answer of a question I have written time ago. With this amount of data the algorythm takes 6 or 7 seconds to finish.
Any other idea of how to improve the performance or how to split or the computing?
To improve the rendering speed you could try the webgl JavaScript API. This Bokeh documentation page Speeding up with WebGL explains how to do it. webgl supports circles, lines and most of the markers. Application:
p = Plot(output_backend="webgl") # for the glyph API
p = figure(output_backend="webgl") # for the plotting API
Please be aware that users report issues with webgl like plot stuttering, etc... but it may work in your case depend on which type of glyphs your plot contains.
Also make sure your data passed to the plot doesn't include NaN's as it is known to slow down Bokeh performance.
To my knowledge there is no attribute that indicates that rendering is completed or is still ongoing but you may think about some other alternatives to speed things up like combination of Bokeh with Datashader (pre-rendering large datasets into a fixed-size raster image) or Dask (speed up data reading from multiple sources like multiple csv files)
For example you could have one standard Bokeh plot where you make a
selection and let the other plots being generated as Datashader images
and embed them in Bokeh plots.
This example shows how to combine Bokeh + Datashader which significantly improves performance especially when over-plotting takes place. Please note that each time a single point is added to the plot entire canvas area will be re-drawn in the browser. This is how browsers work. Datashader can provide a single image so updating the plot is much quicker while you can still use Toolbar tools like zoom, pan etc....
Also the Python code implementation details counts. Using e.g. gridplot to link many plots can slow down performance so it is better to add them one by one to the document root, etc...
Time ago I made a trick to check if my design would work if I could trigger some function if the plots were rendered:
First I updated the current tab. This worked very well and fast.
Then I set a timeout to update the data of the rest of the tabs. But, in the meantime this second algorythm was being executed I could not work with the plots of the current tab because they were frozen.
So, the approach of triggering a function when everything is rendered is not a good idea, because even with such a callback the app would not work as I was expecting.

How to give marker a z-index wild-googlemaps

Probably impossible without using an API, but I'm going to ask anyway because it would save me so much pain and tears.
Is there a way to give a googlemaps marker a z-index without using the API? I've got the plug-in called Wild-Googlemaps implemented on my wordpress site. And I've created a googlemaps div, with an overlaying div set to opacity:0.7 for styling purposes.
Now I've lost the ability to click the marker, so I need to somehow change its z-index.
Anyone had this problem or has any ideas? Much appreciated.
Thanks in advance.
You cannot do that without accessing API.
By default all markers are created as a part of a map canvas and you cannot access them (they don't belong to the DOM tree). You could do that after turning off optimized parameter passed during creation of the marker (take a look at
description of marker parameters), but this require access to API.

Displaying chucks of huge images live

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

How to load 1000+ Google Earth markers effectively?

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.

Suggestion for creating tooltips on an image

Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.

Categories

Resources