I want to use leaflet as Map library and use Cytoscape.js to display nodes as overlay. Also node locations are updated with zoom in and zoom out. What are the challenges on the way. Any suggestions?
I have list can anyone support :
Use canvas element as overlay on leaflet.
how to translate geo location to canvas location
relocating nodes on zoom in and zoom out.
What are the challenges on the way?
A lot. You'll have to be more specific when asking.
Use canvas element as overlay on leaflet.
See the documentation for L.Canvas (and its source code if you want to implement something similar).
how to translate geo location to canvas location relocating nodes on zoom in and zoom out.
See the L.Map.LatLngToContainerPoint() method. Zoom animations are handled via CSS and screen coordinates of map layers are not recalculated during zoom animation frames.
Related
I'm working website which uses a lot of markers. And for performance reasons I'm going to render only visible markers after each move.
I'm using mapbox js library via react-mapbox-gl react library.
Any advice how to get visible coordinates from map? Top left and bottom right visible coordinates is enough.
You can use map.getBounds() or map.getBounds().toArray().
When zooming into the map, do the tiles ever get unloaded? Or do they just stack on top of each other? For example - if I zoom in from zoom level 4 to zoom level 6, do the new set of tiles replace the old ones? Or do they simply cover them?
The reason I am asking is that I am loading a 3D terrain mesh on top of each tile that loads, but I have found that I am getting multiple terrains stacking on top of each other (refer to my aforementioned zoom level example).
Ideally I would like to simply unload the terrain cover whenever the corresponding tile unloads, but the mapbox-gl library does not seem to expose that event...
Any info on this subject would help me figure out a working solution. Thanks!
Using leaflet mobile maps, you can easily get "lost" if you zoom in too far or pan in the wrong direction, so I'd like to display some kind of dynamic hint arrows(?) around the edge of the map which point to those offscreen markers. Something like the illustration below which I stumbled on here while trying to find a solution.
You would probably be interested in Leaflet EdgeMarker plugin (demo):
[…] allows you to indicate Markers, Circles and CircleMarkers that are outside of the current view by displaying [a chosen icon (like an arrow)] at the edges of the map.
When I zoom in far enough on my map, the TileLayer disappears and I see a bunch of tiles that say "Map data not yet available". I believe these tiles may be coming from the provider, but I am not sure (I am using ESRI WorldImagery dataset).
Is there any way to, at a certain zoom level, just force the tiles to stretch, instead of requesting the tiles for that zoom level? I am ok with some blur, but I do need to zoom in further.
I tried playing around with the zoomOffset option, but whenever I put something there other than 0, my tiles just never load (all grey).
Thanks!
This can be solved by using two of the options of L.TileLayer.
First, set maxNativeZoom to the highest zoom level your tiles provide (the last zoom level before the "Map data not available" starts to appear - this tells Leaflet to stop requesting new tiles when zooming in beyond this level; stretched tiles will be used instead.
Second, set maxZoom to whatever zoom is appropriate; you might not want this to be more than a couple of levels higher than maxNativeZoom, since the stretched tiles will start to look pretty horrible.
You can find out more about the details by checking under "Options" in the documentation for L.TileLayer: http://leafletjs.com/reference.html#tilelayer
I am trying to draw the entire globe inside my MKMapView. By pinching to zoom out I am limited to zooming out to a certain level. I would like to be able to zoom out past this level to show the entire globe on the map. This doesn't seem like it would be very difficult, but I have been unable to find any solution.
The map inside an MKMapView doesn't repats on the sides, so you can't zoom out far enough to view the whole world.
Solution: Write your own renderer (very hard task, working with coordinates on a surface like the earth is a pain).