Denne komponenten har svært lite funksjonalitet i seg selv utover å utvide APIene til Leaflet og ESRI Leaflet. Det betyr at dersom det skal lages et nytt kart, må det lages en ny komponent som utvider på denne grunnkomponenten
Struktur
<lk-map>
...
</lk-map>
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| getMap | () | map__container: HTMLDivElement | |
| latLng | (latitude: number, longitude: number) | Se Leafletjs.com/reference | |
| latLngBounds | (corner1, corner2) | Se Leafletjs.com/reference | |
| point | (x: number, y: number) | Se Leafletjs.com/reference | |
| bounds | (corner1: number[], corner2: number[]) | Se Leafletjs.com/reference | |
| addTiledMapLayer | (url: string, config: any = {}) | Se Leafletjs.com/reference | |
| addFeatureLayer | (url: string, config: any = {}) | Se Leafletjs.com/reference | |
| featureLayer | (url: string, config: any = {}) | Se Leafletjs.com/reference | |
| addDynamicMapLayer | (url: string, config: any = {}) | Se Leafletjs.com/reference | |
| addImageMapLayer | (url: string, config: any = {}) | Se Leafletjs.com/reference | |
| zoomIn | () | ||
| zoomOut | () | ||
| panTo | (position: L.LatLng) | ||
| flyTo | (position: L.LatLng) | ||
| fitToBounds | (bounds: L.LatLngBounds) | ||
| invalidateSize | () | ||
| onMapClick | (callback: Function) | ||
| onMapDblClick | (callback: Function) | ||
| onMapContextMenu | (callback: Function) | ||
| onMapKeypress | (callback: Function) | ||
| onLocationFound | (callback: Function) | ||
| onLocationError | (callback: Function) | ||
| addToMap | (item: L.Item) | ||
| polyline | (latlngs: L.LatLng[], options: Object = {}) | Se Leafletjs.com/reference | |
| polygon | (latlngs: L.LatLng[], options: Object = {}) | Se Leafletjs.com/reference | |
| rectangle | (latlngBounds: L.LatLngBounds, options: Object = {}) | Se Leafletjs.com/reference | |
| circle | (latlng: L.LatLng, options: Object = {}) | Se Leafletjs.com/reference | |
| icon | (options: Object = {}) | Se Leafletjs.com/reference | |
| divIcon | (options: Object = {}) | Se Leafletjs.com/reference | |
| marker | (latlng: L.LatLng, options: any = {}) | Se Leafletjs.com/reference | |
| query | (url: string, callback: Function) | Se Leafletjs.com/reference | |
| openPopup | (popup: L.Popup) | ||
| openNewPopup | (content: string, latlng: L.LatLng, options: Object = {}) { | ||
| closePopup | (popup: L.Popup) | ||
| openTooltip | (tooltip: L.Tooltip) | ||
| openNewTooltip | (content: string, latlng: L.LatLng, options: Object = {}) | ||
| closeTooltip | (tooltip: L.Tooltip) | ||
| addLayer | (layer: L.Layer) | ||
| removeLayer | (layer: L.Layer) | ||
| eachLayer | (fn: Function) | ||
| locate | (options: any = {}) | ||
| stopLocate | () | ||
| resetMap | () |
Eventer
Ref. Stenciljs.com
| Event | Parameter | Beskrivelse |
|---|---|---|
| mapLoaded | () | |
| locationFound | () | |
| locationError | () |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<lk-map></lk-map>