This question already has an answer here:
Global map tiles disappear past zoom level 19
(1 answer)
Closed 3 years ago.
When I use the latest Leaflet, or even the beta, Leaflet just displays grey area.
I have gone through the logs on my webserver, and Leaflet doesn't even try to load any x19 tile.
var lagx1 = L.tileLayer('https://myserver.org/tiles/x1/{z}/{x}/{y}.png', {detectRetina:false, id: 'mapbox.light', attribution: attribution});
Using Google, it seems to have been a problem since before version 1.00.
Does anyone have a fix or a work-around?
Leaflet should have a fixed height of the map html element, otherwise he doesn't know how many tiles to display. If I remember, google is a layer displayed over the tile layer using a tricky hack. So maybe consider setting like 200px to the height of the map html element.
Related
I have already done Generate XYZ Tiles with layout png format using QGis only zoom level 14 in 10 days.
All image already done 100% thats showup on QGis percentage, but some images become blank or black image.
maybe it was fail when render like bad connection or anything else.
Can i render specific image only that blank image but not 1 by 1.
I dont want wasting time 10 days anymore.
Last i trying another application similiar on zoom 13 with Maperative
But the result is same.
Seems like you have got trouble with your connection or bandwidth osm same like me.
The only solution is download manually, one by one, from the official site, each image.
https://tile.openstreetmap.org/1/1/1.png
Save that image on your folder z x y structure in your blank tiles.
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.
This question already has an answer here:
Leaflet polyline disappears on pan
(1 answer)
Closed 3 years ago.
I've added a polyline on a leafletjs map. However, after I zoom in far enough for the view bounds to only show some of the polyline and I drag away towards the other side of the polyline while holding the mouse button down, the polyline is not being drawn while the new side of the map renders, but only after I release the mouse.
Is there any way to bypass this default behavior?
An example of my situation can be found here.
Leaflet polyline - https://leafletjs.com/reference-1.5.0.html#polyline
This Leaftet Github issue is relevant - you can add an invisible margin outside the bounds of the map in which the polyline will render and will appear when you drag back.
Like this:
var map = new L.Map('map');
map.getRenderer(map).options.padding = 100;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to render about 10.000 markers or dots on a leaflet map. I already did it the regular way and I found it is way slower compared to Google Maps. I'm looking for a way to render multiple elements without getting the performance issues.
Is there a way to do this with Leaflet?
Update: I don't want to plot with bright dots that can't handle events. I want to actually paint markers with different colors and events.
The performance issue is due to the fact that each marker is an individual DOM element. Browsers struggle in rendering thousands of them.
In your case, an easy workaround would be instead to use Circle Markers and have them rendered on a Canvas (e.g. using map preferCanvas option, or with a specific canvas renderer that you pass as renderer option for each of your Circle Marker). That is how Google Maps works by default: its markers are actually drawn on a Canvas.
var map = L.map('map', {
preferCanvas: true
});
var circleMarker = L.circleMarker(latLng, {
color: '#3388ff'
}).addTo(map);
or
var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var circleMarker = L.circleMarker(latLng, {
renderer: myRenderer,
color: '#3388ff'
}).addTo(map);
With this solution, each Circle Marker is no longer an individual DOM element, but instead is drawn by Leaflet onto a single Canvas, which is much easier to handle for the browser.
Furthermore, Leaflet still tracks the mouse position and related events and triggers the corresponding events on your Circle Markers, so that you can still listen to such events (like mouse click, etc.).
Demo with 100k points: https://jsfiddle.net/sgu5dc0k/
You should check https://github.com/robertleeplummerjr/Leaflet.glify. It provides way of rendering leaflet points and polygons using web gl, allowing to scale more easily.
It's also available for the people that uses R to produce their leaflet:
https://github.com/tim-salabim/leaflet.glify
The R version is super easy.
I got good results with the official Leaflet plugin PixiOverlay.
https://github.com/manubb/Leaflet.PixiOverlay
[2019]
Maybe a little too late but Pedro Vicente's answer seems to be the best option out there. Leaflet.glify ( https://github.com/robertleeplummerjr/Leaflet.glify.) is good but you don't have options other than create a dot, shapes and line on your map. (no customization yet.) PixiOverlay works with native/custom markers. It also has nice visualization (animation,scaling,etc..) It also works in IE 11. For me it's a must if you're dealing with tons of markers. go try it out https://github.com/manubb/Leaflet.PixiOverlay
P.S Glify and PixiOverlay are both utilizing WebGL so performance varies on your users' computer.
You can check out the marker cluster, it can cluster your map till you zoom into get the detail. I am currently working on loading real estate information and it seems to solve problem with more than 300000 loations to place on the map.
https://github.com/Leaflet/Leaflet.markercluster
I have created an off-line map with Google Map Android API v2 (i.e. osmdroid is not an option) using Openstreetmap tiles as GroundOverlays with one minor problem: at zoom level greater than 14 some of the tiles have a 1-3 pixel space between them. Other tiles line up perfectly. It seems random which ones do and do not have spaces between them.
I download the tiles using JTileDownloader, then I fetch the required tiles (using the technique described here) that I downloaded and placed in the device filesystem, then I get the tiles' LatLngBounds, and then I lay them down in a loop as:
groundOverlay = mMap.addGroundOverlay(new GroundOverlayOptions()
.image(BitmapDescriptorFactory.fromBitmap(mBitmapImage))
.positionFromBounds(tileBoundsArray[i])
.transparency((float)0));
I have verified that the lat and long of the tiles should line up. I also verified that all the bitmaps are the same size. I have also tried this particular tileset using the UrlTileProvider and it works fine, so it's nothing wrong with the tiles. I have been struggling with this for days and would appreciate any suggestions. I have found absolutely nothing anywhere else addressing this issue. Thanks!
I finally found the answer to this. I had to specify the width of the map tile in meters at the tile's latitude (I used the center of the tile). Google maps uses a Mercator projection, which means that the width of the map depends upon the latitude. You specifiy the width using GoundOverlay.setDimensions(width). This page gives an explanation on how to calculate the width.