I'm adding a D3 SVG containing nodes with lat and lng data and links to a leaflet map via:
var mapLayer = d3
.select(backgroundMap.getPanes().overlayPane)
.append('svg')
Everything is working great until I pan and zoom. The elements with the SVG are positioned correctly, but they are cut off due to the SVG dimensions.
I'm pretty new to Leaflet and I think I'm missing something fundamental - how can I ensure the entire SVG can always be seen?
This is sorted now.
The majority of the solution can be found here:
https://bost.ocks.org/mike/leaflet/
However I was not using a GeoJSON file. An example of how this can be done can be found within the jsfiddle posted here:
SVG circles don't get repositioned when zooming leaflet map
I had to add extra padding to avoid nodes being clipped - see sync d3.js map and leaflet map
The viewbox values I was setting for the svg also had to be removed.
Related
I am new to Leaflet and I want to create a raster and add it to my map. The raster is inside inside a polygon, which means I have many polygons (squares). Currently, I am adding just squares, but this makes everything very slow. It should look like this:
.
I also want to display a popup when hovering over a square with some information related to the square.
What I just tried:
I tried to use the GridLayer class for this but it seems I can mask it so that it just shows only specific squares.
There a various plugins but I do not really understand what they are doing
Has anyone an idea how this can be implemented?
Thank you
I'm using Leaflet (with omnivore and the MapQuest tile plugins) to display a map with colored polygons. The map and polygons look/work fine, but there are these mysterious blue markers everywhere.
There's nothing in the JS about markers at all, and if I comment out the polygon.addTo(map); line, the markers disappear. So they're definitely related to the polygons, even though they're not directly positioned on the polygons.
Any idea why the markers are appearing, or how I can make them disappear?
SOLVED: It turns out that the problem was that I'm using MSSQL's ".Reduce(n)" function to simplify the polygons (for performance), and if you simplify the polygons too far, the results have "Point(...)" items in them - which leaflet renders as markers!
Now, off to figure out why MSSQL is turning things into points...
Welcome to SO!
Most probably your polygon variable is a Leaflet GeoJSON Layer Group built by the omnivore plugin, and the data you feed it with contains "Point" type geometries.
If you do not specify anything special to handle these points, Leaflet will render them with this default blue marker icon.
In that case, you could simply filter out those point features, whether after omnivore processing (use the ready event) or using a custom GeoJSON Layer Group with its filter option. There should be other posts describing such solutions.
See e.g. Mapbox: Filtering out markers in a Leaflet Omnivore KML layer
If you are not in this case, you would have to provide more information for people to be able to help you. Typically code that you use to build your polygon layer and sample data.
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.
Screenshot from Mapbox docs:
It seems as though Mapbox won't render given coordinates multiple times on the same map, even if the map is zoomed out far enough to view the same latitude and longitude pairing twice. Is there a way around this?
Use the worldCopyJump option of L.mapbox.map (L.map):
With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.
Working example on Plunker: http://plnkr.co/edit/cbDNH6Rs5SbBKGY7LQGe?p=preview
Reference: http://leafletjs.com/reference.html#map-worldcopyjump