leaflet.tilesextentmanager v1.1.0
Leaflet.TilesExtentManager
Demo:
Description:
Simple leaflet plugin that blocks downloading tiles that are overlaid by another layer.
Motivation:
To enhance the leaflet performance in situations, when more overlapping L.TileLayers are loaded and displayed. This plugin calculates which L.TileLayer is not possible to be seen, and temporarily removes it from the map until the moment it can be seen.
How to use:
- load src/leaflet-tilesextentmanager.js
- create a new TilesGroup config array (see TilesGroup Config section )
- call method
createTilesExtentManagerGroup(<TilesGroup Config>)
on map and pass your TilesGroup array
How to build | develop:
- clone / fork / download
npm install
npm start
for develop |npm run build
for build
TilesGroup Config:
Config is a structured js array that holds basic information about your L.TileLayers and their order. First elements have the highest priority and are display in front of other layers. Each element is an object that holds these parameters:
- name - this attribute is optional and would be (hopefully) used in the future
- layer - L.TileLayer instance
- bounds - a polygon that defines the extent of this layer. Is false when there are no boundaries
- transparent - true, if it is possible to see through this layer
Example
// initialize tileLayers
var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
maxZoom: 20,
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var NLS = L.tileLayer('http://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.png', {
attribution: '<a href="http://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
bounds: [[49.6, -12], [61.7, 3]],
minZoom: 1,
maxZoom: 18,
subdomains: '0123'
});
// initialize map
var map = L.map('map-wrapper', {
center: [48, 13],
zoom: 6
});
// definition of TilesGroup array
var layers = [{
name: 'NLS',
layer: NLS,
bounds: L.polygon([[50, -8], [50, 2], [60, 2], [60, -8], [50, -8]]),
transparent: false
},{
name: 'OSM_surfer',
layer: OpenMapSurfer_Roads,
bounds: false,
transparent: false
}];
// adding TilesGroup to map
map.createTilesExtentManagerGroup(layers);
Notes
This plugin aims to save some server requests on tiles that are not possible to display. On the other hand, it needs a calculation on each map change (in most cases < 2ms); therefore, this plugin is recommended only in specific situations:
- when more tilesLayers with different extent are loaded at the same time
- when slow tile server
- when users have a slower internet connection
- when tiles have big size
Schema
4 years ago