import * as L from 'leaflet'; import { AWCLeafletElement } from '../../internal/awc-leaflet.js'; import type { CSSResultGroup, TemplateResult } from 'lit'; interface FeatureElement extends AWCLeafletElement { feature: L.LayerGroup | L.Polyline | L.Polygon | L.Marker; layer: L.LayerGroup | L.Layer; } /** * @summary Element which defines a Leaflet map. * @documentation https://webcomponents.adeliom.io/?path=/docs/components-map--documentation * @status experimental * @since 1.0 * * @event awc-map - type : click - Emitted when the user clicks (or taps) the marker. * @event awc-map - type : dblclick - Emitted when the user double-clicks (or double-taps) the marker. * @event awc-map - type : mousedown - Emitted when the user pushes the mouse button on the marker. * @event awc-map - type : mouseover - Emitted when the mouse enters the marker. * @event awc-map - type : mouseout - Emitted when the mouse leaves the marker. * @event awc-map - type : contextmenu - Emitted when the user right-clicks on the marker. * @event awc-map - type : preclick - Fired before mouse click on the map (sometimes useful when you want something to happen on click before any existing click handlers start running). * @event awc-map - type : focus - Emitted when the user focuses the map either by tabbing to it or clicking/panning. * @event awc-map - type : blur - Emitted when the map looses focus. * @event awc-map - type : load - Emitted when the map is initialized (when its center and zoom are set for the first time). * @event awc-map - type : unload - Emitted when the map is destroyed with remove method. * @event awc-map - type : viewreset - Emitted when the map needs to redraw its content (this usually happens on map zoom or load). Very useful for creating custom overlays. * @event awc-map - type : movestart - Emitted when the view of the map starts changing (e.g. user starts dragging the map). * @event awc-map - type : move - Fired on any movement of the map view. * @event awc-map - type : moveend - Emitted when the view of the map ends changed (e.g. user stopped dragging the map). * @event awc-map - type : dragstart - Emitted when the user starts dragging the marker. * @event awc-map - type : drag - Fired repeatedly while the user drags the marker. * @event awc-map - type : autopanstart - Emitted when the map starts autopanning when opening a popup. * @event awc-map - type : zoomstart - Emitted when the map zoom is about to change (e.g. before zoom animation). * @event awc-map - type : zoomend - Emitted when the map zoom changes. * @event awc-map - type : zoomlevelschange - Emitted when the number of zoomlevels on the map is changed due to adding or removing a layer. * @event awc-map - type : dragend - Emitted when the user stops dragging the marker. * @event awc-map - type : resize - Emitted when the map is resized. * @event awc-map - type : layeradd - Emitted when a new layer is added to the map. * @event awc-map - type : layerremove - Emitted when some layer is removed from the map. * @event awc-map - type : baselayerchange - Emitted when the base layer is changed through the layer control. * @event awc-map - type : overlayadd - Emitted when an overlay is selected through the layer control. * @event awc-map - type : overlayremove - Emitted when an overlay is deselected through the layer control. * @event awc-map - type : locationfound - Emitted when geolocation (using the locate method) went successfully. * @event awc-map - type : locationerror - Emitted when geolocation (using the locate method) failed. * @event awc-map - type : popupopen - Emitted when a popup bound to the marker is open. * @event awc-map - type : popupclose - Emitted when a popup bound to the marker is closed. * * @cssproperty [--link-color=var(--awc-color-primary-600)] --link-color - The color of the links. * @cssproperty [--popup-tip-size=1rem] --popup-tip-size - The size of the popup tip. * @cssproperty [--popup-text-color=var(--awc-text-paragraph-color)] --popup-text-color - The color of the popup text. * @cssproperty [--popup-background-color=var(--awc-panel-background-color)] --popup-background-color - The background color of the popup. * @cssproperty [--popup-border-radius=var(--awc-panel-border-radius)] --popup-border-radius - The border radius of the popup. * @cssproperty [--popup-padding=var(--awc-spacing-large) var(--awc-spacing-large) var(--awc-spacing-medium)] --popup-padding - The padding of the popup. * @cssproperty [--popup-box-shadow=var(--awc-shadow-medium)] --popup-box-shadow - The box shadow of the popup. * * @cssproperty [--controls-background-color=var(--awc-panel-background-color)] --controls-background-color - The background color of the controls. * @cssproperty [--controls-border-color=var(--awc-panel-border-color)] --controls-border-color - The border color of the controls. * @cssproperty [--controls-border-width=var(--awc-panel-border-width)] --controls-border-width - The border width of the controls. * @cssproperty [--controls-border-radius=var(--awc-panel-border-radius)] --controls-border-radius - The border radius of the controls. * @cssproperty [--controls-text-color=var(--awc-color-neutral-900)] --controls-text-color - The text color of the controls. * @cssproperty [--controls-box-shadow=var(--awc-shadow-medium)] --controls-box-shadow - The box shadow of the controls. * * @cssproperty [--controls-location-active-color=var(--awc-color-secondary-600)] --controls-location-active-color - The active color of the location control. * @cssproperty [--controls-location-following-color=var(--awc-color-primary-600)] --controls-location-following-color - The following color of the location control. * * @cssproperty [--attribution-background-color=var(--awc-panel-background-color)] --attribution-background-color - The background color of the attribution. * @cssproperty [--attribution-text-color=var(--awc-color-neutral-900)] --attribution-text-color - The text color of the attribution. * @cssproperty [--attribution-opacity=0.8] --attribution-opacity - The opacity of the attribution. * * @cssproperty [--cluster-opacity=0.8] --cluster-opacity - The opacity of the cluster. * @cssproperty [--cluster-ring-opacity=0.6] --cluster-ring-opacity - The opacity of the cluster ring. * @cssproperty [--cluster-small-color=var(--awc-color-neutral-0)] --cluster-small-color - The color of the small cluster. * @cssproperty [--cluster-small-background-color=var(--awc-color-primary-600)] --cluster-small-background-color - The background color of the small cluster. * @cssproperty [--cluster-medium-color=var(--awc-color-neutral-0)] --cluster-medium-color - The color of the medium cluster. * @cssproperty [--cluster-medium-background-color=var(--awc-color-primary-600)] --cluster-medium-background-color - The background color of the medium cluster. * @cssproperty [--cluster-large-color=var(--awc-color-neutral-0)] --cluster-large-color - The color of the large cluster. * @cssproperty [--cluster-large-background-color=var(--awc-color-primary-600)] --cluster-large-background-color - The background color of the large cluster. * * @cssproperty [--legend-contents-background=rgba(0, 0, 0, 0.25)] --legend-contents-background - The background color of the legend contents. * */ export default class AWCMap extends AWCLeafletElement { static styles: CSSResultGroup; private readonly localize; static readonly events: string; /** * reference to the leaflet map */ map: L.Map; /** * The `latitude` attribute sets the map center. */ latitude: number; /** * The `longitude` attribute sets the map center. */ longitude: number; /** * Whether the map should display a fullscreen control */ fullscreenControl: boolean; /** * The `zoom` attribute sets the map zoom. */ zoom: number; /** * The `min-zoom` attribute sets the minimum zoom level of the map. Overrides any minZoom set on map layers. */ minZoom: number; /** * The `maxZoom` attribute sets the maximum zoom level of the map. This overrides any maxZoom set on map layers. */ maxZoom: number; /** * The `no-dragging` attribute disables whether the map is draggable with mouse/touch or not. */ noDragging: boolean; /** * The `no-touch-zoom` attribute disables whether the map can be zoomed by touch-dragging with two fingers. */ noTouchZoom: boolean; /** * The `no-scroll-wheel-zoom` attribute disables whether the map can be zoomed by using the mouse wheel. If passed 'center', it will zoom to the center of the view regardless of where the mouse was. */ noScrollWheelZoom: boolean; /** * The `no-double-click-zoom` attribute disables the whether the map can be zoomed in by double clicking on it and zoomed out by double clicking while holding shift. If passed 'center', double-click zoom will zoom to the center of the view regardless of where the mouse was. */ noDoubleClickZoom: boolean; /** * The `no-box-zoom` attribute disable the whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing shift. */ noBoxZoom: boolean; /** * The `no-tap` attribute disables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as contextmenu events). */ noTap: boolean; /** * The `tap-tolerance` attribute sets the max number of pixels a user can shift his finger during touch for it to be considered a valid tap. */ tapTolerance: number; /** * The `no-track-resize` attribute disables whether the map automatically handles browser window resize to update itself. */ noTrackResize: boolean; /** * The `world-copy-jump` attribute sets whether the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible. */ worldCopyJump: boolean; /** * The `no-close-popup-on-click` attribute disables whether popups are closed when user clicks the map. */ noClosePopupOnClick: boolean; /** * The `no-bounce-at-zoom-limits` attribute disables whether the map to zoom beyond min/max zoom and then bounce back when pinch-zooming. */ noBounceAtZoomLimits: boolean; /** * The `no-keyboard` attribute disables whether the map is focusable and allows users to navigate the map with keyboard arrows and +/- keys. */ noKeyboard: boolean; /** * The `no-inertia` attribute disables panning of the map will have an inertia effect where the map builds momentum while dragging and continues moving in the same direction for some time. Feels especially nice on touch devices. */ noInertia: boolean; /** * The `inertia-deceleration` attribute sets the rate with which the inertial movement slows down, in pixels/second2. */ inertiaDeceleration: number; /** * The `inertia-max-speed` attribute sets the max speed of the inertial movement, in pixels/second. */ inertiaMaxSpeed: number; /** * The `no-zoom-control` attribute disables the zoom control is added to the map by default. */ noZoomControl: boolean; /** * The `no-attribution-control` attribute disable the attribution control is added to the map by default. */ noAttributionControl: boolean; /** * The `zoom-animation-threshold` attribute sets the maximum number of zoom level differences that still use animation */ zoomAnimationThreshold: number; /** * `L.Icon.Default.imagePath` url. When unset, the element will attempt to guess using `import.meta.url`. */ get imagePath(): string; set imagePath(path: string); private __imagePath; /** * If set, the map is zoomed such that all elements in it are visible */ fitToMarkers: boolean; private mapReady; private mapContainer; private features?; /** @private */ readonly children: HTMLCollectionOf & { isLayer?: () => boolean; }>; /** * External CSS stylesheet */ stylesheet?: string; get latLng(): L.LatLng; private get elements(); private _ignoreViewChange; private mutationObserver; private intersectionObserver; private resizeObserver; connectedCallback(): void; disconnectedCallback(): void; private startObserver; private stopObserver; render(): TemplateResult; initMap(): void; /** * Returns a GeoJSON including all the features of the map */ toGeoJSON(): { type: 'FeatureCollection'; features: unknown; }; fitBoundsToMarkers(): Promise; panToMarker(marker: L.Marker): void; /** * Get the element's feature or layer, * first ensuring that the element is defined and registered on the map. */ private getFeatureFromElement; private invalidateSize; fitToMarkersChanged(): void; viewChanged(): void; private initDefaultLayer; private onLoad; private onMoveend; private onZoomend; private onIntersection; private onResize; private onMutation; } export {};