New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details
Socket
Book a DemoSign in
Socket

react-leaflet

Package Overview
Dependencies
Maintainers
1
Versions
139
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-leaflet - npm Package Compare versions

Comparing version
3.2.2
to
4.2.1
+4
lib/AttributionControl.d.ts
/// <reference types="react" />
import { Control } from 'leaflet';
export type AttributionControlProps = Control.AttributionOptions;
export declare const AttributionControl: import("react").ForwardRefExoticComponent<Control.AttributionOptions & import("react").RefAttributes<Control.Attribution>>;
import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const AttributionControl = createControlComponent(function createAttributionControl(props) {
return new Control.Attribution(props);
});
/// <reference types="react" />
import { type CircleProps } from '@react-leaflet/core';
import { Circle as LeafletCircle } from 'leaflet';
export type { CircleProps } from '@react-leaflet/core';
export declare const Circle: import("react").ForwardRefExoticComponent<CircleProps & import("react").RefAttributes<LeafletCircle<any>>>;
import { createElementObject, createPathComponent, extendContext, updateCircle } from '@react-leaflet/core';
import { Circle as LeafletCircle } from 'leaflet';
export const Circle = createPathComponent(function createCircle({ center , children: _c , ...options }, ctx) {
const circle = new LeafletCircle(center, options);
return createElementObject(circle, extendContext(ctx, {
overlayContainer: circle
}));
}, updateCircle);
/// <reference types="react" />
import { type CircleMarkerProps } from '@react-leaflet/core';
import { CircleMarker as LeafletCircleMarker } from 'leaflet';
export type { CircleMarkerProps } from '@react-leaflet/core';
export declare const CircleMarker: import("react").ForwardRefExoticComponent<CircleMarkerProps & import("react").RefAttributes<LeafletCircleMarker<any>>>;
import { createElementObject, createPathComponent, extendContext, updateCircle } from '@react-leaflet/core';
import { CircleMarker as LeafletCircleMarker } from 'leaflet';
export const CircleMarker = createPathComponent(function createCircleMarker({ center , children: _c , ...options }, ctx) {
const marker = new LeafletCircleMarker(center, options);
return createElementObject(marker, extendContext(ctx, {
overlayContainer: marker
}));
}, updateCircle);
/// <reference types="react" />
import { type PathProps } from '@react-leaflet/core';
import { FeatureGroup as LeafletFeatureGroup } from 'leaflet';
import type { LayerGroupProps } from './LayerGroup.js';
export interface FeatureGroupProps extends LayerGroupProps, PathProps {
}
export declare const FeatureGroup: import("react").ForwardRefExoticComponent<FeatureGroupProps & import("react").RefAttributes<LeafletFeatureGroup<any>>>;
import { createElementObject, createPathComponent, extendContext } from '@react-leaflet/core';
import { FeatureGroup as LeafletFeatureGroup } from 'leaflet';
export const FeatureGroup = createPathComponent(function createFeatureGroup({ children: _c , ...options }, ctx) {
const group = new LeafletFeatureGroup([], options);
return createElementObject(group, extendContext(ctx, {
layerContainer: group,
overlayContainer: group
}));
});
/// <reference types="react" />
import { type PathProps } from '@react-leaflet/core';
import type { GeoJsonObject } from 'geojson';
import { GeoJSON as LeafletGeoJSON, type GeoJSONOptions } from 'leaflet';
import type { LayerGroupProps } from './LayerGroup.js';
export interface GeoJSONProps extends GeoJSONOptions, LayerGroupProps, PathProps {
data: GeoJsonObject;
}
export declare const GeoJSON: import("react").ForwardRefExoticComponent<GeoJSONProps & import("react").RefAttributes<LeafletGeoJSON<any, import("geojson").Geometry>>>;
import { createElementObject, createPathComponent, extendContext } from '@react-leaflet/core';
import { GeoJSON as LeafletGeoJSON } from 'leaflet';
export const GeoJSON = createPathComponent(function createGeoJSON({ data , ...options }, ctx) {
const geoJSON = new LeafletGeoJSON(data, options);
return createElementObject(geoJSON, extendContext(ctx, {
overlayContainer: geoJSON
}));
}, function updateGeoJSON(layer, props, prevProps) {
if (props.style !== prevProps.style) {
if (props.style == null) {
layer.resetStyle();
} else {
layer.setStyle(props.style);
}
}
});
import type { LeafletEventHandlerFnMap, Map } from 'leaflet';
export declare function useMap(): Map;
export declare function useMapEvent<T extends keyof LeafletEventHandlerFnMap>(type: T, handler: LeafletEventHandlerFnMap[T]): Map;
export declare function useMapEvents(handlers: LeafletEventHandlerFnMap): Map;
import { useLeafletContext } from '@react-leaflet/core';
import { useEffect } from 'react';
export function useMap() {
return useLeafletContext().map;
}
export function useMapEvent(type, handler) {
const map = useMap();
useEffect(function addMapEventHandler() {
// @ts-ignore event type
map.on(type, handler);
return function removeMapEventHandler() {
// @ts-ignore event type
map.off(type, handler);
};
}, [
map,
type,
handler
]);
return map;
}
export function useMapEvents(handlers) {
const map = useMap();
useEffect(function addMapEventHandlers() {
map.on(handlers);
return function removeMapEventHandlers() {
map.off(handlers);
};
}, [
map,
handlers
]);
return map;
}
import { type MediaOverlayProps } from '@react-leaflet/core';
import { ImageOverlay as LeafletImageOverlay } from 'leaflet';
import type { ReactNode } from 'react';
export interface ImageOverlayProps extends MediaOverlayProps {
children?: ReactNode;
url: string;
}
export declare const ImageOverlay: import("react").ForwardRefExoticComponent<ImageOverlayProps & import("react").RefAttributes<LeafletImageOverlay>>;
import { createElementObject, createLayerComponent, extendContext, updateMediaOverlay } from '@react-leaflet/core';
import { LatLngBounds, ImageOverlay as LeafletImageOverlay } from 'leaflet';
export const ImageOverlay = createLayerComponent(function createImageOveraly({ bounds , url , ...options }, ctx) {
const overlay = new LeafletImageOverlay(url, bounds, options);
return createElementObject(overlay, extendContext(ctx, {
overlayContainer: overlay
}));
}, function updateImageOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
if (props.bounds !== prevProps.bounds) {
const bounds = props.bounds instanceof LatLngBounds ? props.bounds : new LatLngBounds(props.bounds);
overlay.setBounds(bounds);
}
if (props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
});
export { useMap, useMapEvent, useMapEvents } from './hooks.js';
export { AttributionControl, type AttributionControlProps, } from './AttributionControl.js';
export { Circle, type CircleProps } from './Circle.js';
export { CircleMarker, type CircleMarkerProps } from './CircleMarker.js';
export { FeatureGroup, type FeatureGroupProps } from './FeatureGroup.js';
export { GeoJSON, type GeoJSONProps } from './GeoJSON.js';
export { ImageOverlay, type ImageOverlayProps } from './ImageOverlay.js';
export { LayerGroup, type LayerGroupProps } from './LayerGroup.js';
export { LayersControl, type LayersControlProps, type ControlledLayerProps, } from './LayersControl.js';
export { MapContainer, type MapContainerProps } from './MapContainer.js';
export { Marker, type MarkerProps } from './Marker.js';
export { Pane, type PaneProps } from './Pane.js';
export { Polygon, type PolygonProps } from './Polygon.js';
export { Polyline, type PolylineProps } from './Polyline.js';
export { Popup, type PopupProps } from './Popup.js';
export { Rectangle, type RectangleProps } from './Rectangle.js';
export { ScaleControl, type ScaleControlProps } from './ScaleControl.js';
export { SVGOverlay, type SVGOverlayProps } from './SVGOverlay.js';
export { TileLayer, type TileLayerProps } from './TileLayer.js';
export { Tooltip, type TooltipProps } from './Tooltip.js';
export { VideoOverlay, type VideoOverlayProps } from './VideoOverlay.js';
export { WMSTileLayer, type WMSTileLayerProps } from './WMSTileLayer.js';
export { ZoomControl, type ZoomControlProps } from './ZoomControl.js';
export { useMap, useMapEvent, useMapEvents } from './hooks.js';
export { AttributionControl } from './AttributionControl.js';
export { Circle } from './Circle.js';
export { CircleMarker } from './CircleMarker.js';
export { FeatureGroup } from './FeatureGroup.js';
export { GeoJSON } from './GeoJSON.js';
export { ImageOverlay } from './ImageOverlay.js';
export { LayerGroup } from './LayerGroup.js';
export { LayersControl } from './LayersControl.js';
export { MapContainer } from './MapContainer.js';
export { Marker } from './Marker.js';
export { Pane } from './Pane.js';
export { Polygon } from './Polygon.js';
export { Polyline } from './Polyline.js';
export { Popup } from './Popup.js';
export { Rectangle } from './Rectangle.js';
export { ScaleControl } from './ScaleControl.js';
export { SVGOverlay } from './SVGOverlay.js';
export { TileLayer } from './TileLayer.js';
export { Tooltip } from './Tooltip.js';
export { VideoOverlay } from './VideoOverlay.js';
export { WMSTileLayer } from './WMSTileLayer.js';
export { ZoomControl } from './ZoomControl.js';
import { type EventedProps } from '@react-leaflet/core';
import { LayerGroup as LeafletLayerGroup, type LayerOptions } from 'leaflet';
import type { ReactNode } from 'react';
export interface LayerGroupProps extends LayerOptions, EventedProps {
children?: ReactNode;
}
export declare const LayerGroup: import("react").ForwardRefExoticComponent<LayerGroupProps & import("react").RefAttributes<LeafletLayerGroup<any>>>;
import { createElementObject, createLayerComponent, extendContext } from '@react-leaflet/core';
import { LayerGroup as LeafletLayerGroup } from 'leaflet';
export const LayerGroup = createLayerComponent(function createLayerGroup({ children: _c , ...options }, ctx) {
const group = new LeafletLayerGroup([], options);
return createElementObject(group, extendContext(ctx, {
layerContainer: group
}));
});
import { Control, type Layer } from 'leaflet';
import React, { type ForwardRefExoticComponent, type FunctionComponent, type ReactNode, type RefAttributes } from 'react';
export interface LayersControlProps extends Control.LayersOptions {
children?: ReactNode;
}
export declare const useLayersControlElement: (props: LayersControlProps, context: Readonly<{
__version: number;
map: import("leaflet").Map;
layerContainer?: import("leaflet").LayerGroup<any> | import("@react-leaflet/core/lib/context").ControlledLayer | undefined;
layersControl?: Control.Layers | undefined;
overlayContainer?: Layer | undefined;
pane?: string | undefined;
}>) => React.MutableRefObject<Readonly<{
instance: Control.Layers;
context: Readonly<{
__version: number;
map: import("leaflet").Map;
layerContainer?: import("leaflet").LayerGroup<any> | import("@react-leaflet/core/lib/context").ControlledLayer | undefined;
layersControl?: Control.Layers | undefined;
overlayContainer?: Layer | undefined;
pane?: string | undefined;
}>;
container?: any;
}>>;
export declare const useLayersControl: (props: LayersControlProps) => React.MutableRefObject<Readonly<{
instance: Control.Layers;
context: Readonly<{
__version: number;
map: import("leaflet").Map;
layerContainer?: import("leaflet").LayerGroup<any> | import("@react-leaflet/core/lib/context").ControlledLayer | undefined;
layersControl?: Control.Layers | undefined;
overlayContainer?: Layer | undefined;
pane?: string | undefined;
}>;
container?: any;
}>>;
export interface ControlledLayerProps {
checked?: boolean;
children: ReactNode;
name: string;
}
export declare const LayersControl: ForwardRefExoticComponent<LayersControlProps & RefAttributes<Control.Layers>> & {
BaseLayer: FunctionComponent<ControlledLayerProps>;
Overlay: FunctionComponent<ControlledLayerProps>;
};
type AddLayerFunc = (layersControl: Control.Layers, layer: Layer, name: string) => void;
export declare function createControlledLayer(addLayerToControl: AddLayerFunc): (props: ControlledLayerProps) => JSX.Element | null;
export {};
import { LeafletProvider, createContainerComponent, createControlHook, createElementHook, createElementObject, extendContext, useLeafletContext } from '@react-leaflet/core';
import { Control } from 'leaflet';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export const useLayersControlElement = createElementHook(function createLayersControl({ children: _c , ...options }, ctx) {
const control = new Control.Layers(undefined, undefined, options);
return createElementObject(control, extendContext(ctx, {
layersControl: control
}));
}, function updateLayersControl(control, props, prevProps) {
if (props.collapsed !== prevProps.collapsed) {
if (props.collapsed === true) {
control.collapse();
} else {
control.expand();
}
}
});
export const useLayersControl = createControlHook(useLayersControlElement);
// @ts-ignore
export const LayersControl = createContainerComponent(useLayersControl);
export function createControlledLayer(addLayerToControl) {
return function ControlledLayer(props) {
const parentContext = useLeafletContext();
const propsRef = useRef(props);
const [layer, setLayer] = useState(null);
const { layersControl , map } = parentContext;
const addLayer = useCallback((layerToAdd)=>{
if (layersControl != null) {
if (propsRef.current.checked) {
map.addLayer(layerToAdd);
}
addLayerToControl(layersControl, layerToAdd, propsRef.current.name);
setLayer(layerToAdd);
}
}, [
layersControl,
map
]);
const removeLayer = useCallback((layerToRemove)=>{
layersControl?.removeLayer(layerToRemove);
setLayer(null);
}, [
layersControl
]);
const context = useMemo(()=>{
return extendContext(parentContext, {
layerContainer: {
addLayer,
removeLayer
}
});
}, [
parentContext,
addLayer,
removeLayer
]);
useEffect(()=>{
if (layer !== null && propsRef.current !== props) {
if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {
map.addLayer(layer);
} else if (propsRef.current.checked === true && (props.checked == null || props.checked === false)) {
map.removeLayer(layer);
}
propsRef.current = props;
}
});
return props.children ? /*#__PURE__*/ React.createElement(LeafletProvider, {
value: context
}, props.children) : null;
};
}
LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {
layersControl.addBaseLayer(layer, name);
});
LayersControl.Overlay = createControlledLayer(function addOverlay(layersControl, layer, name) {
layersControl.addOverlay(layer, name);
});
import { type FitBoundsOptions, type LatLngBoundsExpression, Map as LeafletMap, type MapOptions } from 'leaflet';
import React, { type CSSProperties, type ReactNode } from 'react';
export interface MapContainerProps extends MapOptions {
bounds?: LatLngBoundsExpression;
boundsOptions?: FitBoundsOptions;
children?: ReactNode;
className?: string;
id?: string;
placeholder?: ReactNode;
style?: CSSProperties;
whenReady?: () => void;
}
export declare const MapContainer: React.ForwardRefExoticComponent<MapContainerProps & React.RefAttributes<LeafletMap>>;
function _extends() {
_extends = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
import { LeafletProvider, createLeafletContext } from '@react-leaflet/core';
import { Map as LeafletMap } from 'leaflet';
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
function MapContainerComponent({ bounds , boundsOptions , center , children , className , id , placeholder , style , whenReady , zoom , ...options }, forwardedRef) {
const [props] = useState({
className,
id,
style
});
const [context, setContext] = useState(null);
useImperativeHandle(forwardedRef, ()=>context?.map ?? null, [
context
]);
const mapRef = useCallback((node)=>{
if (node !== null && context === null) {
const map = new LeafletMap(node, options);
if (center != null && zoom != null) {
map.setView(center, zoom);
} else if (bounds != null) {
map.fitBounds(bounds, boundsOptions);
}
if (whenReady != null) {
map.whenReady(whenReady);
}
setContext(createLeafletContext(map));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(()=>{
return ()=>{
context?.map.remove();
};
}, [
context
]);
const contents = context ? /*#__PURE__*/ React.createElement(LeafletProvider, {
value: context
}, children) : placeholder ?? null;
return /*#__PURE__*/ React.createElement("div", _extends({}, props, {
ref: mapRef
}), contents);
}
export const MapContainer = /*#__PURE__*/ forwardRef(MapContainerComponent);
import { type EventedProps } from '@react-leaflet/core';
import { type LatLngExpression, Marker as LeafletMarker, type MarkerOptions } from 'leaflet';
import type { ReactNode } from 'react';
export interface MarkerProps extends MarkerOptions, EventedProps {
children?: ReactNode;
position: LatLngExpression;
}
export declare const Marker: import("react").ForwardRefExoticComponent<MarkerProps & import("react").RefAttributes<LeafletMarker<any>>>;
import { createElementObject, createLayerComponent, extendContext } from '@react-leaflet/core';
import { Marker as LeafletMarker } from 'leaflet';
export const Marker = createLayerComponent(function createMarker({ position , ...options }, ctx) {
const marker = new LeafletMarker(position, options);
return createElementObject(marker, extendContext(ctx, {
overlayContainer: marker
}));
}, function updateMarker(marker, props, prevProps) {
if (props.position !== prevProps.position) {
marker.setLatLng(props.position);
}
if (props.icon != null && props.icon !== prevProps.icon) {
marker.setIcon(props.icon);
}
if (props.zIndexOffset != null && props.zIndexOffset !== prevProps.zIndexOffset) {
marker.setZIndexOffset(props.zIndexOffset);
}
if (props.opacity != null && props.opacity !== prevProps.opacity) {
marker.setOpacity(props.opacity);
}
if (marker.dragging != null && props.draggable !== prevProps.draggable) {
if (props.draggable === true) {
marker.dragging.enable();
} else {
marker.dragging.disable();
}
}
});
import React, { type CSSProperties, type ReactNode } from 'react';
export interface PaneProps {
children?: ReactNode;
className?: string;
name: string;
pane?: string;
style?: CSSProperties;
}
export declare const Pane: React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLElement>>;
import { LeafletProvider, addClassName, useLeafletContext } from '@react-leaflet/core';
import React, { forwardRef, useState, useEffect, useImperativeHandle, useMemo } from 'react';
import { createPortal } from 'react-dom';
const DEFAULT_PANES = [
'mapPane',
'markerPane',
'overlayPane',
'popupPane',
'shadowPane',
'tilePane',
'tooltipPane'
];
function omitPane(obj, pane) {
const { [pane]: _p , ...others } = obj;
return others;
}
function createPane(name, props, context) {
if (DEFAULT_PANES.indexOf(name) !== -1) {
throw new Error(`You must use a unique name for a pane that is not a default Leaflet pane: ${name}`);
}
if (context.map.getPane(name) != null) {
throw new Error(`A pane with this name already exists: ${name}`);
}
const parentPaneName = props.pane ?? context.pane;
const parentPane = parentPaneName ? context.map.getPane(parentPaneName) : undefined;
const element = context.map.createPane(name, parentPane);
if (props.className != null) {
addClassName(element, props.className);
}
if (props.style != null) {
Object.keys(props.style).forEach((key)=>{
// @ts-ignore
element.style[key] = props.style[key];
});
}
return element;
}
function PaneComponent(props, forwardedRef) {
const [paneName] = useState(props.name);
const [paneElement, setPaneElement] = useState(null);
useImperativeHandle(forwardedRef, ()=>paneElement, [
paneElement
]);
const context = useLeafletContext();
// eslint-disable-next-line react-hooks/exhaustive-deps
const newContext = useMemo(()=>({
...context,
pane: paneName
}), [
context
]);
useEffect(()=>{
setPaneElement(createPane(paneName, props, context));
return function removeCreatedPane() {
const pane = context.map.getPane(paneName);
pane?.remove?.();
// @ts-ignore map internals
if (context.map._panes != null) {
// @ts-ignore map internals
context.map._panes = omitPane(context.map._panes, paneName);
// @ts-ignore map internals
context.map._paneRenderers = omitPane(// @ts-ignore map internals
context.map._paneRenderers, paneName);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return props.children != null && paneElement != null ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(LeafletProvider, {
value: newContext
}, props.children), paneElement) : null;
}
export const Pane = /*#__PURE__*/ forwardRef(PaneComponent);
import { type PathProps } from '@react-leaflet/core';
import { type LatLngExpression, type PolylineOptions, Polygon as LeafletPolygon } from 'leaflet';
import type { ReactNode } from 'react';
export interface PolygonProps extends PolylineOptions, PathProps {
children?: ReactNode;
positions: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][];
}
export declare const Polygon: import("react").ForwardRefExoticComponent<PolygonProps & import("react").RefAttributes<LeafletPolygon<any>>>;
import { createElementObject, createPathComponent, extendContext } from '@react-leaflet/core';
import { Polygon as LeafletPolygon } from 'leaflet';
export const Polygon = createPathComponent(function createPolygon({ positions , ...options }, ctx) {
const polygon = new LeafletPolygon(positions, options);
return createElementObject(polygon, extendContext(ctx, {
overlayContainer: polygon
}));
}, function updatePolygon(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
import { type PathProps } from '@react-leaflet/core';
import { type LatLngExpression, Polyline as LeafletPolyline, type PolylineOptions } from 'leaflet';
import type { ReactNode } from 'react';
export interface PolylineProps extends PolylineOptions, PathProps {
children?: ReactNode;
positions: LatLngExpression[] | LatLngExpression[][];
}
export declare const Polyline: import("react").ForwardRefExoticComponent<PolylineProps & import("react").RefAttributes<LeafletPolyline<import("geojson").LineString | import("geojson").MultiLineString, any>>>;
import { createElementObject, createPathComponent, extendContext } from '@react-leaflet/core';
import { Polyline as LeafletPolyline } from 'leaflet';
export const Polyline = createPathComponent(function createPolyline({ positions , ...options }, ctx) {
const polyline = new LeafletPolyline(positions, options);
return createElementObject(polyline, extendContext(ctx, {
overlayContainer: polyline
}));
}, function updatePolyline(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
import { type EventedProps } from '@react-leaflet/core';
import { type LatLngExpression, Popup as LeafletPopup, type PopupOptions } from 'leaflet';
import { type ReactNode } from 'react';
export interface PopupProps extends PopupOptions, EventedProps {
children?: ReactNode;
position?: LatLngExpression;
}
export declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<LeafletPopup>>;
import { createElementObject, createOverlayComponent } from '@react-leaflet/core';
import { Popup as LeafletPopup } from 'leaflet';
import { useEffect } from 'react';
export const Popup = createOverlayComponent(function createPopup(props, context) {
const popup = new LeafletPopup(props, context.overlayContainer);
return createElementObject(popup, context);
}, function usePopupLifecycle(element, context, { position }, setOpen) {
useEffect(function addPopup() {
const { instance } = element;
function onPopupOpen(event) {
if (event.popup === instance) {
instance.update();
setOpen(true);
}
}
function onPopupClose(event) {
if (event.popup === instance) {
setOpen(false);
}
}
context.map.on({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
if (context.overlayContainer == null) {
// Attach to a Map
if (position != null) {
instance.setLatLng(position);
}
instance.openOn(context.map);
} else {
// Attach to container component
context.overlayContainer.bindPopup(instance);
}
return function removePopup() {
context.map.off({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
context.overlayContainer?.unbindPopup();
context.map.removeLayer(instance);
};
}, [
element,
context,
setOpen,
position
]);
});
import { type PathProps } from '@react-leaflet/core';
import { type LatLngBoundsExpression, Rectangle as LeafletRectangle, type PathOptions } from 'leaflet';
import type { ReactNode } from 'react';
export interface RectangleProps extends PathOptions, PathProps {
bounds: LatLngBoundsExpression;
children?: ReactNode;
}
export declare const Rectangle: import("react").ForwardRefExoticComponent<RectangleProps & import("react").RefAttributes<LeafletRectangle<any>>>;
import { createElementObject, createPathComponent, extendContext } from '@react-leaflet/core';
import { Rectangle as LeafletRectangle } from 'leaflet';
export const Rectangle = createPathComponent(function createRectangle({ bounds , ...options }, ctx) {
const rectangle = new LeafletRectangle(bounds, options);
return createElementObject(rectangle, extendContext(ctx, {
overlayContainer: rectangle
}));
}, function updateRectangle(layer, props, prevProps) {
if (props.bounds !== prevProps.bounds) {
layer.setBounds(props.bounds);
}
});
/// <reference types="react" />
import { Control } from 'leaflet';
export type ScaleControlProps = Control.ScaleOptions;
export declare const ScaleControl: import("react").ForwardRefExoticComponent<Control.ScaleOptions & import("react").RefAttributes<Control.Scale>>;
import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const ScaleControl = createControlComponent(function createScaleControl(props) {
return new Control.Scale(props);
});
import { type MediaOverlayProps } from '@react-leaflet/core';
import { SVGOverlay as LeafletSVGOverlay } from 'leaflet';
import { type ReactNode } from 'react';
export interface SVGOverlayProps extends MediaOverlayProps {
attributes?: Record<string, string>;
children?: ReactNode;
}
export declare const useSVGOverlayElement: (props: SVGOverlayProps, context: Readonly<{
__version: number;
map: import("leaflet").Map;
layerContainer?: import("leaflet").LayerGroup<any> | import("@react-leaflet/core/lib/context").ControlledLayer | undefined;
layersControl?: import("leaflet").Control.Layers | undefined;
overlayContainer?: import("leaflet").Layer | undefined;
pane?: string | undefined;
}>) => import("react").MutableRefObject<Readonly<{
instance: LeafletSVGOverlay;
context: Readonly<{
__version: number;
map: import("leaflet").Map;
layerContainer?: import("leaflet").LayerGroup<any> | import("@react-leaflet/core/lib/context").ControlledLayer | undefined;
layersControl?: import("leaflet").Control.Layers | undefined;
overlayContainer?: import("leaflet").Layer | undefined;
pane?: string | undefined;
}>;
container?: any;
}>>;
export declare const useSVGOverlay: (props: SVGOverlayProps) => import("react").MutableRefObject<Readonly<{
instance: LeafletSVGOverlay;
context: Readonly<{
__version: number;
map: import("leaflet").Map;
layerContainer?: import("leaflet").LayerGroup<any> | import("@react-leaflet/core/lib/context").ControlledLayer | undefined;
layersControl?: import("leaflet").Control.Layers | undefined;
overlayContainer?: import("leaflet").Layer | undefined;
pane?: string | undefined;
}>;
container?: any;
}>>;
export declare const SVGOverlay: import("react").ForwardRefExoticComponent<SVGOverlayProps & import("react").RefAttributes<LeafletSVGOverlay>>;
import { createElementHook, createElementObject, createLayerHook, updateMediaOverlay } from '@react-leaflet/core';
import { SVGOverlay as LeafletSVGOverlay } from 'leaflet';
import { forwardRef, useImperativeHandle } from 'react';
import { createPortal } from 'react-dom';
export const useSVGOverlayElement = createElementHook(function createSVGOverlay(props, context) {
const { attributes , bounds , ...options } = props;
const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
container.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (attributes != null) {
Object.keys(attributes).forEach((name)=>{
container.setAttribute(name, attributes[name]);
});
}
const overlay = new LeafletSVGOverlay(container, bounds, options);
return createElementObject(overlay, context, container);
}, updateMediaOverlay);
export const useSVGOverlay = createLayerHook(useSVGOverlayElement);
function SVGOverlayComponent({ children , ...options }, forwardedRef) {
const { instance , container } = useSVGOverlay(options).current;
useImperativeHandle(forwardedRef, ()=>instance);
return container == null || children == null ? null : /*#__PURE__*/ createPortal(children, container);
}
export const SVGOverlay = /*#__PURE__*/ forwardRef(SVGOverlayComponent);
/// <reference types="react" />
import { type LayerProps } from '@react-leaflet/core';
import { TileLayer as LeafletTileLayer, type TileLayerOptions } from 'leaflet';
export interface TileLayerProps extends TileLayerOptions, LayerProps {
url: string;
}
export declare const TileLayer: import("react").ForwardRefExoticComponent<TileLayerProps & import("react").RefAttributes<LeafletTileLayer>>;
import { createElementObject, createTileLayerComponent, updateGridLayer, withPane } from '@react-leaflet/core';
import { TileLayer as LeafletTileLayer } from 'leaflet';
export const TileLayer = createTileLayerComponent(function createTileLayer({ url , ...options }, context) {
const layer = new LeafletTileLayer(url, withPane(options, context));
return createElementObject(layer, context);
}, function updateTileLayer(layer, props, prevProps) {
updateGridLayer(layer, props, prevProps);
const { url } = props;
if (url != null && url !== prevProps.url) {
layer.setUrl(url);
}
});
import { type EventedProps } from '@react-leaflet/core';
import { type LatLngExpression, Tooltip as LeafletTooltip, type TooltipOptions } from 'leaflet';
import { type ReactNode } from 'react';
export interface TooltipProps extends TooltipOptions, EventedProps {
children?: ReactNode;
position?: LatLngExpression;
}
export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<LeafletTooltip>>;
import { createElementObject, createOverlayComponent } from '@react-leaflet/core';
import { Tooltip as LeafletTooltip } from 'leaflet';
import { useEffect } from 'react';
export const Tooltip = createOverlayComponent(function createTooltip(props, context) {
const tooltip = new LeafletTooltip(props, context.overlayContainer);
return createElementObject(tooltip, context);
}, function useTooltipLifecycle(element, context, { position }, setOpen) {
useEffect(function addTooltip() {
const container = context.overlayContainer;
if (container == null) {
return;
}
const { instance } = element;
const onTooltipOpen = (event)=>{
if (event.tooltip === instance) {
if (position != null) {
instance.setLatLng(position);
}
instance.update();
setOpen(true);
}
};
const onTooltipClose = (event)=>{
if (event.tooltip === instance) {
setOpen(false);
}
};
container.on({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
});
container.bindTooltip(instance);
return function removeTooltip() {
container.off({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
});
// @ts-ignore protected property
if (container._map != null) {
container.unbindTooltip();
}
};
}, [
element,
context,
setOpen,
position
]);
});
import { type MediaOverlayProps } from '@react-leaflet/core';
import { VideoOverlay as LeafletVideoOverlay, type VideoOverlayOptions } from 'leaflet';
import type { ReactNode } from 'react';
export interface VideoOverlayProps extends MediaOverlayProps, VideoOverlayOptions {
children?: ReactNode;
play?: boolean;
url: string | string[] | HTMLVideoElement;
}
export declare const VideoOverlay: import("react").ForwardRefExoticComponent<VideoOverlayProps & import("react").RefAttributes<LeafletVideoOverlay>>;
import { createElementObject, createLayerComponent, extendContext, updateMediaOverlay } from '@react-leaflet/core';
import { VideoOverlay as LeafletVideoOverlay } from 'leaflet';
export const VideoOverlay = createLayerComponent(function createVideoOverlay({ bounds , url , ...options }, ctx) {
const overlay = new LeafletVideoOverlay(url, bounds, options);
if (options.play === true) {
overlay.getElement()?.play();
}
return createElementObject(overlay, extendContext(ctx, {
overlayContainer: overlay
}));
}, function updateVideoOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
if (typeof props.url === 'string' && props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
const video = overlay.getElement();
if (video != null) {
if (props.play === true && !prevProps.play) {
video.play();
} else if (!props.play && prevProps.play === true) {
video.pause();
}
}
});
/// <reference types="react" />
import { type LayerProps } from '@react-leaflet/core';
import { TileLayer, type WMSOptions, type WMSParams } from 'leaflet';
export interface WMSTileLayerProps extends WMSOptions, LayerProps {
params?: WMSParams;
url: string;
}
export declare const WMSTileLayer: import("react").ForwardRefExoticComponent<WMSTileLayerProps & import("react").RefAttributes<TileLayer.WMS>>;
import { createElementObject, createTileLayerComponent, updateGridLayer, withPane } from '@react-leaflet/core';
import { TileLayer } from 'leaflet';
export const WMSTileLayer = createTileLayerComponent(function createWMSTileLayer({ eventHandlers: _eh , params ={} , url , ...options }, context) {
const layer = new TileLayer.WMS(url, {
...params,
...withPane(options, context)
});
return createElementObject(layer, context);
}, function updateWMSTileLayer(layer, props, prevProps) {
updateGridLayer(layer, props, prevProps);
if (props.params != null && props.params !== prevProps.params) {
layer.setParams(props.params);
}
});
/// <reference types="react" />
import { Control } from 'leaflet';
export type ZoomControlProps = Control.ZoomOptions;
export declare const ZoomControl: import("react").ForwardRefExoticComponent<Control.ZoomOptions & import("react").RefAttributes<Control.Zoom>>;
import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const ZoomControl = createControlComponent(function createZoomControl(props) {
return new Control.Zoom(props);
});
+43
-35
{
"name": "react-leaflet",
"version": "3.2.2",
"version": "4.2.1",
"description": "React components for Leaflet maps",
"main": "cjs/index.js",
"module": "esm/index.js",
"types": "types/index.d.ts",
"sideEffects": false,
"scripts": {
"build:clean": "del cjs esm types umd",
"build:cjs": "babel src --out-dir cjs --extensions .ts,.tsx",
"build:esm": "cross-env BABEL_ENV=esm babel src --out-dir esm --extensions .ts,.tsx",
"build:types": "tsc --emitDeclarationOnly",
"build:umd": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c",
"build:umd:min": "cross-env BABEL_ENV=rollup NODE_ENV=production rollup -c",
"build": "yarn run build:clean && yarn run build:cjs && yarn run build:esm && yarn run build:types && yarn run build:umd && yarn run build:umd:min",
"test:types": "tsc --noEmit",
"test:unit": "cross-env BABEL_ENV=development NODE_ENV=test jest",
"test": "yarn run test:types && yarn run test:unit",
"start": "yarn run test && yarn run build",
"prepare": "yarn run build"
},
"repository": {

@@ -39,27 +21,53 @@ "type": "git",

"homepage": "https://react-leaflet.js.org",
"type": "module",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"exports": {
".": "./lib/index.js",
"./*": "./lib/*.js"
},
"files": [
"cjs/*",
"esm/*",
"types/*",
"umd/*"
"lib/*"
],
"sideEffects": false,
"dependencies": {
"@react-leaflet/core": "^1.1.1"
"@react-leaflet/core": "^2.1.0"
},
"peerDependencies": {
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-dom": "^17.0.1"
"leaflet": "^1.9.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-node-resolve": "^13.0.5",
"@rollup/plugin-replace": "^3.0.0",
"rollup": "^2.58.0",
"rollup-plugin-terser": "^7.0.0"
"@types/geojson": "^7946.0.10",
"@types/leaflet": "^1.9.1",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11"
},
"jest": {
"testEnvironment": "jsdom"
"extensionsToTreatAsEsm": [
".ts",
".tsx"
],
"resolver": "ts-jest-resolver",
"testEnvironment": "jsdom",
"transform": {
"^.+\\.(t|j)sx?$": [
"@swc/jest",
{
"root": "../.."
}
]
}
},
"scripts": {
"build:clean": "del lib",
"build:js": "swc src -d ./lib --config-file ../../.swcrc",
"build:types": "tsc --emitDeclarationOnly",
"build": "pnpm run build:clean && pnpm run build:types && pnpm run build:js",
"test:types": "tsc --noEmit",
"test:unit": "cross-env NODE_ENV=test jest",
"test": "pnpm run test:types && pnpm run test:unit",
"start": "pnpm run test && pnpm run build"
}
}
}
"use strict";
exports.__esModule = true;
exports.AttributionControl = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const AttributionControl = (0, _core.createControlComponent)(function createAttributionControl(props) {
return new _leaflet.Control.Attribution(props);
});
exports.AttributionControl = AttributionControl;
"use strict";
exports.__esModule = true;
exports.Circle = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const Circle = (0, _core.createPathComponent)(function createCircle({
center,
children: _c,
...options
}, ctx) {
const instance = new _leaflet.Circle(center, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, _core.updateCircle);
exports.Circle = Circle;
"use strict";
exports.__esModule = true;
exports.CircleMarker = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const CircleMarker = (0, _core.createPathComponent)(function createCircleMarker({
center,
children: _c,
...options
}, ctx) {
const instance = new _leaflet.CircleMarker(center, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, _core.updateCircle);
exports.CircleMarker = CircleMarker;
"use strict";
exports.__esModule = true;
exports.FeatureGroup = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const FeatureGroup = (0, _core.createPathComponent)(function createFeatureGroup({
children: _c,
...options
}, ctx) {
const instance = new _leaflet.FeatureGroup([], options);
const context = { ...ctx,
layerContainer: instance,
overlayContainer: instance
};
return {
instance,
context
};
});
exports.FeatureGroup = FeatureGroup;
"use strict";
exports.__esModule = true;
exports.GeoJSON = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const GeoJSON = (0, _core.createPathComponent)(function createGeoJSON({
data,
...options
}, ctx) {
const instance = new _leaflet.GeoJSON(data, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateGeoJSON(layer, props, prevProps) {
if (props.style !== prevProps.style) {
if (props.style == null) {
layer.resetStyle();
} else {
layer.setStyle(props.style);
}
}
});
exports.GeoJSON = GeoJSON;
"use strict";
exports.__esModule = true;
exports.useMap = useMap;
exports.useMapEvent = useMapEvent;
exports.useMapEvents = useMapEvents;
var _core = require("@react-leaflet/core");
var _react = require("react");
function useMap() {
return (0, _core.useLeafletContext)().map;
}
function useMapEvent(type, handler) {
const map = useMap();
(0, _react.useEffect)(function addMapEventHandler() {
// @ts-ignore event type
map.on(type, handler);
return function removeMapEventHandler() {
// @ts-ignore event type
map.off(type, handler);
};
}, [map, type, handler]);
return map;
}
function useMapEvents(handlers) {
const map = useMap();
(0, _react.useEffect)(function addMapEventHandlers() {
map.on(handlers);
return function removeMapEventHandlers() {
map.off(handlers);
};
}, [map, handlers]);
return map;
}
"use strict";
exports.__esModule = true;
exports.ImageOverlay = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const ImageOverlay = (0, _core.createLayerComponent)(function createImageOveraly({
bounds,
url,
...options
}, ctx) {
const instance = new _leaflet.ImageOverlay(url, bounds, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateImageOverlay(overlay, props, prevProps) {
(0, _core.updateMediaOverlay)(overlay, props, prevProps);
if (props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
});
exports.ImageOverlay = ImageOverlay;
"use strict";
exports.__esModule = true;
exports.useMapEvents = exports.useMapEvent = exports.useMap = exports.ZoomControl = exports.WMSTileLayer = exports.VideoOverlay = exports.Tooltip = exports.TileLayer = exports.ScaleControl = exports.SVGOverlay = exports.Rectangle = exports.Popup = exports.Polyline = exports.Polygon = exports.Pane = exports.Marker = exports.MapContainer = exports.MapConsumer = exports.LayersControl = exports.LayerGroup = exports.ImageOverlay = exports.GeoJSON = exports.FeatureGroup = exports.CircleMarker = exports.Circle = exports.AttributionControl = void 0;
var _hooks = require("./hooks");
exports.useMap = _hooks.useMap;
exports.useMapEvent = _hooks.useMapEvent;
exports.useMapEvents = _hooks.useMapEvents;
var _AttributionControl = require("./AttributionControl");
exports.AttributionControl = _AttributionControl.AttributionControl;
var _Circle = require("./Circle");
exports.Circle = _Circle.Circle;
var _CircleMarker = require("./CircleMarker");
exports.CircleMarker = _CircleMarker.CircleMarker;
var _FeatureGroup = require("./FeatureGroup");
exports.FeatureGroup = _FeatureGroup.FeatureGroup;
var _GeoJSON = require("./GeoJSON");
exports.GeoJSON = _GeoJSON.GeoJSON;
var _ImageOverlay = require("./ImageOverlay");
exports.ImageOverlay = _ImageOverlay.ImageOverlay;
var _LayerGroup = require("./LayerGroup");
exports.LayerGroup = _LayerGroup.LayerGroup;
var _LayersControl = require("./LayersControl");
exports.LayersControl = _LayersControl.LayersControl;
var _MapConsumer = require("./MapConsumer");
exports.MapConsumer = _MapConsumer.MapConsumer;
var _MapContainer = require("./MapContainer");
exports.MapContainer = _MapContainer.MapContainer;
var _Marker = require("./Marker");
exports.Marker = _Marker.Marker;
var _Pane = require("./Pane");
exports.Pane = _Pane.Pane;
var _Polygon = require("./Polygon");
exports.Polygon = _Polygon.Polygon;
var _Polyline = require("./Polyline");
exports.Polyline = _Polyline.Polyline;
var _Popup = require("./Popup");
exports.Popup = _Popup.Popup;
var _Rectangle = require("./Rectangle");
exports.Rectangle = _Rectangle.Rectangle;
var _ScaleControl = require("./ScaleControl");
exports.ScaleControl = _ScaleControl.ScaleControl;
var _SVGOverlay = require("./SVGOverlay");
exports.SVGOverlay = _SVGOverlay.SVGOverlay;
var _TileLayer = require("./TileLayer");
exports.TileLayer = _TileLayer.TileLayer;
var _Tooltip = require("./Tooltip");
exports.Tooltip = _Tooltip.Tooltip;
var _VideoOverlay = require("./VideoOverlay");
exports.VideoOverlay = _VideoOverlay.VideoOverlay;
var _WMSTileLayer = require("./WMSTileLayer");
exports.WMSTileLayer = _WMSTileLayer.WMSTileLayer;
var _ZoomControl = require("./ZoomControl");
exports.ZoomControl = _ZoomControl.ZoomControl;
"use strict";
exports.__esModule = true;
exports.LayerGroup = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const LayerGroup = (0, _core.createLayerComponent)(function createLayerGroup({
children: _c,
...options
}, ctx) {
const instance = new _leaflet.LayerGroup([], options);
return {
instance,
context: { ...ctx,
layerContainer: instance
}
};
});
exports.LayerGroup = LayerGroup;
"use strict";
exports.__esModule = true;
exports.LayersControl = void 0;
exports.createControlledLayer = createControlledLayer;
exports.useLayersControlElement = exports.useLayersControl = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const useLayersControlElement = (0, _core.createElementHook)(function createLayersControl({
children: _c,
...options
}, ctx) {
const instance = new _leaflet.Control.Layers(undefined, undefined, options);
return {
instance,
context: { ...ctx,
layersControl: instance
}
};
}, function updateLayersControl(control, props, prevProps) {
if (props.collapsed !== prevProps.collapsed) {
if (props.collapsed === true) {
control.collapse();
} else {
control.expand();
}
}
});
exports.useLayersControlElement = useLayersControlElement;
const useLayersControl = (0, _core.createControlHook)(useLayersControlElement);
exports.useLayersControl = useLayersControl;
// @ts-ignore
const LayersControl = (0, _core.createContainerComponent)(useLayersControl);
exports.LayersControl = LayersControl;
function createControlledLayer(addLayerToControl) {
return function ControlledLayer(props) {
const parentContext = (0, _core.useLeafletContext)();
const propsRef = (0, _react.useRef)(props);
const [layer, setLayer] = (0, _react.useState)(null);
const {
layersControl,
map
} = parentContext;
const addLayer = (0, _react.useCallback)(layerToAdd => {
if (layersControl != null) {
if (propsRef.current.checked) {
map.addLayer(layerToAdd);
}
addLayerToControl(layersControl, layerToAdd, propsRef.current.name);
setLayer(layerToAdd);
}
}, [layersControl, map]);
const removeLayer = (0, _react.useCallback)(layerToRemove => {
layersControl == null ? void 0 : layersControl.removeLayer(layerToRemove);
setLayer(null);
}, [layersControl]);
const context = (0, _react.useMemo)(() => ({ ...parentContext,
layerContainer: {
addLayer,
removeLayer
}
}), [parentContext, addLayer, removeLayer]);
(0, _react.useEffect)(() => {
if (layer !== null && propsRef.current !== props) {
if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {
map.addLayer(layer);
} else if (propsRef.current.checked === true && (props.checked == null || props.checked === false)) {
map.removeLayer(layer);
}
propsRef.current = props;
}
});
return props.children ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, {
value: context
}, props.children) : null;
};
}
LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {
layersControl.addBaseLayer(layer, name);
});
LayersControl.Overlay = createControlledLayer(function addOverlay(layersControl, layer, name) {
layersControl.addOverlay(layer, name);
});
"use strict";
exports.__esModule = true;
exports.MapConsumer = MapConsumer;
var _hooks = require("./hooks");
function MapConsumer({
children
}) {
return children((0, _hooks.useMap)());
}
"use strict";
exports.__esModule = true;
exports.MapContainer = MapContainer;
exports.useMapElement = useMapElement;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function useMapElement(mapRef, props) {
const [map, setMap] = (0, _react.useState)(null);
(0, _react.useEffect)(() => {
if (mapRef.current !== null && map === null) {
const instance = new _leaflet.Map(mapRef.current, props);
if (props.center != null && props.zoom != null) {
instance.setView(props.center, props.zoom);
} else if (props.bounds != null) {
instance.fitBounds(props.bounds, props.boundsOptions);
}
if (props.whenReady != null) {
instance.whenReady(props.whenReady);
}
setMap(instance);
}
}, [mapRef, map, props]);
return map;
}
function MapContainer({
children,
className,
id,
placeholder,
style,
whenCreated,
...options
}) {
const mapRef = (0, _react.useRef)(null);
const map = useMapElement(mapRef, options);
const createdRef = (0, _react.useRef)(false);
(0, _react.useEffect)(() => {
if (map != null && createdRef.current === false && whenCreated != null) {
createdRef.current = true;
whenCreated(map);
}
}, [map, whenCreated]);
const [props] = (0, _react.useState)({
className,
id,
style
});
const context = (0, _react.useMemo)(() => map ? {
__version: _core.CONTEXT_VERSION,
map
} : null, [map]);
const contents = context ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, {
value: context
}, children) : placeholder ?? null;
return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
ref: mapRef
}), contents);
}
"use strict";
exports.__esModule = true;
exports.Marker = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const Marker = (0, _core.createLayerComponent)(function createMarker({
position,
...options
}, ctx) {
const instance = new _leaflet.Marker(position, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateMarker(marker, props, prevProps) {
if (props.position !== prevProps.position) {
marker.setLatLng(props.position);
}
if (props.icon != null && props.icon !== prevProps.icon) {
marker.setIcon(props.icon);
}
if (props.zIndexOffset != null && props.zIndexOffset !== prevProps.zIndexOffset) {
marker.setZIndexOffset(props.zIndexOffset);
}
if (props.opacity != null && props.opacity !== prevProps.opacity) {
marker.setOpacity(props.opacity);
}
if (marker.dragging != null && props.draggable !== prevProps.draggable) {
if (props.draggable === true) {
marker.dragging.enable();
} else {
marker.dragging.disable();
}
}
});
exports.Marker = Marker;
"use strict";
exports.__esModule = true;
exports.Pane = Pane;
var _core = require("@react-leaflet/core");
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const DEFAULT_PANES = ['mapPane', 'markerPane', 'overlayPane', 'popupPane', 'shadowPane', 'tilePane', 'tooltipPane'];
function omitPane(obj, pane) {
const {
[pane]: _p,
...others
} = obj;
return others;
}
function createPane(props, context) {
const name = props.name;
if (DEFAULT_PANES.indexOf(name) !== -1) {
throw new Error(`You must use a unique name for a pane that is not a default Leaflet pane: ${name}`);
}
if (context.map.getPane(name) != null) {
throw new Error(`A pane with this name already exists: ${name}`);
}
const parentPaneName = props.pane ?? context.pane;
const parentPane = parentPaneName ? context.map.getPane(parentPaneName) : undefined;
const element = context.map.createPane(name, parentPane);
if (props.className != null) {
(0, _core.addClassName)(element, props.className);
}
if (props.style != null) {
Object.keys(props.style).forEach(key => {
// @ts-ignore
element.style[key] = props.style[key];
});
}
return element;
}
function Pane(props) {
const [paneElement, setPaneElement] = (0, _react.useState)();
const context = (0, _core.useLeafletContext)();
const newContext = (0, _react.useMemo)(() => ({ ...context,
pane: props.name
}), [context]);
(0, _react.useEffect)(() => {
setPaneElement(createPane(props, context));
return function removeCreatedPane() {
const pane = context.map.getPane(props.name);
pane == null ? void 0 : pane.remove == null ? void 0 : pane.remove(); // @ts-ignore map internals
if (context.map._panes != null) {
// @ts-ignore map internals
context.map._panes = omitPane(context.map._panes, props.name); // @ts-ignore map internals
context.map._paneRenderers = omitPane( // @ts-ignore map internals
context.map._paneRenderers, props.name);
}
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return props.children != null && paneElement != null ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, {
value: newContext
}, props.children), paneElement) : null;
}
"use strict";
exports.__esModule = true;
exports.Polygon = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const Polygon = (0, _core.createPathComponent)(function createPolygon({
positions,
...options
}, ctx) {
const instance = new _leaflet.Polygon(positions, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updatePolygon(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
exports.Polygon = Polygon;
"use strict";
exports.__esModule = true;
exports.Polyline = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const Polyline = (0, _core.createPathComponent)(function createPolyline({
positions,
...options
}, ctx) {
const instance = new _leaflet.Polyline(positions, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updatePolyline(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
exports.Polyline = Polyline;
"use strict";
exports.__esModule = true;
exports.Popup = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
var _react = require("react");
const Popup = (0, _core.createOverlayComponent)(function createPopup(props, context) {
return {
instance: new _leaflet.Popup(props, context.overlayContainer),
context
};
}, function usePopupLifecycle(element, context, props, setOpen) {
const {
onClose,
onOpen,
position
} = props;
(0, _react.useEffect)(function addPopup() {
const {
instance
} = element;
function onPopupOpen(event) {
if (event.popup === instance) {
instance.update();
setOpen(true);
onOpen == null ? void 0 : onOpen();
}
}
function onPopupClose(event) {
if (event.popup === instance) {
setOpen(false);
onClose == null ? void 0 : onClose();
}
}
context.map.on({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
if (context.overlayContainer == null) {
// Attach to a Map
if (position != null) {
instance.setLatLng(position);
}
instance.openOn(context.map);
} else {
// Attach to container component
context.overlayContainer.bindPopup(instance);
}
return function removePopup() {
var _context$overlayConta;
context.map.off({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
(_context$overlayConta = context.overlayContainer) == null ? void 0 : _context$overlayConta.unbindPopup();
context.map.removeLayer(instance);
};
}, [element, context, setOpen, onClose, onOpen, position]);
});
exports.Popup = Popup;
"use strict";
exports.__esModule = true;
exports.Rectangle = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const Rectangle = (0, _core.createPathComponent)(function createRectangle({
bounds,
...options
}, ctx) {
const instance = new _leaflet.Rectangle(bounds, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateRectangle(layer, props, prevProps) {
if (props.bounds !== prevProps.bounds) {
layer.setBounds(props.bounds);
}
});
exports.Rectangle = Rectangle;
"use strict";
exports.__esModule = true;
exports.ScaleControl = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const ScaleControl = (0, _core.createControlComponent)(function createScaleControl(props) {
return new _leaflet.Control.Scale(props);
});
exports.ScaleControl = ScaleControl;
"use strict";
exports.__esModule = true;
exports.useSVGOverlayElement = exports.useSVGOverlay = exports.SVGOverlay = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
var _react = require("react");
var _reactDom = require("react-dom");
const useSVGOverlayElement = (0, _core.createElementHook)(function createSVGOverlay(props, context) {
const {
attributes,
bounds,
...options
} = props;
const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
container.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (attributes != null) {
Object.keys(attributes).forEach(name => {
container.setAttribute(name, attributes[name]);
});
}
return {
instance: new _leaflet.SVGOverlay(container, bounds, options),
container,
context
};
}, _core.updateMediaOverlay);
exports.useSVGOverlayElement = useSVGOverlayElement;
const useSVGOverlay = (0, _core.createLayerHook)(useSVGOverlayElement);
exports.useSVGOverlay = useSVGOverlay;
function SVGOverlayComponent({
children,
...options
}, ref) {
const {
instance,
container
} = useSVGOverlay(options).current;
(0, _react.useImperativeHandle)(ref, () => instance);
return container == null || children == null ? null : /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
}
const SVGOverlay = /*#__PURE__*/(0, _react.forwardRef)(SVGOverlayComponent);
exports.SVGOverlay = SVGOverlay;
"use strict";
exports.__esModule = true;
exports.TileLayer = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const TileLayer = (0, _core.createTileLayerComponent)(function createTileLayer({
url,
...options
}, context) {
return {
instance: new _leaflet.TileLayer(url, (0, _core.withPane)(options, context)),
context
};
}, _core.updateGridLayer);
exports.TileLayer = TileLayer;
"use strict";
exports.__esModule = true;
exports.Tooltip = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
var _react = require("react");
const Tooltip = (0, _core.createOverlayComponent)(function createTooltip(props, context) {
return {
instance: new _leaflet.Tooltip(props, context.overlayContainer),
context
};
}, function useTooltipLifecycle(element, context, props, setOpen) {
const {
onClose,
onOpen
} = props;
(0, _react.useEffect)(function addTooltip() {
const container = context.overlayContainer;
if (container == null) {
return;
}
const {
instance
} = element;
const onTooltipOpen = event => {
if (event.tooltip === instance) {
instance.update();
setOpen(true);
onOpen == null ? void 0 : onOpen();
}
};
const onTooltipClose = event => {
if (event.tooltip === instance) {
setOpen(false);
onClose == null ? void 0 : onClose();
}
};
container.on({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
});
container.bindTooltip(instance);
return function removeTooltip() {
container.off({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
}); // @ts-ignore protected property
if (container._map != null) {
container.unbindTooltip();
}
};
}, [element, context, setOpen, onClose, onOpen]);
});
exports.Tooltip = Tooltip;
"use strict";
exports.__esModule = true;
exports.VideoOverlay = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const VideoOverlay = (0, _core.createLayerComponent)(function createVideoOverlay({
bounds,
url,
...options
}, ctx) {
const instance = new _leaflet.VideoOverlay(url, bounds, options);
if (options.play === true) {
var _instance$getElement;
(_instance$getElement = instance.getElement()) == null ? void 0 : _instance$getElement.play();
}
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateVideoOverlay(overlay, props, prevProps) {
(0, _core.updateMediaOverlay)(overlay, props, prevProps);
if (typeof props.url === 'string' && props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
const video = overlay.getElement();
if (video != null) {
if (props.play === true && !prevProps.play) {
video.play();
} else if (!props.play && prevProps.play === true) {
video.pause();
}
}
});
exports.VideoOverlay = VideoOverlay;
"use strict";
exports.__esModule = true;
exports.WMSTileLayer = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const WMSTileLayer = (0, _core.createTileLayerComponent)(function createWMSTileLayer({
params = {},
url,
...options
}, context) {
return {
instance: new _leaflet.TileLayer.WMS(url, { ...params,
...(0, _core.withPane)(options, context)
}),
context
};
}, function updateWMSTileLayer(layer, props, prevProps) {
(0, _core.updateGridLayer)(layer, props, prevProps);
if (props.params != null && props.params !== prevProps.params) {
layer.setParams(props.params);
}
});
exports.WMSTileLayer = WMSTileLayer;
"use strict";
exports.__esModule = true;
exports.ZoomControl = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
const ZoomControl = (0, _core.createControlComponent)(function createZoomControl(props) {
return new _leaflet.Control.Zoom(props);
});
exports.ZoomControl = ZoomControl;
import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const AttributionControl = createControlComponent(function createAttributionControl(props) {
return new Control.Attribution(props);
});
import { createPathComponent, updateCircle } from '@react-leaflet/core';
import { Circle as LeafletCircle } from 'leaflet';
export const Circle = createPathComponent(function createCircle({
center,
children: _c,
...options
}, ctx) {
const instance = new LeafletCircle(center, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, updateCircle);
import { createPathComponent, updateCircle } from '@react-leaflet/core';
import { CircleMarker as LeafletCircleMarker } from 'leaflet';
export const CircleMarker = createPathComponent(function createCircleMarker({
center,
children: _c,
...options
}, ctx) {
const instance = new LeafletCircleMarker(center, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, updateCircle);
import { createPathComponent } from '@react-leaflet/core';
import { FeatureGroup as LeafletFeatureGroup } from 'leaflet';
export const FeatureGroup = createPathComponent(function createFeatureGroup({
children: _c,
...options
}, ctx) {
const instance = new LeafletFeatureGroup([], options);
const context = { ...ctx,
layerContainer: instance,
overlayContainer: instance
};
return {
instance,
context
};
});
import { createPathComponent } from '@react-leaflet/core';
import { GeoJSON as LeafletGeoJSON } from 'leaflet';
export const GeoJSON = createPathComponent(function createGeoJSON({
data,
...options
}, ctx) {
const instance = new LeafletGeoJSON(data, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateGeoJSON(layer, props, prevProps) {
if (props.style !== prevProps.style) {
if (props.style == null) {
layer.resetStyle();
} else {
layer.setStyle(props.style);
}
}
});
import { useLeafletContext } from '@react-leaflet/core';
import { useEffect } from 'react';
export function useMap() {
return useLeafletContext().map;
}
export function useMapEvent(type, handler) {
const map = useMap();
useEffect(function addMapEventHandler() {
// @ts-ignore event type
map.on(type, handler);
return function removeMapEventHandler() {
// @ts-ignore event type
map.off(type, handler);
};
}, [map, type, handler]);
return map;
}
export function useMapEvents(handlers) {
const map = useMap();
useEffect(function addMapEventHandlers() {
map.on(handlers);
return function removeMapEventHandlers() {
map.off(handlers);
};
}, [map, handlers]);
return map;
}
import { createLayerComponent, updateMediaOverlay } from '@react-leaflet/core';
import { ImageOverlay as LeafletImageOverlay } from 'leaflet';
export const ImageOverlay = createLayerComponent(function createImageOveraly({
bounds,
url,
...options
}, ctx) {
const instance = new LeafletImageOverlay(url, bounds, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateImageOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
if (props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
});
export { useMap, useMapEvent, useMapEvents } from './hooks';
export { AttributionControl } from './AttributionControl';
export { Circle } from './Circle';
export { CircleMarker } from './CircleMarker';
export { FeatureGroup } from './FeatureGroup';
export { GeoJSON } from './GeoJSON';
export { ImageOverlay } from './ImageOverlay';
export { LayerGroup } from './LayerGroup';
export { LayersControl } from './LayersControl';
export { MapConsumer } from './MapConsumer';
export { MapContainer } from './MapContainer';
export { Marker } from './Marker';
export { Pane } from './Pane';
export { Polygon } from './Polygon';
export { Polyline } from './Polyline';
export { Popup } from './Popup';
export { Rectangle } from './Rectangle';
export { ScaleControl } from './ScaleControl';
export { SVGOverlay } from './SVGOverlay';
export { TileLayer } from './TileLayer';
export { Tooltip } from './Tooltip';
export { VideoOverlay } from './VideoOverlay';
export { WMSTileLayer } from './WMSTileLayer';
export { ZoomControl } from './ZoomControl';
import { createLayerComponent } from '@react-leaflet/core';
import { LayerGroup as LeafletLayerGroup } from 'leaflet';
export const LayerGroup = createLayerComponent(function createLayerGroup({
children: _c,
...options
}, ctx) {
const instance = new LeafletLayerGroup([], options);
return {
instance,
context: { ...ctx,
layerContainer: instance
}
};
});
import { LeafletProvider, createContainerComponent, createControlHook, createElementHook, useLeafletContext } from '@react-leaflet/core';
import { Control } from 'leaflet';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
export const useLayersControlElement = createElementHook(function createLayersControl({
children: _c,
...options
}, ctx) {
const instance = new Control.Layers(undefined, undefined, options);
return {
instance,
context: { ...ctx,
layersControl: instance
}
};
}, function updateLayersControl(control, props, prevProps) {
if (props.collapsed !== prevProps.collapsed) {
if (props.collapsed === true) {
control.collapse();
} else {
control.expand();
}
}
});
export const useLayersControl = createControlHook(useLayersControlElement);
// @ts-ignore
export const LayersControl = createContainerComponent(useLayersControl);
export function createControlledLayer(addLayerToControl) {
return function ControlledLayer(props) {
const parentContext = useLeafletContext();
const propsRef = useRef(props);
const [layer, setLayer] = useState(null);
const {
layersControl,
map
} = parentContext;
const addLayer = useCallback(layerToAdd => {
if (layersControl != null) {
if (propsRef.current.checked) {
map.addLayer(layerToAdd);
}
addLayerToControl(layersControl, layerToAdd, propsRef.current.name);
setLayer(layerToAdd);
}
}, [layersControl, map]);
const removeLayer = useCallback(layerToRemove => {
layersControl == null ? void 0 : layersControl.removeLayer(layerToRemove);
setLayer(null);
}, [layersControl]);
const context = useMemo(() => ({ ...parentContext,
layerContainer: {
addLayer,
removeLayer
}
}), [parentContext, addLayer, removeLayer]);
useEffect(() => {
if (layer !== null && propsRef.current !== props) {
if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {
map.addLayer(layer);
} else if (propsRef.current.checked === true && (props.checked == null || props.checked === false)) {
map.removeLayer(layer);
}
propsRef.current = props;
}
});
return props.children ? /*#__PURE__*/React.createElement(LeafletProvider, {
value: context
}, props.children) : null;
};
}
LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {
layersControl.addBaseLayer(layer, name);
});
LayersControl.Overlay = createControlledLayer(function addOverlay(layersControl, layer, name) {
layersControl.addOverlay(layer, name);
});
import { useMap } from './hooks';
export function MapConsumer({
children
}) {
return children(useMap());
}
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { CONTEXT_VERSION, LeafletProvider } from '@react-leaflet/core';
import { Map as LeafletMap } from 'leaflet';
import React, { useEffect, useMemo, useRef, useState } from 'react';
export function useMapElement(mapRef, props) {
const [map, setMap] = useState(null);
useEffect(() => {
if (mapRef.current !== null && map === null) {
const instance = new LeafletMap(mapRef.current, props);
if (props.center != null && props.zoom != null) {
instance.setView(props.center, props.zoom);
} else if (props.bounds != null) {
instance.fitBounds(props.bounds, props.boundsOptions);
}
if (props.whenReady != null) {
instance.whenReady(props.whenReady);
}
setMap(instance);
}
}, [mapRef, map, props]);
return map;
}
export function MapContainer({
children,
className,
id,
placeholder,
style,
whenCreated,
...options
}) {
const mapRef = useRef(null);
const map = useMapElement(mapRef, options);
const createdRef = useRef(false);
useEffect(() => {
if (map != null && createdRef.current === false && whenCreated != null) {
createdRef.current = true;
whenCreated(map);
}
}, [map, whenCreated]);
const [props] = useState({
className,
id,
style
});
const context = useMemo(() => map ? {
__version: CONTEXT_VERSION,
map
} : null, [map]);
const contents = context ? /*#__PURE__*/React.createElement(LeafletProvider, {
value: context
}, children) : placeholder ?? null;
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
ref: mapRef
}), contents);
}
import { createLayerComponent } from '@react-leaflet/core';
import { Marker as LeafletMarker } from 'leaflet';
export const Marker = createLayerComponent(function createMarker({
position,
...options
}, ctx) {
const instance = new LeafletMarker(position, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateMarker(marker, props, prevProps) {
if (props.position !== prevProps.position) {
marker.setLatLng(props.position);
}
if (props.icon != null && props.icon !== prevProps.icon) {
marker.setIcon(props.icon);
}
if (props.zIndexOffset != null && props.zIndexOffset !== prevProps.zIndexOffset) {
marker.setZIndexOffset(props.zIndexOffset);
}
if (props.opacity != null && props.opacity !== prevProps.opacity) {
marker.setOpacity(props.opacity);
}
if (marker.dragging != null && props.draggable !== prevProps.draggable) {
if (props.draggable === true) {
marker.dragging.enable();
} else {
marker.dragging.disable();
}
}
});
import { LeafletProvider, addClassName, useLeafletContext } from '@react-leaflet/core';
import React, { useState, useEffect, useMemo } from 'react';
import { createPortal } from 'react-dom';
const DEFAULT_PANES = ['mapPane', 'markerPane', 'overlayPane', 'popupPane', 'shadowPane', 'tilePane', 'tooltipPane'];
function omitPane(obj, pane) {
const {
[pane]: _p,
...others
} = obj;
return others;
}
function createPane(props, context) {
const name = props.name;
if (DEFAULT_PANES.indexOf(name) !== -1) {
throw new Error(`You must use a unique name for a pane that is not a default Leaflet pane: ${name}`);
}
if (context.map.getPane(name) != null) {
throw new Error(`A pane with this name already exists: ${name}`);
}
const parentPaneName = props.pane ?? context.pane;
const parentPane = parentPaneName ? context.map.getPane(parentPaneName) : undefined;
const element = context.map.createPane(name, parentPane);
if (props.className != null) {
addClassName(element, props.className);
}
if (props.style != null) {
Object.keys(props.style).forEach(key => {
// @ts-ignore
element.style[key] = props.style[key];
});
}
return element;
}
export function Pane(props) {
const [paneElement, setPaneElement] = useState();
const context = useLeafletContext();
const newContext = useMemo(() => ({ ...context,
pane: props.name
}), [context]);
useEffect(() => {
setPaneElement(createPane(props, context));
return function removeCreatedPane() {
const pane = context.map.getPane(props.name);
pane == null ? void 0 : pane.remove == null ? void 0 : pane.remove(); // @ts-ignore map internals
if (context.map._panes != null) {
// @ts-ignore map internals
context.map._panes = omitPane(context.map._panes, props.name); // @ts-ignore map internals
context.map._paneRenderers = omitPane( // @ts-ignore map internals
context.map._paneRenderers, props.name);
}
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return props.children != null && paneElement != null ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(LeafletProvider, {
value: newContext
}, props.children), paneElement) : null;
}
import { createPathComponent } from '@react-leaflet/core';
import { Polygon as LeafletPolygon } from 'leaflet';
export const Polygon = createPathComponent(function createPolygon({
positions,
...options
}, ctx) {
const instance = new LeafletPolygon(positions, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updatePolygon(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
import { createPathComponent } from '@react-leaflet/core';
import { Polyline as LeafletPolyline } from 'leaflet';
export const Polyline = createPathComponent(function createPolyline({
positions,
...options
}, ctx) {
const instance = new LeafletPolyline(positions, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updatePolyline(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
import { createOverlayComponent } from '@react-leaflet/core';
import { Popup as LeafletPopup } from 'leaflet';
import { useEffect } from 'react';
export const Popup = createOverlayComponent(function createPopup(props, context) {
return {
instance: new LeafletPopup(props, context.overlayContainer),
context
};
}, function usePopupLifecycle(element, context, props, setOpen) {
const {
onClose,
onOpen,
position
} = props;
useEffect(function addPopup() {
const {
instance
} = element;
function onPopupOpen(event) {
if (event.popup === instance) {
instance.update();
setOpen(true);
onOpen == null ? void 0 : onOpen();
}
}
function onPopupClose(event) {
if (event.popup === instance) {
setOpen(false);
onClose == null ? void 0 : onClose();
}
}
context.map.on({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
if (context.overlayContainer == null) {
// Attach to a Map
if (position != null) {
instance.setLatLng(position);
}
instance.openOn(context.map);
} else {
// Attach to container component
context.overlayContainer.bindPopup(instance);
}
return function removePopup() {
var _context$overlayConta;
context.map.off({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
(_context$overlayConta = context.overlayContainer) == null ? void 0 : _context$overlayConta.unbindPopup();
context.map.removeLayer(instance);
};
}, [element, context, setOpen, onClose, onOpen, position]);
});
import { createPathComponent } from '@react-leaflet/core';
import { Rectangle as LeafletRectangle } from 'leaflet';
export const Rectangle = createPathComponent(function createRectangle({
bounds,
...options
}, ctx) {
const instance = new LeafletRectangle(bounds, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateRectangle(layer, props, prevProps) {
if (props.bounds !== prevProps.bounds) {
layer.setBounds(props.bounds);
}
});
import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const ScaleControl = createControlComponent(function createScaleControl(props) {
return new Control.Scale(props);
});
import { createElementHook, createLayerHook, updateMediaOverlay } from '@react-leaflet/core';
import { SVGOverlay as LeafletSVGOverlay } from 'leaflet';
import { forwardRef, useImperativeHandle } from 'react';
import { createPortal } from 'react-dom';
export const useSVGOverlayElement = createElementHook(function createSVGOverlay(props, context) {
const {
attributes,
bounds,
...options
} = props;
const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
container.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (attributes != null) {
Object.keys(attributes).forEach(name => {
container.setAttribute(name, attributes[name]);
});
}
return {
instance: new LeafletSVGOverlay(container, bounds, options),
container,
context
};
}, updateMediaOverlay);
export const useSVGOverlay = createLayerHook(useSVGOverlayElement);
function SVGOverlayComponent({
children,
...options
}, ref) {
const {
instance,
container
} = useSVGOverlay(options).current;
useImperativeHandle(ref, () => instance);
return container == null || children == null ? null : /*#__PURE__*/createPortal(children, container);
}
export const SVGOverlay = /*#__PURE__*/forwardRef(SVGOverlayComponent);
import { createTileLayerComponent, updateGridLayer, withPane } from '@react-leaflet/core';
import { TileLayer as LeafletTileLayer } from 'leaflet';
export const TileLayer = createTileLayerComponent(function createTileLayer({
url,
...options
}, context) {
return {
instance: new LeafletTileLayer(url, withPane(options, context)),
context
};
}, updateGridLayer);
import { createOverlayComponent } from '@react-leaflet/core';
import { Tooltip as LeafletTooltip } from 'leaflet';
import { useEffect } from 'react';
export const Tooltip = createOverlayComponent(function createTooltip(props, context) {
return {
instance: new LeafletTooltip(props, context.overlayContainer),
context
};
}, function useTooltipLifecycle(element, context, props, setOpen) {
const {
onClose,
onOpen
} = props;
useEffect(function addTooltip() {
const container = context.overlayContainer;
if (container == null) {
return;
}
const {
instance
} = element;
const onTooltipOpen = event => {
if (event.tooltip === instance) {
instance.update();
setOpen(true);
onOpen == null ? void 0 : onOpen();
}
};
const onTooltipClose = event => {
if (event.tooltip === instance) {
setOpen(false);
onClose == null ? void 0 : onClose();
}
};
container.on({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
});
container.bindTooltip(instance);
return function removeTooltip() {
container.off({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
}); // @ts-ignore protected property
if (container._map != null) {
container.unbindTooltip();
}
};
}, [element, context, setOpen, onClose, onOpen]);
});
import { createLayerComponent, updateMediaOverlay } from '@react-leaflet/core';
import { VideoOverlay as LeafletVideoOverlay } from 'leaflet';
export const VideoOverlay = createLayerComponent(function createVideoOverlay({
bounds,
url,
...options
}, ctx) {
const instance = new LeafletVideoOverlay(url, bounds, options);
if (options.play === true) {
var _instance$getElement;
(_instance$getElement = instance.getElement()) == null ? void 0 : _instance$getElement.play();
}
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateVideoOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
if (typeof props.url === 'string' && props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
const video = overlay.getElement();
if (video != null) {
if (props.play === true && !prevProps.play) {
video.play();
} else if (!props.play && prevProps.play === true) {
video.pause();
}
}
});
import { createTileLayerComponent, updateGridLayer, withPane } from '@react-leaflet/core';
import { TileLayer } from 'leaflet';
export const WMSTileLayer = createTileLayerComponent(function createWMSTileLayer({
params = {},
url,
...options
}, context) {
return {
instance: new TileLayer.WMS(url, { ...params,
...withPane(options, context)
}),
context
};
}, function updateWMSTileLayer(layer, props, prevProps) {
updateGridLayer(layer, props, prevProps);
if (props.params != null && props.params !== prevProps.params) {
layer.setParams(props.params);
}
});
import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const ZoomControl = createControlComponent(function createZoomControl(props) {
return new Control.Zoom(props);
});
/// <reference types="react" />
import { Control } from 'leaflet';
export declare type AttributionControlProps = Control.AttributionOptions;
export declare const AttributionControl: import("react").ForwardRefExoticComponent<Control.AttributionOptions & import("react").RefAttributes<Control.Attribution>>;
/// <reference types="react" />
import { CircleMarkerProps } from '@react-leaflet/core';
import { Circle as LeafletCircle } from 'leaflet';
export declare type CircleProps = CircleMarkerProps;
export declare const Circle: import("react").ForwardRefExoticComponent<CircleMarkerProps & import("react").RefAttributes<LeafletCircle<any>>>;
/// <reference types="react" />
import type { CircleMarkerProps } from '@react-leaflet/core';
import { CircleMarker as LeafletCircleMarker } from 'leaflet';
export type { CircleMarkerProps } from '@react-leaflet/core';
export declare const CircleMarker: import("react").ForwardRefExoticComponent<CircleMarkerProps & import("react").RefAttributes<LeafletCircleMarker<any>>>;
/// <reference types="react" />
import { PathProps } from '@react-leaflet/core';
import { FeatureGroup as LeafletFeatureGroup } from 'leaflet';
import { LayerGroupProps } from './LayerGroup';
export interface FeatureGroupProps extends LayerGroupProps, PathProps {
}
export declare const FeatureGroup: import("react").ForwardRefExoticComponent<FeatureGroupProps & import("react").RefAttributes<LeafletFeatureGroup<any>>>;
/// <reference types="react" />
import { PathProps } from '@react-leaflet/core';
import { GeoJsonObject } from 'geojson';
import { GeoJSON as LeafletGeoJSON, GeoJSONOptions } from 'leaflet';
import { LayerGroupProps } from './LayerGroup';
export interface GeoJSONProps extends GeoJSONOptions, LayerGroupProps, PathProps {
data: GeoJsonObject;
}
export declare const GeoJSON: import("react").ForwardRefExoticComponent<GeoJSONProps & import("react").RefAttributes<LeafletGeoJSON<any>>>;
import { LeafletEventHandlerFnMap, Map } from 'leaflet';
export declare function useMap(): Map;
export declare function useMapEvent<T extends keyof LeafletEventHandlerFnMap>(type: T, handler: LeafletEventHandlerFnMap[T]): Map;
export declare function useMapEvents(handlers: LeafletEventHandlerFnMap): Map;
import { MediaOverlayProps } from '@react-leaflet/core';
import { ImageOverlay as LeafletImageOverlay } from 'leaflet';
import { ReactNode } from 'react';
export interface ImageOverlayProps extends MediaOverlayProps {
children?: ReactNode;
url: string;
}
export declare const ImageOverlay: import("react").ForwardRefExoticComponent<ImageOverlayProps & import("react").RefAttributes<LeafletImageOverlay>>;
export { useMap, useMapEvent, useMapEvents } from './hooks';
export { AttributionControl } from './AttributionControl';
export type { AttributionControlProps } from './AttributionControl';
export { Circle } from './Circle';
export type { CircleProps } from './Circle';
export { CircleMarker } from './CircleMarker';
export type { CircleMarkerProps } from './CircleMarker';
export { FeatureGroup } from './FeatureGroup';
export type { FeatureGroupProps } from './FeatureGroup';
export { GeoJSON } from './GeoJSON';
export type { GeoJSONProps } from './GeoJSON';
export { ImageOverlay } from './ImageOverlay';
export type { ImageOverlayProps } from './ImageOverlay';
export { LayerGroup } from './LayerGroup';
export type { LayerGroupProps } from './LayerGroup';
export { LayersControl } from './LayersControl';
export type { LayersControlProps, ControlledLayerProps } from './LayersControl';
export { MapConsumer } from './MapConsumer';
export type { MapConsumerProps } from './MapConsumer';
export { MapContainer } from './MapContainer';
export type { MapContainerProps } from './MapContainer';
export { Marker } from './Marker';
export type { MarkerProps } from './Marker';
export { Pane } from './Pane';
export type { PaneProps } from './Pane';
export { Polygon } from './Polygon';
export type { PolygonProps } from './Polygon';
export { Polyline } from './Polyline';
export type { PolylineProps } from './Polyline';
export { Popup } from './Popup';
export type { PopupProps } from './Popup';
export { Rectangle } from './Rectangle';
export type { RectangleProps } from './Rectangle';
export { ScaleControl } from './ScaleControl';
export type { ScaleControlProps } from './ScaleControl';
export { SVGOverlay } from './SVGOverlay';
export type { SVGOverlayProps } from './SVGOverlay';
export { TileLayer } from './TileLayer';
export type { TileLayerProps } from './TileLayer';
export { Tooltip } from './Tooltip';
export type { TooltipProps } from './Tooltip';
export { VideoOverlay } from './VideoOverlay';
export type { VideoOverlayProps } from './VideoOverlay';
export { WMSTileLayer } from './WMSTileLayer';
export type { WMSTileLayerProps } from './WMSTileLayer';
export { ZoomControl } from './ZoomControl';
export type { ZoomControlProps } from './ZoomControl';
import { EventedProps } from '@react-leaflet/core';
import { LayerGroup as LeafletLayerGroup, LayerOptions } from 'leaflet';
import { ReactNode } from 'react';
export interface LayerGroupProps extends LayerOptions, EventedProps {
children?: ReactNode;
}
export declare const LayerGroup: import("react").ForwardRefExoticComponent<LayerGroupProps & import("react").RefAttributes<LeafletLayerGroup<any>>>;
import { Control, Layer } from 'leaflet';
import React, { ForwardRefExoticComponent, FunctionComponent, ReactNode, RefAttributes } from 'react';
export interface LayersControlProps extends Control.LayersOptions {
children?: ReactNode;
}
export declare const useLayersControlElement: (props: LayersControlProps, context: import("@react-leaflet/core").LeafletContextInterface) => React.MutableRefObject<import("@react-leaflet/core").LeafletElement<Control.Layers, any>>;
export declare const useLayersControl: (props: LayersControlProps) => React.MutableRefObject<import("@react-leaflet/core").LeafletElement<Control.Layers, any>>;
export interface ControlledLayerProps {
checked?: boolean;
children: ReactNode;
name: string;
}
export declare const LayersControl: ForwardRefExoticComponent<LayersControlProps & RefAttributes<Control.Layers>> & {
BaseLayer: FunctionComponent<ControlledLayerProps>;
Overlay: FunctionComponent<ControlledLayerProps>;
};
declare type AddLayerFunc = (layersControl: Control.Layers, layer: Layer, name: string) => void;
export declare function createControlledLayer(addLayerToControl: AddLayerFunc): (props: ControlledLayerProps) => JSX.Element | null;
export {};
import { Map } from 'leaflet';
import { ReactElement } from 'react';
export interface MapConsumerProps {
children: (map: Map) => ReactElement | null;
}
export declare function MapConsumer({ children }: MapConsumerProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
import { FitBoundsOptions, LatLngBoundsExpression, Map as LeafletMap, MapOptions } from 'leaflet';
import { CSSProperties, MutableRefObject, ReactNode } from 'react';
export interface MapContainerProps extends MapOptions {
bounds?: LatLngBoundsExpression;
boundsOptions?: FitBoundsOptions;
children?: ReactNode;
className?: string;
id?: string;
placeholder?: ReactNode;
style?: CSSProperties;
whenCreated?: (map: LeafletMap) => void;
whenReady?: () => void;
}
export declare function useMapElement(mapRef: MutableRefObject<HTMLElement | null>, props: MapContainerProps): LeafletMap | null;
export declare function MapContainer<Props extends MapContainerProps = MapContainerProps>({ children, className, id, placeholder, style, whenCreated, ...options }: Props): JSX.Element;
import { EventedProps } from '@react-leaflet/core';
import { LatLngExpression, Marker as LeafletMarker, MarkerOptions } from 'leaflet';
import { ReactNode } from 'react';
export interface MarkerProps extends MarkerOptions, EventedProps {
children?: ReactNode;
position: LatLngExpression;
}
export declare const Marker: import("react").ForwardRefExoticComponent<MarkerProps & import("react").RefAttributes<LeafletMarker<any>>>;
import React, { CSSProperties, ReactNode } from 'react';
export interface PaneProps {
children?: ReactNode;
className?: string;
name: string;
pane?: string;
style?: CSSProperties;
}
export declare function Pane(props: PaneProps): React.ReactPortal | null;
import { PathProps } from '@react-leaflet/core';
import { LatLngExpression, PolylineOptions, Polygon as LeafletPolygon } from 'leaflet';
import { ReactNode } from 'react';
export interface PolygonProps extends PolylineOptions, PathProps {
children?: ReactNode;
positions: LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][];
}
export declare const Polygon: import("react").ForwardRefExoticComponent<PolygonProps & import("react").RefAttributes<LeafletPolygon<any>>>;
import { PathProps } from '@react-leaflet/core';
import { LatLngExpression, Polyline as LeafletPolyline, PolylineOptions } from 'leaflet';
import { ReactNode } from 'react';
export interface PolylineProps extends PolylineOptions, PathProps {
children?: ReactNode;
positions: LatLngExpression[] | LatLngExpression[][];
}
export declare const Polyline: import("react").ForwardRefExoticComponent<PolylineProps & import("react").RefAttributes<LeafletPolyline<import("geojson").LineString | import("geojson").MultiLineString, any>>>;
import { EventedProps } from '@react-leaflet/core';
import { LatLngExpression, Popup as LeafletPopup, PopupOptions } from 'leaflet';
import { ReactNode } from 'react';
export interface PopupProps extends PopupOptions, EventedProps {
children?: ReactNode;
onClose?: () => void;
onOpen?: () => void;
position?: LatLngExpression;
}
export declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<LeafletPopup>>;
import { PathProps } from '@react-leaflet/core';
import { LatLngBoundsExpression, Rectangle as LeafletRectangle, PathOptions } from 'leaflet';
import { ReactNode } from 'react';
export interface RectangleProps extends PathOptions, PathProps {
bounds: LatLngBoundsExpression;
children?: ReactNode;
}
export declare const Rectangle: import("react").ForwardRefExoticComponent<RectangleProps & import("react").RefAttributes<LeafletRectangle<any>>>;
/// <reference types="react" />
import { Control } from 'leaflet';
export declare type ScaleControlProps = Control.ScaleOptions;
export declare const ScaleControl: import("react").ForwardRefExoticComponent<Control.ScaleOptions & import("react").RefAttributes<Control.Scale>>;
import { MediaOverlayProps } from '@react-leaflet/core';
import { SVGOverlay as LeafletSVGOverlay } from 'leaflet';
import { ReactNode } from 'react';
export interface SVGOverlayProps extends MediaOverlayProps {
attributes?: Record<string, string>;
children?: ReactNode;
}
export declare const useSVGOverlayElement: (props: SVGOverlayProps, context: import("@react-leaflet/core").LeafletContextInterface) => import("react").MutableRefObject<import("@react-leaflet/core").LeafletElement<LeafletSVGOverlay, any>>;
export declare const useSVGOverlay: (props: SVGOverlayProps) => import("react").MutableRefObject<import("@react-leaflet/core").LeafletElement<LeafletSVGOverlay, any>>;
export declare const SVGOverlay: import("react").ForwardRefExoticComponent<SVGOverlayProps & import("react").RefAttributes<LeafletSVGOverlay>>;
/// <reference types="react" />
import { LayerProps } from '@react-leaflet/core';
import { TileLayer as LeafletTileLayer, TileLayerOptions } from 'leaflet';
export interface TileLayerProps extends TileLayerOptions, LayerProps {
url: string;
}
export declare const TileLayer: import("react").ForwardRefExoticComponent<TileLayerProps & import("react").RefAttributes<LeafletTileLayer>>;
import { EventedProps } from '@react-leaflet/core';
import { LatLngExpression, Tooltip as LeafletTooltip, TooltipOptions } from 'leaflet';
import { ReactNode } from 'react';
export interface TooltipProps extends TooltipOptions, EventedProps {
children?: ReactNode;
onClose?: () => void;
onOpen?: () => void;
position?: LatLngExpression;
}
export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<LeafletTooltip>>;
import { MediaOverlayProps } from '@react-leaflet/core';
import { VideoOverlay as LeafletVideoOverlay, VideoOverlayOptions } from 'leaflet';
import { ReactNode } from 'react';
export interface VideoOverlayProps extends MediaOverlayProps, VideoOverlayOptions {
children?: ReactNode;
play?: boolean;
url: string | string[] | HTMLVideoElement;
}
export declare const VideoOverlay: import("react").ForwardRefExoticComponent<VideoOverlayProps & import("react").RefAttributes<LeafletVideoOverlay>>;
/// <reference types="react" />
import { LayerProps } from '@react-leaflet/core';
import { TileLayer, WMSOptions, WMSParams } from 'leaflet';
export interface WMSTileLayerProps extends WMSOptions, LayerProps {
params?: WMSParams;
url: string;
}
export declare const WMSTileLayer: import("react").ForwardRefExoticComponent<WMSTileLayerProps & import("react").RefAttributes<TileLayer.WMS>>;
/// <reference types="react" />
import { Control } from 'leaflet';
export declare type ZoomControlProps = Control.ZoomOptions;
export declare const ZoomControl: import("react").ForwardRefExoticComponent<Control.ZoomOptions & import("react").RefAttributes<Control.Zoom>>;
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('leaflet'), require('react-dom')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'leaflet', 'react-dom'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactLeaflet = {}, global.React, global.L, global.ReactDOM));
})(this, (function (exports, React, leaflet, reactDom) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function useAttribution(map, attribution) {
const attributionRef = React.useRef(attribution);
React.useEffect(function updateAttribution() {
if (attribution !== attributionRef.current && map.attributionControl != null) {
if (attributionRef.current != null) {
map.attributionControl.removeAttribution(attributionRef.current);
}
if (attribution != null) {
map.attributionControl.addAttribution(attribution);
}
}
attributionRef.current = attribution;
}, [map, attribution]);
}
function updateCircle(layer, props, prevProps) {
if (props.center !== prevProps.center) {
layer.setLatLng(props.center);
}
if (props.radius != null && props.radius !== prevProps.radius) {
layer.setRadius(props.radius);
}
}
const CONTEXT_VERSION = 1;
const LeafletContext = /*#__PURE__*/React.createContext(null);
const LeafletProvider = LeafletContext.Provider;
function useLeafletContext() {
const context = React.useContext(LeafletContext);
if (context == null) {
throw new Error('No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>');
}
return context;
}
function createContainerComponent(useElement) {
function ContainerComponent(props, ref) {
const {
instance,
context
} = useElement(props).current;
React.useImperativeHandle(ref, () => instance);
return props.children == null ? null : /*#__PURE__*/React__default["default"].createElement(LeafletProvider, {
value: context
}, props.children);
}
return /*#__PURE__*/React.forwardRef(ContainerComponent);
}
function createDivOverlayComponent(useElement) {
function OverlayComponent(props, ref) {
const [isOpen, setOpen] = React.useState(false);
const {
instance
} = useElement(props, setOpen).current;
React.useImperativeHandle(ref, () => instance);
React.useEffect(function updateOverlay() {
if (isOpen) {
instance.update();
}
}, [instance, isOpen, props.children]); // @ts-ignore _contentNode missing in type definition
const contentNode = instance._contentNode;
return contentNode ? /*#__PURE__*/reactDom.createPortal(props.children, contentNode) : null;
}
return /*#__PURE__*/React.forwardRef(OverlayComponent);
}
function createLeafComponent(useElement) {
function LeafComponent(props, ref) {
const {
instance
} = useElement(props).current;
React.useImperativeHandle(ref, () => instance);
return null;
}
return /*#__PURE__*/React.forwardRef(LeafComponent);
}
function createControlHook(useElement) {
return function useLeafletControl(props) {
const context = useLeafletContext();
const elementRef = useElement(props, context);
const {
instance
} = elementRef.current;
const positionRef = React.useRef(props.position);
const {
position
} = props;
React.useEffect(function addControl() {
instance.addTo(context.map);
return function removeControl() {
instance.remove();
};
}, [context.map, instance]);
React.useEffect(function updateControl() {
if (position != null && position !== positionRef.current) {
instance.setPosition(position);
positionRef.current = position;
}
}, [instance, position]);
return elementRef;
};
}
function useEventHandlers(element, eventHandlers) {
const eventHandlersRef = React.useRef();
React.useEffect(function addEventHandlers() {
if (eventHandlers != null) {
element.instance.on(eventHandlers);
}
eventHandlersRef.current = eventHandlers;
return function removeEventHandlers() {
if (eventHandlersRef.current != null) {
element.instance.off(eventHandlersRef.current);
}
eventHandlersRef.current = null;
};
}, [element, eventHandlers]);
}
function withPane(props, context) {
const pane = props.pane ?? context.pane;
return pane ? { ...props,
pane
} : props;
}
function createDivOverlayHook(useElement, useLifecycle) {
return function useDivOverlay(props, setOpen) {
const context = useLeafletContext();
const elementRef = useElement(withPane(props, context), context);
useAttribution(context.map, props.attribution);
useEventHandlers(elementRef.current, props.eventHandlers);
useLifecycle(elementRef.current, context, props, setOpen);
return elementRef;
};
}
function splitClassName(className) {
return className.split(' ').filter(Boolean);
}
function addClassName(element, className) {
splitClassName(className).forEach(cls => {
leaflet.DomUtil.addClass(element, cls);
});
}
function createElementHook(createElement, updateElement) {
if (updateElement == null) {
return function useImmutableLeafletElement(props, context) {
return React.useRef(createElement(props, context));
};
}
return function useMutableLeafletElement(props, context) {
const elementRef = React.useRef(createElement(props, context));
const propsRef = React.useRef(props);
const {
instance
} = elementRef.current;
React.useEffect(function updateElementProps() {
if (propsRef.current !== props) {
updateElement(instance, props, propsRef.current);
propsRef.current = props;
}
}, [instance, props, context]);
return elementRef;
};
}
function useLayerLifecycle(element, context) {
React.useEffect(function addLayer() {
const container = context.layerContainer ?? context.map;
container.addLayer(element.instance);
return function removeLayer() {
var _context$layerContain;
(_context$layerContain = context.layerContainer) == null ? void 0 : _context$layerContain.removeLayer(element.instance);
context.map.removeLayer(element.instance);
};
}, [context, element]);
}
function createLayerHook(useElement) {
return function useLayer(props) {
const context = useLeafletContext();
const elementRef = useElement(withPane(props, context), context);
useAttribution(context.map, props.attribution);
useEventHandlers(elementRef.current, props.eventHandlers);
useLayerLifecycle(elementRef.current, context);
return elementRef;
};
}
function usePathOptions(element, props) {
const optionsRef = React.useRef();
React.useEffect(function updatePathOptions() {
if (props.pathOptions !== optionsRef.current) {
const options = props.pathOptions ?? {};
element.instance.setStyle(options);
optionsRef.current = options;
}
}, [element, props]);
}
function createPathHook(useElement) {
return function usePath(props) {
const context = useLeafletContext();
const elementRef = useElement(withPane(props, context), context);
useEventHandlers(elementRef.current, props.eventHandlers);
useLayerLifecycle(elementRef.current, context);
usePathOptions(elementRef.current, props);
return elementRef;
};
}
function createControlComponent(createInstance) {
function createElement(props, context) {
return {
instance: createInstance(props),
context
};
}
const useElement = createElementHook(createElement);
const useControl = createControlHook(useElement);
return createLeafComponent(useControl);
}
function createLayerComponent(createElement, updateElement) {
const useElement = createElementHook(createElement, updateElement);
const useLayer = createLayerHook(useElement);
return createContainerComponent(useLayer);
}
function createOverlayComponent(createElement, useLifecycle) {
const useElement = createElementHook(createElement);
const useOverlay = createDivOverlayHook(useElement, useLifecycle);
return createDivOverlayComponent(useOverlay);
}
function createPathComponent(createElement, updateElement) {
const useElement = createElementHook(createElement, updateElement);
const usePath = createPathHook(useElement);
return createContainerComponent(usePath);
}
function createTileLayerComponent(createElement, updateElement) {
const useElement = createElementHook(createElement, updateElement);
const useLayer = createLayerHook(useElement);
return createLeafComponent(useLayer);
}
function updateGridLayer(layer, props, prevProps) {
const {
opacity,
zIndex
} = props;
if (opacity != null && opacity !== prevProps.opacity) {
layer.setOpacity(opacity);
}
if (zIndex != null && zIndex !== prevProps.zIndex) {
layer.setZIndex(zIndex);
}
}
function updateMediaOverlay(overlay, props, prevProps) {
if (props.bounds instanceof leaflet.LatLngBounds && props.bounds !== prevProps.bounds) {
overlay.setBounds(props.bounds);
}
if (props.opacity != null && props.opacity !== prevProps.opacity) {
overlay.setOpacity(props.opacity);
}
if (props.zIndex != null && props.zIndex !== prevProps.zIndex) {
// @ts-ignore missing in definition but inherited from ImageOverlay
overlay.setZIndex(props.zIndex);
}
}
function useMap() {
return useLeafletContext().map;
}
function useMapEvent(type, handler) {
const map = useMap();
React.useEffect(function addMapEventHandler() {
// @ts-ignore event type
map.on(type, handler);
return function removeMapEventHandler() {
// @ts-ignore event type
map.off(type, handler);
};
}, [map, type, handler]);
return map;
}
function useMapEvents(handlers) {
const map = useMap();
React.useEffect(function addMapEventHandlers() {
map.on(handlers);
return function removeMapEventHandlers() {
map.off(handlers);
};
}, [map, handlers]);
return map;
}
const AttributionControl = createControlComponent(function createAttributionControl(props) {
return new leaflet.Control.Attribution(props);
});
const Circle = createPathComponent(function createCircle({
center,
children: _c,
...options
}, ctx) {
const instance = new leaflet.Circle(center, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, updateCircle);
const CircleMarker = createPathComponent(function createCircleMarker({
center,
children: _c,
...options
}, ctx) {
const instance = new leaflet.CircleMarker(center, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, updateCircle);
const FeatureGroup = createPathComponent(function createFeatureGroup({
children: _c,
...options
}, ctx) {
const instance = new leaflet.FeatureGroup([], options);
const context = { ...ctx,
layerContainer: instance,
overlayContainer: instance
};
return {
instance,
context
};
});
const GeoJSON = createPathComponent(function createGeoJSON({
data,
...options
}, ctx) {
const instance = new leaflet.GeoJSON(data, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateGeoJSON(layer, props, prevProps) {
if (props.style !== prevProps.style) {
if (props.style == null) {
layer.resetStyle();
} else {
layer.setStyle(props.style);
}
}
});
const ImageOverlay = createLayerComponent(function createImageOveraly({
bounds,
url,
...options
}, ctx) {
const instance = new leaflet.ImageOverlay(url, bounds, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateImageOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
if (props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
});
const LayerGroup = createLayerComponent(function createLayerGroup({
children: _c,
...options
}, ctx) {
const instance = new leaflet.LayerGroup([], options);
return {
instance,
context: { ...ctx,
layerContainer: instance
}
};
});
const useLayersControlElement = createElementHook(function createLayersControl({
children: _c,
...options
}, ctx) {
const instance = new leaflet.Control.Layers(undefined, undefined, options);
return {
instance,
context: { ...ctx,
layersControl: instance
}
};
}, function updateLayersControl(control, props, prevProps) {
if (props.collapsed !== prevProps.collapsed) {
if (props.collapsed === true) {
control.collapse();
} else {
control.expand();
}
}
});
const useLayersControl = createControlHook(useLayersControlElement);
// @ts-ignore
const LayersControl = createContainerComponent(useLayersControl);
function createControlledLayer(addLayerToControl) {
return function ControlledLayer(props) {
const parentContext = useLeafletContext();
const propsRef = React.useRef(props);
const [layer, setLayer] = React.useState(null);
const {
layersControl,
map
} = parentContext;
const addLayer = React.useCallback(layerToAdd => {
if (layersControl != null) {
if (propsRef.current.checked) {
map.addLayer(layerToAdd);
}
addLayerToControl(layersControl, layerToAdd, propsRef.current.name);
setLayer(layerToAdd);
}
}, [layersControl, map]);
const removeLayer = React.useCallback(layerToRemove => {
layersControl == null ? void 0 : layersControl.removeLayer(layerToRemove);
setLayer(null);
}, [layersControl]);
const context = React.useMemo(() => ({ ...parentContext,
layerContainer: {
addLayer,
removeLayer
}
}), [parentContext, addLayer, removeLayer]);
React.useEffect(() => {
if (layer !== null && propsRef.current !== props) {
if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {
map.addLayer(layer);
} else if (propsRef.current.checked === true && (props.checked == null || props.checked === false)) {
map.removeLayer(layer);
}
propsRef.current = props;
}
});
return props.children ? /*#__PURE__*/React__default["default"].createElement(LeafletProvider, {
value: context
}, props.children) : null;
};
}
LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {
layersControl.addBaseLayer(layer, name);
});
LayersControl.Overlay = createControlledLayer(function addOverlay(layersControl, layer, name) {
layersControl.addOverlay(layer, name);
});
function MapConsumer({
children
}) {
return children(useMap());
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function useMapElement(mapRef, props) {
const [map, setMap] = React.useState(null);
React.useEffect(() => {
if (mapRef.current !== null && map === null) {
const instance = new leaflet.Map(mapRef.current, props);
if (props.center != null && props.zoom != null) {
instance.setView(props.center, props.zoom);
} else if (props.bounds != null) {
instance.fitBounds(props.bounds, props.boundsOptions);
}
if (props.whenReady != null) {
instance.whenReady(props.whenReady);
}
setMap(instance);
}
}, [mapRef, map, props]);
return map;
}
function MapContainer({
children,
className,
id,
placeholder,
style,
whenCreated,
...options
}) {
const mapRef = React.useRef(null);
const map = useMapElement(mapRef, options);
const createdRef = React.useRef(false);
React.useEffect(() => {
if (map != null && createdRef.current === false && whenCreated != null) {
createdRef.current = true;
whenCreated(map);
}
}, [map, whenCreated]);
const [props] = React.useState({
className,
id,
style
});
const context = React.useMemo(() => map ? {
__version: CONTEXT_VERSION,
map
} : null, [map]);
const contents = context ? /*#__PURE__*/React__default["default"].createElement(LeafletProvider, {
value: context
}, children) : placeholder ?? null;
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
ref: mapRef
}), contents);
}
const Marker = createLayerComponent(function createMarker({
position,
...options
}, ctx) {
const instance = new leaflet.Marker(position, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateMarker(marker, props, prevProps) {
if (props.position !== prevProps.position) {
marker.setLatLng(props.position);
}
if (props.icon != null && props.icon !== prevProps.icon) {
marker.setIcon(props.icon);
}
if (props.zIndexOffset != null && props.zIndexOffset !== prevProps.zIndexOffset) {
marker.setZIndexOffset(props.zIndexOffset);
}
if (props.opacity != null && props.opacity !== prevProps.opacity) {
marker.setOpacity(props.opacity);
}
if (marker.dragging != null && props.draggable !== prevProps.draggable) {
if (props.draggable === true) {
marker.dragging.enable();
} else {
marker.dragging.disable();
}
}
});
const DEFAULT_PANES = ['mapPane', 'markerPane', 'overlayPane', 'popupPane', 'shadowPane', 'tilePane', 'tooltipPane'];
function omitPane(obj, pane) {
const {
[pane]: _p,
...others
} = obj;
return others;
}
function createPane(props, context) {
const name = props.name;
if (DEFAULT_PANES.indexOf(name) !== -1) {
throw new Error(`You must use a unique name for a pane that is not a default Leaflet pane: ${name}`);
}
if (context.map.getPane(name) != null) {
throw new Error(`A pane with this name already exists: ${name}`);
}
const parentPaneName = props.pane ?? context.pane;
const parentPane = parentPaneName ? context.map.getPane(parentPaneName) : undefined;
const element = context.map.createPane(name, parentPane);
if (props.className != null) {
addClassName(element, props.className);
}
if (props.style != null) {
Object.keys(props.style).forEach(key => {
// @ts-ignore
element.style[key] = props.style[key];
});
}
return element;
}
function Pane(props) {
const [paneElement, setPaneElement] = React.useState();
const context = useLeafletContext();
const newContext = React.useMemo(() => ({ ...context,
pane: props.name
}), [context]);
React.useEffect(() => {
setPaneElement(createPane(props, context));
return function removeCreatedPane() {
const pane = context.map.getPane(props.name);
pane == null ? void 0 : pane.remove == null ? void 0 : pane.remove(); // @ts-ignore map internals
if (context.map._panes != null) {
// @ts-ignore map internals
context.map._panes = omitPane(context.map._panes, props.name); // @ts-ignore map internals
context.map._paneRenderers = omitPane( // @ts-ignore map internals
context.map._paneRenderers, props.name);
}
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return props.children != null && paneElement != null ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(LeafletProvider, {
value: newContext
}, props.children), paneElement) : null;
}
const Polygon = createPathComponent(function createPolygon({
positions,
...options
}, ctx) {
const instance = new leaflet.Polygon(positions, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updatePolygon(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
const Polyline = createPathComponent(function createPolyline({
positions,
...options
}, ctx) {
const instance = new leaflet.Polyline(positions, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updatePolyline(layer, props, prevProps) {
if (props.positions !== prevProps.positions) {
layer.setLatLngs(props.positions);
}
});
const Popup = createOverlayComponent(function createPopup(props, context) {
return {
instance: new leaflet.Popup(props, context.overlayContainer),
context
};
}, function usePopupLifecycle(element, context, props, setOpen) {
const {
onClose,
onOpen,
position
} = props;
React.useEffect(function addPopup() {
const {
instance
} = element;
function onPopupOpen(event) {
if (event.popup === instance) {
instance.update();
setOpen(true);
onOpen == null ? void 0 : onOpen();
}
}
function onPopupClose(event) {
if (event.popup === instance) {
setOpen(false);
onClose == null ? void 0 : onClose();
}
}
context.map.on({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
if (context.overlayContainer == null) {
// Attach to a Map
if (position != null) {
instance.setLatLng(position);
}
instance.openOn(context.map);
} else {
// Attach to container component
context.overlayContainer.bindPopup(instance);
}
return function removePopup() {
var _context$overlayConta;
context.map.off({
popupopen: onPopupOpen,
popupclose: onPopupClose
});
(_context$overlayConta = context.overlayContainer) == null ? void 0 : _context$overlayConta.unbindPopup();
context.map.removeLayer(instance);
};
}, [element, context, setOpen, onClose, onOpen, position]);
});
const Rectangle = createPathComponent(function createRectangle({
bounds,
...options
}, ctx) {
const instance = new leaflet.Rectangle(bounds, options);
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateRectangle(layer, props, prevProps) {
if (props.bounds !== prevProps.bounds) {
layer.setBounds(props.bounds);
}
});
const ScaleControl = createControlComponent(function createScaleControl(props) {
return new leaflet.Control.Scale(props);
});
const useSVGOverlayElement = createElementHook(function createSVGOverlay(props, context) {
const {
attributes,
bounds,
...options
} = props;
const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
container.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
if (attributes != null) {
Object.keys(attributes).forEach(name => {
container.setAttribute(name, attributes[name]);
});
}
return {
instance: new leaflet.SVGOverlay(container, bounds, options),
container,
context
};
}, updateMediaOverlay);
const useSVGOverlay = createLayerHook(useSVGOverlayElement);
function SVGOverlayComponent({
children,
...options
}, ref) {
const {
instance,
container
} = useSVGOverlay(options).current;
React.useImperativeHandle(ref, () => instance);
return container == null || children == null ? null : /*#__PURE__*/reactDom.createPortal(children, container);
}
const SVGOverlay = /*#__PURE__*/React.forwardRef(SVGOverlayComponent);
const TileLayer = createTileLayerComponent(function createTileLayer({
url,
...options
}, context) {
return {
instance: new leaflet.TileLayer(url, withPane(options, context)),
context
};
}, updateGridLayer);
const Tooltip = createOverlayComponent(function createTooltip(props, context) {
return {
instance: new leaflet.Tooltip(props, context.overlayContainer),
context
};
}, function useTooltipLifecycle(element, context, props, setOpen) {
const {
onClose,
onOpen
} = props;
React.useEffect(function addTooltip() {
const container = context.overlayContainer;
if (container == null) {
return;
}
const {
instance
} = element;
const onTooltipOpen = event => {
if (event.tooltip === instance) {
instance.update();
setOpen(true);
onOpen == null ? void 0 : onOpen();
}
};
const onTooltipClose = event => {
if (event.tooltip === instance) {
setOpen(false);
onClose == null ? void 0 : onClose();
}
};
container.on({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
});
container.bindTooltip(instance);
return function removeTooltip() {
container.off({
tooltipopen: onTooltipOpen,
tooltipclose: onTooltipClose
}); // @ts-ignore protected property
if (container._map != null) {
container.unbindTooltip();
}
};
}, [element, context, setOpen, onClose, onOpen]);
});
const VideoOverlay = createLayerComponent(function createVideoOverlay({
bounds,
url,
...options
}, ctx) {
const instance = new leaflet.VideoOverlay(url, bounds, options);
if (options.play === true) {
var _instance$getElement;
(_instance$getElement = instance.getElement()) == null ? void 0 : _instance$getElement.play();
}
return {
instance,
context: { ...ctx,
overlayContainer: instance
}
};
}, function updateVideoOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
if (typeof props.url === 'string' && props.url !== prevProps.url) {
overlay.setUrl(props.url);
}
const video = overlay.getElement();
if (video != null) {
if (props.play === true && !prevProps.play) {
video.play();
} else if (!props.play && prevProps.play === true) {
video.pause();
}
}
});
const WMSTileLayer = createTileLayerComponent(function createWMSTileLayer({
params = {},
url,
...options
}, context) {
return {
instance: new leaflet.TileLayer.WMS(url, { ...params,
...withPane(options, context)
}),
context
};
}, function updateWMSTileLayer(layer, props, prevProps) {
updateGridLayer(layer, props, prevProps);
if (props.params != null && props.params !== prevProps.params) {
layer.setParams(props.params);
}
});
const ZoomControl = createControlComponent(function createZoomControl(props) {
return new leaflet.Control.Zoom(props);
});
exports.AttributionControl = AttributionControl;
exports.Circle = Circle;
exports.CircleMarker = CircleMarker;
exports.FeatureGroup = FeatureGroup;
exports.GeoJSON = GeoJSON;
exports.ImageOverlay = ImageOverlay;
exports.LayerGroup = LayerGroup;
exports.LayersControl = LayersControl;
exports.MapConsumer = MapConsumer;
exports.MapContainer = MapContainer;
exports.Marker = Marker;
exports.Pane = Pane;
exports.Polygon = Polygon;
exports.Polyline = Polyline;
exports.Popup = Popup;
exports.Rectangle = Rectangle;
exports.SVGOverlay = SVGOverlay;
exports.ScaleControl = ScaleControl;
exports.TileLayer = TileLayer;
exports.Tooltip = Tooltip;
exports.VideoOverlay = VideoOverlay;
exports.WMSTileLayer = WMSTileLayer;
exports.ZoomControl = ZoomControl;
exports.useMap = useMap;
exports.useMapEvent = useMapEvent;
exports.useMapEvents = useMapEvents;
Object.defineProperty(exports, '__esModule', { value: true });
}));
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("leaflet"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","leaflet","react-dom"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).ReactLeaflet={},n.React,n.L,n.ReactDOM)}(this,(function(n,e,t,r){"use strict";function o(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var u=o(e);function c(n,t){const r=e.useRef(t);e.useEffect((function(){t!==r.current&&null!=n.attributionControl&&(null!=r.current&&n.attributionControl.removeAttribution(r.current),null!=t&&n.attributionControl.addAttribution(t)),r.current=t}),[n,t])}function a(n,e,t){e.center!==t.center&&n.setLatLng(e.center),null!=e.radius&&e.radius!==t.radius&&n.setRadius(e.radius)}const l=e.createContext(null),i=l.Provider;function s(){const n=e.useContext(l);if(null==n)throw new Error("No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>");return n}function f(n){function t(t,r){const{instance:o,context:c}=n(t).current;return e.useImperativeHandle(r,(()=>o)),null==t.children?null:u.default.createElement(i,{value:c},t.children)}return e.forwardRef(t)}function p(n){function t(t,r){const{instance:o}=n(t).current;return e.useImperativeHandle(r,(()=>o)),null}return e.forwardRef(t)}function d(n){return function(t){const r=s(),o=n(t,r),{instance:u}=o.current,c=e.useRef(t.position),{position:a}=t;return e.useEffect((function(){return u.addTo(r.map),function(){u.remove()}}),[r.map,u]),e.useEffect((function(){null!=a&&a!==c.current&&(u.setPosition(a),c.current=a)}),[u,a]),o}}function y(n,t){const r=e.useRef();e.useEffect((function(){return null!=t&&n.instance.on(t),r.current=t,function(){null!=r.current&&n.instance.off(r.current),r.current=null}}),[n,t])}function m(n,e){const t=n.pane??e.pane;return t?{...n,pane:t}:n}function v(n,e){(function(n){return n.split(" ").filter(Boolean)})(e).forEach((e=>{t.DomUtil.addClass(n,e)}))}function C(n,t){return null==t?function(t,r){return e.useRef(n(t,r))}:function(r,o){const u=e.useRef(n(r,o)),c=e.useRef(r),{instance:a}=u.current;return e.useEffect((function(){c.current!==r&&(t(a,r,c.current),c.current=r)}),[a,r,o]),u}}function h(n,t){e.useEffect((function(){return(t.layerContainer??t.map).addLayer(n.instance),function(){var e;null==(e=t.layerContainer)||e.removeLayer(n.instance),t.map.removeLayer(n.instance)}}),[t,n])}function b(n){return function(e){const t=s(),r=n(m(e,t),t);return c(t.map,e.attribution),y(r.current,e.eventHandlers),h(r.current,t),r}}function w(n){return function(t){const r=s(),o=n(m(t,r),r);return y(o.current,t.eventHandlers),h(o.current,r),function(n,t){const r=e.useRef();e.useEffect((function(){if(t.pathOptions!==r.current){const e=t.pathOptions??{};n.instance.setStyle(e),r.current=e}}),[n,t])}(o.current,t),o}}function x(n){return p(d(C((function(e,t){return{instance:n(e),context:t}}))))}function g(n,e){return f(b(C(n,e)))}function L(n,t){const o=function(n,e){return function(t,r){const o=s(),u=n(m(t,o),o);return c(o.map,t.attribution),y(u.current,t.eventHandlers),e(u.current,o,t,r),u}}(C(n),t);return function(n){function t(t,o){const[u,c]=e.useState(!1),{instance:a}=n(t,c).current;e.useImperativeHandle(o,(()=>a)),e.useEffect((function(){u&&a.update()}),[a,u,t.children]);const l=a._contentNode;return l?r.createPortal(t.children,l):null}return e.forwardRef(t)}(o)}function E(n,e){return f(w(C(n,e)))}function O(n,e){return p(b(C(n,e)))}function P(n,e,t){const{opacity:r,zIndex:o}=e;null!=r&&r!==t.opacity&&n.setOpacity(r),null!=o&&o!==t.zIndex&&n.setZIndex(o)}function R(n,e,r){e.bounds instanceof t.LatLngBounds&&e.bounds!==r.bounds&&n.setBounds(e.bounds),null!=e.opacity&&e.opacity!==r.opacity&&n.setOpacity(e.opacity),null!=e.zIndex&&e.zIndex!==r.zIndex&&n.setZIndex(e.zIndex)}function I(){return s().map}const M=x((function(n){return new t.Control.Attribution(n)})),S=E((function({center:n,children:e,...r},o){const u=new t.Circle(n,r);return{instance:u,context:{...o,overlayContainer:u}}}),a),k=E((function({center:n,children:e,...r},o){const u=new t.CircleMarker(n,r);return{instance:u,context:{...o,overlayContainer:u}}}),a),z=E((function({children:n,...e},r){const o=new t.FeatureGroup([],e);return{instance:o,context:{...r,layerContainer:o,overlayContainer:o}}})),T=E((function({data:n,...e},r){const o=new t.GeoJSON(n,e);return{instance:o,context:{...r,overlayContainer:o}}}),(function(n,e,t){e.style!==t.style&&(null==e.style?n.resetStyle():n.setStyle(e.style))})),_=g((function({bounds:n,url:e,...r},o){const u=new t.ImageOverlay(e,n,r);return{instance:u,context:{...o,overlayContainer:u}}}),(function(n,e,t){R(n,e,t),e.url!==t.url&&n.setUrl(e.url)})),N=g((function({children:n,...e},r){const o=new t.LayerGroup([],e);return{instance:o,context:{...r,layerContainer:o}}})),G=f(d(C((function({children:n,...e},r){const o=new t.Control.Layers(void 0,void 0,e);return{instance:o,context:{...r,layersControl:o}}}),(function(n,e,t){e.collapsed!==t.collapsed&&(!0===e.collapsed?n.collapse():n.expand())}))));function j(n){return function(t){const r=s(),o=e.useRef(t),[c,a]=e.useState(null),{layersControl:l,map:f}=r,p=e.useCallback((e=>{null!=l&&(o.current.checked&&f.addLayer(e),n(l,e,o.current.name),a(e))}),[l,f]),d=e.useCallback((n=>{null==l||l.removeLayer(n),a(null)}),[l]),y=e.useMemo((()=>({...r,layerContainer:{addLayer:p,removeLayer:d}})),[r,p,d]);return e.useEffect((()=>{null!==c&&o.current!==t&&(!0!==t.checked||null!=o.current.checked&&!1!==o.current.checked?!0!==o.current.checked||null!=t.checked&&!1!==t.checked||f.removeLayer(c):f.addLayer(c),o.current=t)})),t.children?u.default.createElement(i,{value:y},t.children):null}}function A(){return A=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},A.apply(this,arguments)}G.BaseLayer=j((function(n,e,t){n.addBaseLayer(e,t)})),G.Overlay=j((function(n,e,t){n.addOverlay(e,t)}));const B=g((function({position:n,...e},r){const o=new t.Marker(n,e);return{instance:o,context:{...r,overlayContainer:o}}}),(function(n,e,t){e.position!==t.position&&n.setLatLng(e.position),null!=e.icon&&e.icon!==t.icon&&n.setIcon(e.icon),null!=e.zIndexOffset&&e.zIndexOffset!==t.zIndexOffset&&n.setZIndexOffset(e.zIndexOffset),null!=e.opacity&&e.opacity!==t.opacity&&n.setOpacity(e.opacity),null!=n.dragging&&e.draggable!==t.draggable&&(!0===e.draggable?n.dragging.enable():n.dragging.disable())})),H=["mapPane","markerPane","overlayPane","popupPane","shadowPane","tilePane","tooltipPane"];function V(n,e){const{[e]:t,...r}=n;return r}const Z=E((function({positions:n,...e},r){const o=new t.Polygon(n,e);return{instance:o,context:{...r,overlayContainer:o}}}),(function(n,e,t){e.positions!==t.positions&&n.setLatLngs(e.positions)})),q=E((function({positions:n,...e},r){const o=new t.Polyline(n,e);return{instance:o,context:{...r,overlayContainer:o}}}),(function(n,e,t){e.positions!==t.positions&&n.setLatLngs(e.positions)})),U=L((function(n,e){return{instance:new t.Popup(n,e.overlayContainer),context:e}}),(function(n,t,r,o){const{onClose:u,onOpen:c,position:a}=r;e.useEffect((function(){const{instance:e}=n;function r(n){n.popup===e&&(e.update(),o(!0),null==c||c())}function l(n){n.popup===e&&(o(!1),null==u||u())}return t.map.on({popupopen:r,popupclose:l}),null==t.overlayContainer?(null!=a&&e.setLatLng(a),e.openOn(t.map)):t.overlayContainer.bindPopup(e),function(){var n;t.map.off({popupopen:r,popupclose:l}),null==(n=t.overlayContainer)||n.unbindPopup(),t.map.removeLayer(e)}}),[n,t,o,u,c,a])})),D=E((function({bounds:n,...e},r){const o=new t.Rectangle(n,e);return{instance:o,context:{...r,overlayContainer:o}}}),(function(n,e,t){e.bounds!==t.bounds&&n.setBounds(e.bounds)})),F=x((function(n){return new t.Control.Scale(n)})),J=b(C((function(n,e){const{attributes:r,bounds:o,...u}=n,c=document.createElementNS("http://www.w3.org/2000/svg","svg");return c.setAttribute("xmlns","http://www.w3.org/2000/svg"),null!=r&&Object.keys(r).forEach((n=>{c.setAttribute(n,r[n])})),{instance:new t.SVGOverlay(c,o,u),container:c,context:e}}),R));function W({children:n,...t},o){const{instance:u,container:c}=J(t).current;return e.useImperativeHandle(o,(()=>u)),null==c||null==n?null:r.createPortal(n,c)}const $=e.forwardRef(W),Y=O((function({url:n,...e},r){return{instance:new t.TileLayer(n,m(e,r)),context:r}}),P),K=L((function(n,e){return{instance:new t.Tooltip(n,e.overlayContainer),context:e}}),(function(n,t,r,o){const{onClose:u,onOpen:c}=r;e.useEffect((function(){const e=t.overlayContainer;if(null==e)return;const{instance:r}=n,a=n=>{n.tooltip===r&&(r.update(),o(!0),null==c||c())},l=n=>{n.tooltip===r&&(o(!1),null==u||u())};return e.on({tooltipopen:a,tooltipclose:l}),e.bindTooltip(r),function(){e.off({tooltipopen:a,tooltipclose:l}),null!=e._map&&e.unbindTooltip()}}),[n,t,o,u,c])})),Q=g((function({bounds:n,url:e,...r},o){const u=new t.VideoOverlay(e,n,r);var c;!0===r.play&&(null==(c=u.getElement())||c.play());return{instance:u,context:{...o,overlayContainer:u}}}),(function(n,e,t){R(n,e,t),"string"==typeof e.url&&e.url!==t.url&&n.setUrl(e.url);const r=n.getElement();null!=r&&(!0!==e.play||t.play?e.play||!0!==t.play||r.pause():r.play())})),X=O((function({params:n={},url:e,...r},o){return{instance:new t.TileLayer.WMS(e,{...n,...m(r,o)}),context:o}}),(function(n,e,t){P(n,e,t),null!=e.params&&e.params!==t.params&&n.setParams(e.params)})),nn=x((function(n){return new t.Control.Zoom(n)}));n.AttributionControl=M,n.Circle=S,n.CircleMarker=k,n.FeatureGroup=z,n.GeoJSON=T,n.ImageOverlay=_,n.LayerGroup=N,n.LayersControl=G,n.MapConsumer=function({children:n}){return n(I())},n.MapContainer=function({children:n,className:r,id:o,placeholder:c,style:a,whenCreated:l,...s}){const f=e.useRef(null),p=function(n,r){const[o,u]=e.useState(null);return e.useEffect((()=>{if(null!==n.current&&null===o){const e=new t.Map(n.current,r);null!=r.center&&null!=r.zoom?e.setView(r.center,r.zoom):null!=r.bounds&&e.fitBounds(r.bounds,r.boundsOptions),null!=r.whenReady&&e.whenReady(r.whenReady),u(e)}}),[n,o,r]),o}(f,s),d=e.useRef(!1);e.useEffect((()=>{null!=p&&!1===d.current&&null!=l&&(d.current=!0,l(p))}),[p,l]);const[y]=e.useState({className:r,id:o,style:a}),m=e.useMemo((()=>p?{__version:1,map:p}:null),[p]),v=m?u.default.createElement(i,{value:m},n):c??null;return u.default.createElement("div",A({},y,{ref:f}),v)},n.Marker=B,n.Pane=function(n){const[t,o]=e.useState(),c=s(),a=e.useMemo((()=>({...c,pane:n.name})),[c]);return e.useEffect((()=>(o(function(n,e){const t=n.name;if(-1!==H.indexOf(t))throw new Error(`You must use a unique name for a pane that is not a default Leaflet pane: ${t}`);if(null!=e.map.getPane(t))throw new Error(`A pane with this name already exists: ${t}`);const r=n.pane??e.pane,o=r?e.map.getPane(r):void 0,u=e.map.createPane(t,o);return null!=n.className&&v(u,n.className),null!=n.style&&Object.keys(n.style).forEach((e=>{u.style[e]=n.style[e]})),u}(n,c)),function(){const e=c.map.getPane(n.name);null==e||null==e.remove||e.remove(),null!=c.map._panes&&(c.map._panes=V(c.map._panes,n.name),c.map._paneRenderers=V(c.map._paneRenderers,n.name))})),[]),null!=n.children&&null!=t?r.createPortal(u.default.createElement(i,{value:a},n.children),t):null},n.Polygon=Z,n.Polyline=q,n.Popup=U,n.Rectangle=D,n.SVGOverlay=$,n.ScaleControl=F,n.TileLayer=Y,n.Tooltip=K,n.VideoOverlay=Q,n.WMSTileLayer=X,n.ZoomControl=nn,n.useMap=I,n.useMapEvent=function(n,t){const r=I();return e.useEffect((function(){return r.on(n,t),function(){r.off(n,t)}}),[r,n,t]),r},n.useMapEvents=function(n){const t=I();return e.useEffect((function(){return t.on(n),function(){t.off(n)}}),[t,n]),t},Object.defineProperty(n,"__esModule",{value:!0})}));