I'm using leaflet to trace underground pipes which I create using the polyline methods.
Since the pipes/lines can sometimes overlap I need to be able to highlight the selected line which requires switching the z-index of the line.
Now it seems that leaflet does offer a setZIndex method, but it's not available for individual layers - so I can change it over an entire featureGroup, but that is less helfpul - and making every line into its own separate featureGroup feels like an overkill.
Any suggestions?
You could create another layer with a superior z-index that would be empty at start. When the mouse is going over a feature, copy the feature into that layer. When the mouse is going out, just remove it from the layer.
It might be a little bit cpu demanding, so I suggest you to debounce the mouseover function in order to make the mouse to wait 1-2 seconds over a feature before copying it into the top layer.
As IvanSanchez noted in a comment, the correct answer seems to be a method called bringToFront.
Related
I recently set up a non geographical map with leaflet using an image layer. This obviously is a stupid decision working with 'bigger' maps due to high memory usage and the need to load the big image file so I decided to use a tile layer instead.
Working mostly as expected aside from one thing: I can't seem to be able to drag outside of the map, it just jumps back so the map covers the screen. I'm not sure what causes that as I read that this behaviour usually needs to be set manually using maxBounds. Tried setting that to null, doesn't change. The only new thing introduced is Leaflet Rastercoords (https://github.com/commenthol/leaflet-rastercoords) which I'm unsure if that's causing the problems.
Any way to resolve that? Not sure where to look next.Thank you!
I achieved the behaviour you want using the following work around:
map.setMaxBounds(null); //map being the leaflet map.
This need to be called after the initialization of the map and of the raster coords layer.
Adding many markers(10000) using leaflet is slowing down the browser.
markers are moving after every 5 sec.
How can performance issue solved in such scenario.
Note : Clustermarker has one problem. It's difficult to keep track of moving marker.
I'd the same issue, I bypassed it because 1000 markers is too much information.
I put two events:
On specific zoom level, I query my database to have (less) markers. In argument i give the map's coordinates like this example. Tips: i add +1 and -1 on lat and lng to anticipate step 2
I've got an event leafletDirectiveMap.mooveend. When this event is call, I'm doing the step 1. Tips: I'd $timeout with 300ms on this events.
If you need to show all markers, maybe using the heatmaps layer on specific zoom is an another bypass.
Sorry if it's not the solution of your problem but, iIf you try this example, you can see 10000 markers slowdown browser.
Are you using L.marker()? I've had better performance results with L.divIcon().
Alternatively, you could draw your markers directly on the canvas (as is done in Leaflet MaskCanvas). You can also update markers that are drawn on the canvas. Note: this isn't a plug-and-play suggestion; you'll have to do some coding to make this idea work.
Here are some other ideas from this GIS StackExchange question and this other GIS StackExchange question.
Whenever I move the view on my leaflet map, polylines whose centers are no longer in view are removed. I have a polyline with a large stroke size (~500px) that is not visible even when part of it should be. This same problem can also be observed when dragging the map, polylines are not redrawn until the drag ends. Example shown below.
I have tried adding a listener for the leaflet remove event but that is not triggering. I also tried overriding the onRemove method for the polyline but that did not work. For now to get around this I have made the map bigger than the screen, but that causes some slowdown.
I assume it is a performance feature to remove non-visible polylines from the map. Does anyone know if that this can be disabled?
yes, as you said the polylines, geoJSON will only redraw after receiving the "dragend" event, so we must redraw even during the drag and we can easily make it happen by writing the following code
map.on('drag', () => {
map.fitBounds(map.getBounds());
});
even L.Path.CLIP_PADDING didn't work for me. but forcefully setting the bounds worked for me.
also, see the demo here.
I needed to set L.Path.CLIP_PADDING.
Found by looking through closed issues on the github repo. https://github.com/Leaflet/Leaflet/issues/2814.
Also in the docs: http://leafletjs.com/reference.html#path-clip_padding
"How much to extend the clip area around the map view (relative to its size, e.g. 0.5 is half the screen in each direction). Smaller values mean that you will see clipped ends of paths while you're dragging the map, and bigger values decrease drawing performance."
I'm new to leaflet, looking for some advice.
I'd like to create an animation of a marker of some sort (for example, an html5 filled arc or shape) to replay GPS tracks on a map. I may want several animated markers and I want to stay flexible with the behavior and performance. Can anyone recommend a good way to go about creating this type of animation?
It looks like I could create a canvas layer (L.TileLayer.Canvas) and draw on it using a technique for linear animation (e.g. http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/), but I'm not yet sure if this works, or if I need to call redraw() and how the performance would be. Or I could try and make customer markers and move them by setting the lat/lon on them at some interval.
Has anyone come across this and can recommend a solution (above ideas or other)? Ideally as I change zoom levels, the animation will "scale" and have good performance. Thanks!
The RaphaelLayer plugin lets you create some pretty fancy animations:
http://dynmeth.github.com/RaphaelLayer/
yes there are a couple of ways to approach the problem...
drawing onto an interactive map is challenging because you need to recalculate your position on pan and zoom events; in addition to managing your actual animation.
This is an excellent example using the D3 library to manage the animation in a continuous loop, you may be a able to modify the code for multiple animations.
http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/
If you want a little more of the knuts and bolts of how the drawing process works then this project might be a better starting point
http://bl.ocks.org/Sumbera/11114288#L.CanvasOverlay.js
This grabs the overlay pane (a leaflet canvas which you can draw on) and... draws on it...
and you will absolutely want to check out this link which describes the drawing process for an interactive map
In this case I use Map control from OpenLayers 2.10. On map I have base layer
which is OpenLayers.Layer.OSM and OpenLayers.Layer.Vector with custom features. Now when I move map using mouse the features that weren't previously visible won't redraw until release of mouse button. I have noticed the same issue in all OpenLayers examples. Can anyone provide some kind of work around to change this behaviour? What I want to achieve is to draw features immediately after feature becomes visible or always draw all features (I work with small number of features so performance of map control isn't critical).
My current idea is to handle some specific events on map (like mouse move with click) and force features redraw.
Update
The SVG2 renderer was introduced in v2.11, and then immediately deprecated in v2.12 for reliability reasons (See this pull request). For OL >= 2.12, set the layer's ratio property to have it render all features within a wider area as a ratio of the screen size. The trade-off is performance, and if your user "throws" their map in some direction, they will fly past the features, but at that point they probably expect to have some rendering delays.
new OpenLayers.Layer.Vector("My Layer", {
ratio: 2
});
Original Answer
From http://lists.osgeo.org/pipermail/openlayers-dev/2011-March/007345.html :
the new OpenLayers.Renderer.SVG2 renderer does what you are requesting. It is available on trunk (and will be in 2.11). To use it, configure the renderers array for your OpenLayers.Layer.Vector like this:
new OpenLayers.Layer.Vector("My Layer", {
renderers: ["SVG2", "VML", "Canvas"]
});
Or set it on the prototype:
OpenLayers.Layer.Vector.renderers = ["SVG2", "VML", "Canvas"];
Note that VML (used in IE6,7,8) and Canvas (used on Android devices) behave like Renderer.SVG and don't draw features while panning.
With OpenLayer v6.4.3 you can set the following property of VectorLayer:
updateWhileAnimating boolean (defaults to false) When set to true, feature batches will be recreated during animations. This means that no vectors will be shown clipped, but the setting will have a performance impact for large amounts of vector data. When set to false, batches will be recreated when no animation is active.
updateWhileInteracting boolean (defaults to false) When set to true, feature batches will be recreated during interactions. See also updateWhileAnimating.
I don't have a solution, but made an observation. Looking at this example on Vector Behavior on the OL Examples website, if features are partially visible (i.e. placed on the border of the viewport), they remain partially hidden when dragged into full view. Only fully visible upon release of the mouse button. My point being that it seems to be a display issue more than a load issue, if that wasn't apparent already...
Will keep an eye on the question, curious to the answer. :-)
Just in case anyone stumbles across this question (as I did) OpenLayers 2.11 resolves this issue. I tested it on my web application and it now redraws vector features instantly, whereas with an older version of OL installed it would do what was written above. Something I had never noticed before either so nice one for spotting it!
Here are the release notes.
http://trac.osgeo.org/openlayers/wiki/Release/2.11/Notes
This sort of shows it in action. Best example I could find I'm afraid :P
http://openlayers.org/dev/examples/rotate-features.html