I've got 2 tilelayers on a Leaflet/Mapbox map and I am able to toggle between the layers, similar to this map. The difference is that my two layers are of the same type, both showing 'bike stations' to continue with the linked example.
Since I'm adding and removing the layers for each click, there's a small delay between the removal of the first layer and the adding of the second layer. I think I need to listen for when the second layer has finished loading, the removing the first layer to get a smooth transition between the two.
Is there any built-in functionality in Leaflet or Mapbox for accomplishing this?
UPDATE:
I managed to work around this problem by using the setOpacity method of the tilelayers instead of reloading them for each click. But I'm still curious as to whether there exists a ready-method as described above.
There's nothing built-in to accomplish this, but it's something we might cover with an example in the future.
Related
I’m using the new map viewer and I have two overlapping polygon layers. When I have popups turned on for both layers, but I’d prefer popups for one layer shows up first.
Is there a way to reorder popups without reordering layers?
There's no way to make these pop up reordered. I hope esri fixes this soon- it is obnoxious!
I am developing a weather radar viewer using Mapbox. In a certain mode, there are 2 Mapbox maps on the screen at the same time showing different modes of the radar. The maps are locked to each other. When one map moves, rotates, or pans - the other one does as well. I did this by simply passing the properties of one map to the other. In the below screenshot, you will see how they are showing identical locations.
What I want to do is - when the user is hovering the mouse over "map1", I would like an identical (ghost or false) cursor on "map2". Here is what I am looking to do:
(edit: What you are looking at is an actual screenshot. Each map is enclosed in a DIV with 50% width of the screen, if this helps to explain)
I don't know if this is even possible in Mapbox. Hopefully someone can give some guidance as I can't find any other questions related to this and I really have no code to show without knowing where to start.
If you attempt to do this inside Mapbox-GL-JS (for instance, by constantly updating the location of a GeoJSON feature layer), I think the performance will be pretty poor.
But since the two views are exactly locked (and presumably the exact same dimensions), you can just do this at an HTML/CSS level. Detect mouse movement on the first map, and update the location of an absolutely-positioned element hovering over the second map to match.
Another approach would be using a canvas element overlaid over the second map, similarly updated.
I am using Mapbox to render a map with an layer from rainviewer. The code is working but I need to synchronize with the end of the layer rendering. I need to know when the last layer is rendered and the image is complete. I need to do this because I'm rendering the HTML in puppeteer. Using any of the networkidle options does not work. There does not seem to be any event on the Map object that signals this either.
I did scour the forums, etc. looking for a solution but did not find anything that would work specifically in this scenario.
This is a generally broken use case in Mapbox-GL-JS. One option that may work for you is:
map.once('idle', () => ...)
This fires once the map has come to rest, completely painted.
I am creating a map application, in which I am showing MKPolylineView(around 2000) and MKAnnotations with pin drop.
I want to make visible either set of MKPolylineViews or MKannotations at a time. I am managing it with 2 buttons, one button is to display set of MKPolylineViews and another for set of MKAnnotations. So I tried 2 methods to manage this scenario, which is following:
For MKAnnotations, I am removing it and adding it again.
In the case of MKPolylineViews, I tried 2 ways:
I tried to make all MKPolylineViews hidden to YES and NO to manage it visibility based on button click. In this case, when I make the MKPolylineViews visible from it's hidden state, not all the MKPolylineView are visible. I tried with alpha and hidden property. In both the cases, the result was same, not all the lines are visible. Is there any mechanism to make all the lines visible. Because the performance is good in this case.
Then I tried another way, in which I removed all the MKPolylineOverlays and add it again. This case, everything works well. But the main thread freeze the UI for some seconds. Remember I am adding around 2000 MKPolyLineView. How can I manage it.
Instead of removing the overlay, when I used the hidden and alpha property, the performance was good. But half of the lines are not visible, when I make it visible from it's hidden state. Around half of the overlays couldn't be visible.
Another help that I need is since I am using around 2000 MKOverlays, the app got free for a few seconds while zooming. I think in this case, the map is re rendering the overlay at each zoom level. Is there any way to handle it efficiently?
Can anyone help me the best way to handle this scenario.
Thanks and regards,
Sreelash
Louis - Thanks for your input. Here is what I did, and my current issues, which i don't understand.
The menus (2) are UIImageViews that respond to touch. Each is it's own class. The 'sprites' as you called them also respond to touch.
In the .m where I add the menus and sprites to the layer, I created two container layers, via this code: menuContainer = [CALayer layer].
I ordered them with the menuContainer above the spriteContainer. Now, the sprites do move below the menus - great! But in the process, the sprites stopped responding to touch (I can understand this as they are below the menuContainer layer), and the menus stopped responding to touch as well (don't get that). Continuing to confuse the situation, a layer added to the menuContainer that responds to a multitouch gesture by popping up a slider still reads the multitouch and pops up the slider, but I can't slide the slider. This has me thoroughly confounded.
Thanks.
My app is building a background layer, then building some menu layers that should always be at the top.
After this, I add many moving layers and remove many moving layers very quickly.
My problem is I want my menu layers (there are 4) to always be in front of the other layers. I have thought of building a layer hiearchy and using the insertsublayer: atindex: method, making my menus a notional index of 1000, and inserting the multitude of moving layers at a lower index, like 200. If I insert one layer at 200 and then the next at 200, does the first layer that was assigned to 200 get shifted (to 201) or does it get blown away?
I have tried inserting the layers with the insertsublayer: below:, but that does not give me the desired results.
Thanks for the help.
You can't really do that, the layer index is not a z-order, it is an array index. From the documentation:
This value must not be
greater than the count of elements in
the sublayer array.
I think you would be best served but actually making a true hierarchy of layers as opposed to trying to shove all of you active layers into one super layer. In other, but all of your menulayers into a container layer, then insert that in the root layer where you want it. Likewise, insert all your sprites into one container layer, and put that in the root layer where you want it.
Additional stuff based on your edits:
Layers are a essentially a graphical construct, they do not directly respond to events. You either need to handle that yourself by writing code to hitTest them in the view they are attached to, or you need to use UIViews instead of layers. You were probably getting away with it before because you were manipulating the layers in such a way that the view hierarchy and layer hierarchy were consistent, but it was not clear to me from your original question that you were using views and not a purely layer based setup.
Louis -
Thanks for your input. Here is what I did, and my current issues, which i don't understand.
The menus (2) are UIImageViews that respond to touch. Each is it's own class.
The 'sprites' as you called them also respond to touch.
In the .m where I add the menus and sprites to the layer, I created two container layers, via this code: menuContainer = [CALayer layer].
I ordered them with the menuContainer above the spriteContainer. Now, the sprites do move below the menus - great! But in the process, the sprites stopped responding to touch (I can understand this as they are below the menuContainer layer), and the menus stopped responding to touch as well (don't get that). Continuing to confuse the situation, a layer added to the menuContainer that responds to a multitouch gesture by popping up a slider still reads the multitouch and pops up the slider, but I can't slide the slider. This has me thoroughly confounded.
Thanks.