forked from leaflet-extras/leaflet-map
-
Notifications
You must be signed in to change notification settings - Fork 3
/
leaflet-tilelayer.ts
81 lines (68 loc) · 2.42 KB
/
leaflet-tilelayer.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { customElement, property, PropertyValues } from 'lit-element';
import { LeafletILayerMixin } from './mixins/ilayer';
import { LeafletTileLayerMixin } from './mixins/tile-layer';
import * as L from 'leaflet';
import { LeafletBase } from './base';
import DATA_ELEMENT_STYLES from './data-element.css';
/**
* Element which defines a [tile layer](http://leafletjs.com/reference.html#tilelayer).
*
* @example
* ```html
*
* <leaflet-tilelayer
* url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
* minzoom="2" maxzoom="6" nowrap>
*
* Map source: <a href="https://stendhalgame.org">Stendhal MMORPG</a>
*
* </leaflet-tilelayer>
* ```
* @element leaflet-tilelayer
* @blurb element which defines a tile layer. The content of the leaflet-tilelayer is used as attribution.
* @demo https://leaflet-extras.github.io/leaflet-map/demo.html
* @homepage https://leaflet-extras.github.io/leaflet-map/
*/
@customElement('leaflet-tilelayer')
export class LeafletTileLayer extends LeafletILayerMixin(LeafletTileLayerMixin(LeafletBase)) {
static readonly is = 'leaflet-tilelayer';
static readonly styles = DATA_ELEMENT_STYLES;
static readonly events = 'loading load tileloadstart tileload tileunload';
declare layer: L.TileLayer;
@property() url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
get cleanedUrl(): string {
return this.url.replace(/%7B([sxyz])%7D/g, '{$1}');
}
containerChanged(): void {
if (!this.container) return;
this.layer = L.tileLayer(this.cleanedUrl, {
attribution: this.innerHTML + this.attribution,
minZoom: this.minZoom,
maxZoom: this.maxZoom,
maxNativeZoom: this.maxNativeZoom,
tileSize: this.tileSize,
subdomains: this.subdomains,
errorTileUrl: this.errorTileUrl,
tms: this.tms,
noWrap: this.noWrap,
zoomOffset: this.zoomOffset,
zoomReverse: this.zoomReverse,
opacity: this.opacity,
zIndex: this.zIndex,
detectRetina: this.detectRetina,
});
// forward events
this.layer.on(LeafletTileLayer.events, this.onLeafletEvent);
if (this.container instanceof L.Map)
this.container.setMaxZoom(this.maxZoom);
this.layer.addTo(this.container);
}
updated(changed: PropertyValues): void {
super.updated?.(changed);
if (changed.has('url')) this.urlChanged();
}
urlChanged(): void {
if (!this.layer) return;
this.layer.setUrl(this.cleanedUrl);
}
}