Preload Leaflet nearby tiles - javascript

I am using Leaflet as my map component. When the map initially loads, I want to preload nearby tiles at the same zoom level. What is the best solution to do this?

Please note that the keepBuffer option of L.GridLayer (and L.TileLayer) affects how tiles are unloaded: A bigger value of keepBuffer means that the user has to pan around further away before tiles are unloaded. It does not affect how soon tiles are loaded.
If you want to preload nearby tiles, I encourage you to look at some of the plugins, and in particular Leaflet.EdgeBuffer.

Use Leaflet Grid/Tile Layer option keepBuffer:
When panning the map, keep this many rows and columns of tiles before unloading them.

Related

BingMaps Is it possible to disable clustering below certain zoom level?

My map pushpins are relatively close to each other and even on a big zoom I still see them clustered.
I solved this issue by spreading the clustered pushpins by some random distance 5-10 meters.
I need more accurate solution so my idea is to disable the clustering below the certain zoom level, but I didn't find any way how to do it.
There is no option to disable clustering in the clustering layer in Bing Maps, but what you can do is monitor the zoom level of the map, and when it gets to a certain point, hide the cluster layer and load a new layer that isn't clustered. Unfortunately this means having two copies of your data in memory.
If you haven't fully committed to using the Bing Maps platform, you may also want to take a look at Azure Maps. The Azure Maps web SDK does things a bit differently where you would keep your data in a single data source and attach rendering layers to it. Clustering is turned on in the data source and has a max zoom level option for clustering.
Here is some examples: https://azuremapscodesamples.azurewebsites.net/index.html?search=cluster
Here is documentation: https://learn.microsoft.com/en-us/azure/azure-maps/clustering-point-data-web-sdk
There is an option clusteringEnabled now on ClusterLayerOptions which will disable clustering without losing the whole layer.
eg:
Microsoft.Maps.Events.addHandler(this.map, 'viewchangeend', () => {
// de-cluster at highest zoom level
this.clusterLayer?.setOptions({
clusteringEnabled:
this.map.getZoom() < this.map.getZoomRange().max
});
});

Google maps overlapping marker spiderfier ALWAYS keep spiderfied

Overlapping markers are unspiderfied when I click the map even though I have {keepSpiderfied: true}, how can I always keep all markers spiderfied?
Hitbox on my custom markers are also buggy when I have more than 2 markers overlapping, any solution to this would be insanely helpful.
Thx!
The sole purpose of keepSpiderfied is to avoid unspiderfying when you click on a marker.
Clicking on the map will call unspiderfy regardless of that setting, and so does changing zoom or mapType.
So I guess your only choice here is to fork the repo, or just download the library and add it to version control making your own modifications.

Leaflet.js How Do I only draw visible layers?

I'm using leaflet.js to track a ton of assets. How can I only render the assets (layers) that are in the visible area (bounds)?
After getting no help here, I begged for help on IRC. Leaflet does this automatically. Leaflet prunes vector layers, mostly. It also only renders vector features when the viewport changes, or when zoom levels change

Force leaflet to use a fixed tile zoom level

I want leaflet to just use the tiles zoomed to level 20 and disregard the lower zoom level tiles.
Is there any way to make Leaflet use chosen zoom level no matter how much the map is actually zoomed?
I thought that zIndex option of TileLayer would do it but it doesn't seem to do anything (I'm not sure what it's supposed to do).
To say it another way:
I want to be able to zoom still and force Leaflet to use 4 tiles to form one tile of a lower zoom level.
Is the better solution is to just combine the tiles beforehand and then feed those combined tiles to leaflet?

Custom InfoWindow size/pointer position in Google Maps API

I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.

Categories