New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

react-leaflet

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-leaflet - npm Package Compare versions

Comparing version 3.0.0-beta.3 to 3.0.0-beta.4

@@ -1,5 +0,13 @@

import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const AttributionControl = createControlComponent(function createAttributionControl(props) {
return new Control.Attribution(props);
});
"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;

@@ -1,4 +0,11 @@

import { createPathComponent, updateCircle } from '@react-leaflet/core';
import { Circle as LeafletCircle } from 'leaflet';
export const Circle = createPathComponent(function createCircle({
"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,

@@ -8,3 +15,3 @@ children: _c,

}, ctx) {
const instance = new LeafletCircle(center, options);
const instance = new _leaflet.Circle(center, options);
return {

@@ -16,2 +23,3 @@ instance,

};
}, updateCircle);
}, _core.updateCircle);
exports.Circle = Circle;

@@ -1,4 +0,11 @@

import { createPathComponent, updateCircle } from '@react-leaflet/core';
import { CircleMarker as LeafletCircleMarker } from 'leaflet';
export const CircleMarker = createPathComponent(function createCircleMarker({
"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,

@@ -8,3 +15,3 @@ children: _c,

}, ctx) {
const instance = new LeafletCircleMarker(center, options);
const instance = new _leaflet.CircleMarker(center, options);
return {

@@ -16,2 +23,3 @@ instance,

};
}, updateCircle);
}, _core.updateCircle);
exports.CircleMarker = CircleMarker;

@@ -1,8 +0,15 @@

import { createPathComponent } from '@react-leaflet/core';
import { FeatureGroup as LeafletFeatureGroup } from 'leaflet';
export const FeatureGroup = createPathComponent(function createFeatureGroup({
"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 LeafletFeatureGroup([], options);
const instance = new _leaflet.FeatureGroup([], options);
const context = { ...ctx,

@@ -16,2 +23,3 @@ layerContainer: instance,

};
});
});
exports.FeatureGroup = FeatureGroup;

@@ -1,8 +0,15 @@

import { createPathComponent } from '@react-leaflet/core';
import { GeoJSON as LeafletGeoJSON } from 'leaflet';
export const GeoJSON = createPathComponent(function createGeoJSON({
"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 LeafletGeoJSON(data, options);
const instance = new _leaflet.GeoJSON(data, options);
return {

@@ -14,2 +21,3 @@ instance,

};
});
});
exports.GeoJSON = GeoJSON;

@@ -1,9 +0,19 @@

import { useLeafletContext } from '@react-leaflet/core';
import { useEffect } from 'react';
export function useMap() {
return useLeafletContext().map;
"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;
}
export function useMapEvent(type, handler) {
function useMapEvent(type, handler) {
const map = useMap();
useEffect(function addMapEventHandler() {
(0, _react.useEffect)(function addMapEventHandler() {
// @ts-ignore event type

@@ -18,5 +28,6 @@ map.on(type, handler);

}
export function useMapEvents(handlers) {
function useMapEvents(handlers) {
const map = useMap();
useEffect(function addMapEventHandlers() {
(0, _react.useEffect)(function addMapEventHandlers() {
map.on(handlers);

@@ -23,0 +34,0 @@ return function removeMapEventHandlers() {

@@ -1,4 +0,11 @@

import { createLayerComponent, updateMediaOverlay } from '@react-leaflet/core';
import { ImageOverlay as LeafletImageOverlay } from 'leaflet';
export const ImageOverlay = createLayerComponent(function createImageOveraly({
"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,

@@ -8,3 +15,3 @@ url,

}, ctx) {
const instance = new LeafletImageOverlay(url, bounds, options);
const instance = new _leaflet.ImageOverlay(url, bounds, options);
return {

@@ -17,3 +24,3 @@ instance,

}, function updateImageOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
(0, _core.updateMediaOverlay)(overlay, props, prevProps);

@@ -23,2 +30,3 @@ if (props.url !== prevProps.url) {

}
});
});
exports.ImageOverlay = ImageOverlay;

@@ -1,24 +0,102 @@

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';
"use strict";
exports.__esModule = true;
exports.ZoomControl = exports.WMSTileLayer = exports.VideoOverlay = exports.Tooltip = exports.TileLayer = exports.SVGOverlay = exports.ScaleControl = 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 = exports.useMapEvents = exports.useMapEvent = exports.useMap = 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;

@@ -1,8 +0,15 @@

import { createLayerComponent } from '@react-leaflet/core';
import { LayerGroup as LeafletLayerGroup } from 'leaflet';
export const LayerGroup = createLayerComponent(function createLayerGroup({
"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 LeafletLayerGroup([], options);
const instance = new _leaflet.LayerGroup([], options);
return {

@@ -14,2 +21,3 @@ instance,

};
});
});
exports.LayerGroup = LayerGroup;

@@ -1,9 +0,22 @@

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({
"use strict";
exports.__esModule = true;
exports.createControlledLayer = createControlledLayer;
exports.LayersControl = exports.useLayersControl = exports.useLayersControlElement = void 0;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 Control.Layers(undefined, undefined, options);
const instance = new _leaflet.Control.Layers(undefined, undefined, options);
return {

@@ -24,10 +37,14 @@ instance,

});
export const useLayersControl = createControlHook(useLayersControlElement);
exports.useLayersControlElement = useLayersControlElement;
const useLayersControl = (0, _core.createControlHook)(useLayersControlElement);
exports.useLayersControl = useLayersControl;
// @ts-ignore
export const LayersControl = createContainerComponent(useLayersControl);
export function createControlledLayer(addLayerToControl) {
const LayersControl = (0, _core.createContainerComponent)(useLayersControl);
exports.LayersControl = LayersControl;
function createControlledLayer(addLayerToControl) {
return function ControlledLayer(props) {
const parentContext = useLeafletContext();
const propsRef = useRef(props);
const [layer, setLayer] = useState(null);
const parentContext = (0, _core.useLeafletContext)();
const propsRef = (0, _react.useRef)(props);
const [layer, setLayer] = (0, _react.useState)(null);
const {

@@ -37,3 +54,3 @@ layersControl,

} = parentContext;
const addLayer = useCallback(layerToAdd => {
const addLayer = (0, _react.useCallback)(layerToAdd => {
if (layersControl != null) {

@@ -48,7 +65,7 @@ if (propsRef.current.checked) {

}, [layersControl, map]);
const removeLayer = useCallback(layerToRemove => {
layersControl?.removeLayer(layerToRemove);
const removeLayer = (0, _react.useCallback)(layerToRemove => {
layersControl == null ? void 0 : layersControl.removeLayer(layerToRemove);
setLayer(null);
}, [layersControl]);
const context = useMemo(() => ({ ...parentContext,
const context = (0, _react.useMemo)(() => ({ ...parentContext,
layerContainer: {

@@ -59,3 +76,3 @@ addLayer,

}), [parentContext, addLayer, removeLayer]);
useEffect(() => {
(0, _react.useEffect)(() => {
if (layer !== null && propsRef.current !== props) {

@@ -71,3 +88,3 @@ if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {

});
return props.children ? /*#__PURE__*/React.createElement(LeafletProvider, {
return props.children ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, {
value: context

@@ -77,2 +94,3 @@ }, props.children) : null;

}
LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {

@@ -79,0 +97,0 @@ layersControl.addBaseLayer(layer, name);

@@ -1,6 +0,12 @@

import { useMap } from './hooks';
export function MapConsumer({
"use strict";
exports.__esModule = true;
exports.MapConsumer = MapConsumer;
var _hooks = require("./hooks");
function MapConsumer({
children
}) {
return children(useMap());
return children((0, _hooks.useMap)());
}

@@ -1,9 +0,22 @@

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(() => {
"use strict";
exports.__esModule = true;
exports.useMapElement = useMapElement;
exports.MapContainer = MapContainer;
var _core = require("@react-leaflet/core");
var _leaflet = require("leaflet");
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 useMapElement(mapRef, props) {
const [map, setMap] = (0, _react.useState)(null);
(0, _react.useEffect)(() => {
if (mapRef.current !== null && map === null) {
const instance = new LeafletMap(mapRef.current, props);
const instance = new _leaflet.Map(mapRef.current, props);

@@ -25,3 +38,4 @@ if (props.center != null && props.zoom != null) {

}
export function MapContainer({
function MapContainer({
children,

@@ -35,6 +49,6 @@ className,

}) {
const mapRef = useRef(null);
const mapRef = (0, _react.useRef)(null);
const map = useMapElement(mapRef, options);
const createdRef = useRef(false);
useEffect(() => {
const createdRef = (0, _react.useRef)(false);
(0, _react.useEffect)(() => {
if (map != null && createdRef.current === false && whenCreated != null) {

@@ -45,10 +59,10 @@ createdRef.current = true;

}, [map, whenCreated]);
const context = useMemo(() => map ? {
__version: CONTEXT_VERSION,
const context = (0, _react.useMemo)(() => map ? {
__version: _core.CONTEXT_VERSION,
map
} : null, [map]);
const contents = context ? /*#__PURE__*/React.createElement(LeafletProvider, {
const contents = context ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, {
value: context
}, children) : placeholder ?? null;
return /*#__PURE__*/React.createElement("div", {
}, children) : placeholder != null ? placeholder : null;
return /*#__PURE__*/_react.default.createElement("div", {
ref: mapRef,

@@ -55,0 +69,0 @@ className: className,

@@ -1,8 +0,15 @@

import { createLayerComponent } from '@react-leaflet/core';
import { Marker as LeafletMarker } from 'leaflet';
export const Marker = createLayerComponent(function createMarker({
"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 LeafletMarker(position, options);
const instance = new _leaflet.Marker(position, options);
return {

@@ -38,2 +45,3 @@ instance,

}
});
});
exports.Marker = Marker;

@@ -1,3 +0,14 @@

import { LeafletProvider, addClassName, removeClassName, useLeafletContext } from '@react-leaflet/core';
import React, { useEffect, useMemo, useRef } from 'react';
"use strict";
exports.__esModule = true;
exports.Pane = Pane;
var _core = require("@react-leaflet/core");
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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'];

@@ -20,10 +31,10 @@ const PANE_STYLES = {

export function Pane(props) {
const context = useLeafletContext();
const paneElementRef = useRef(null);
const propsRef = useRef(props);
function Pane(props) {
const context = (0, _core.useLeafletContext)();
const paneElementRef = (0, _react.useRef)(null);
const propsRef = (0, _react.useRef)(props);
function applyStyles(paneElement) {
if (props.className != null) {
addClassName(paneElement, props.className);
(0, _core.addClassName)(paneElement, props.className);
}

@@ -57,3 +68,3 @@

const pane = context.map.getPane(name);
pane?.remove?.(); // @ts-ignore map internals
pane == null ? void 0 : pane.remove == null ? void 0 : pane.remove(); // @ts-ignore map internals

@@ -70,3 +81,3 @@ if (context.map._panes != null) {

useEffect(function handlePane() {
(0, _react.useEffect)(function handlePane() {
if (paneElementRef.current === null) {

@@ -79,3 +90,3 @@ createPane();

if (propsRef.current.className && props.className !== propsRef.current.className) {
removeClassName(paneElementRef.current, propsRef.current.className);
(0, _core.removeClassName)(paneElementRef.current, propsRef.current.className);
} // Update the pane's DOM node style and class

@@ -95,10 +106,10 @@

});
const newContext = useMemo(() => ({ ...context,
const newContext = (0, _react.useMemo)(() => ({ ...context,
pane: props.name
}), [context, props.name]);
return props.children ? /*#__PURE__*/React.createElement(LeafletProvider, {
return props.children ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, {
value: newContext
}, /*#__PURE__*/React.createElement("div", {
}, /*#__PURE__*/_react.default.createElement("div", {
style: PANE_STYLES
}, props.children)) : null;
}

@@ -1,8 +0,15 @@

import { createPathComponent } from '@react-leaflet/core';
import { Polygon as LeafletPolygon } from 'leaflet';
export const Polygon = createPathComponent(function createPolygon({
"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 LeafletPolygon(positions, options);
const instance = new _leaflet.Polygon(positions, options);
return {

@@ -18,2 +25,3 @@ instance,

}
});
});
exports.Polygon = Polygon;

@@ -1,8 +0,15 @@

import { createPathComponent } from '@react-leaflet/core';
import { Polyline as LeafletPolyline } from 'leaflet';
export const Polyline = createPathComponent(function createPolyline({
"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 LeafletPolyline(positions, options);
const instance = new _leaflet.Polyline(positions, options);
return {

@@ -18,2 +25,3 @@ instance,

}
});
});
exports.Polyline = Polyline;

@@ -1,7 +0,15 @@

import { createOverlayComponent } from '@react-leaflet/core';
import { Popup as LeafletPopup } from 'leaflet';
import { useEffect } from 'react';
export const Popup = createOverlayComponent(function createPopup(props, context) {
"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 LeafletPopup(props, context.overlayContainer),
instance: new _leaflet.Popup(props, context.overlayContainer),
context

@@ -15,3 +23,3 @@ };

} = props;
useEffect(function addPopup() {
(0, _react.useEffect)(function addPopup() {
const {

@@ -25,3 +33,3 @@ instance

setOpen(true);
onOpen?.();
onOpen == null ? void 0 : onOpen();
}

@@ -33,3 +41,3 @@ }

setOpen(false);
onClose?.();
onClose == null ? void 0 : onClose();
}

@@ -72,2 +80,3 @@ }

}, [element, context, setOpen, onClose, onOpen, position]);
});
});
exports.Popup = Popup;

@@ -1,8 +0,15 @@

import { createPathComponent } from '@react-leaflet/core';
import { Rectangle as LeafletRectangle } from 'leaflet';
export const Rectangle = createPathComponent(function createRectangle({
"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 LeafletRectangle(bounds, options);
const instance = new _leaflet.Rectangle(bounds, options);
return {

@@ -18,2 +25,3 @@ instance,

}
});
});
exports.Rectangle = Rectangle;

@@ -1,5 +0,13 @@

import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const ScaleControl = createControlComponent(function createScaleControl(props) {
return new Control.Scale(props);
});
"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;

@@ -1,6 +0,15 @@

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) {
"use strict";
exports.__esModule = true;
exports.SVGOverlay = exports.useSVGOverlay = exports.useSVGOverlayElement = 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 {

@@ -24,8 +33,10 @@ bounds,

return {
instance: new LeafletSVGOverlay(container, bounds, options),
instance: new _leaflet.SVGOverlay(container, bounds, options),
container,
context
};
}, updateMediaOverlay);
export const useSVGOverlay = createLayerHook(useSVGOverlayElement);
}, _core.updateMediaOverlay);
exports.useSVGOverlayElement = useSVGOverlayElement;
const useSVGOverlay = (0, _core.createLayerHook)(useSVGOverlayElement);
exports.useSVGOverlay = useSVGOverlay;

@@ -40,6 +51,7 @@ function SVGOverlayComponent({

} = useSVGOverlay(options).current;
useImperativeHandle(ref, () => instance);
return container == null || children == null ? null : /*#__PURE__*/createPortal(children, container);
(0, _react.useImperativeHandle)(ref, () => instance);
return container == null || children == null ? null : /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
}
export const SVGOverlay = /*#__PURE__*/forwardRef(SVGOverlayComponent);
const SVGOverlay = /*#__PURE__*/(0, _react.forwardRef)(SVGOverlayComponent);
exports.SVGOverlay = SVGOverlay;

@@ -1,4 +0,11 @@

import { createTileLayerComponent, updateGridLayer } from '@react-leaflet/core';
import { TileLayer as LeafletTileLayer } from 'leaflet';
export const TileLayer = createTileLayerComponent(function createTileLayer({
"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,

@@ -8,5 +15,6 @@ ...options

return {
instance: new LeafletTileLayer(url, options),
instance: new _leaflet.TileLayer(url, options),
context
};
}, updateGridLayer);
}, _core.updateGridLayer);
exports.TileLayer = TileLayer;

@@ -1,7 +0,15 @@

import { createOverlayComponent } from '@react-leaflet/core';
import { Tooltip as LeafletTooltip } from 'leaflet';
import { useEffect } from 'react';
export const Tooltip = createOverlayComponent(function createTooltip(props, context) {
"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 LeafletTooltip(props, context.overlayContainer),
instance: new _leaflet.Tooltip(props, context.overlayContainer),
context

@@ -14,3 +22,3 @@ };

} = props;
useEffect(function addTooltip() {
(0, _react.useEffect)(function addTooltip() {
const container = context.overlayContainer;

@@ -30,3 +38,3 @@

setOpen(true);
onOpen?.();
onOpen == null ? void 0 : onOpen();
}

@@ -38,3 +46,3 @@ };

setOpen(false);
onClose?.();
onClose == null ? void 0 : onClose();
}

@@ -60,2 +68,3 @@ };

}, [element, context, setOpen, onClose, onOpen]);
});
});
exports.Tooltip = Tooltip;

@@ -1,4 +0,11 @@

import { createLayerComponent, updateMediaOverlay } from '@react-leaflet/core';
import { VideoOverlay as LeafletVideoOverlay } from 'leaflet';
export const VideoOverlay = createLayerComponent(function createVideoOverlay({
"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,

@@ -8,6 +15,8 @@ url,

}, ctx) {
const instance = new LeafletVideoOverlay(url, bounds, options);
const instance = new _leaflet.VideoOverlay(url, bounds, options);
if (options.play === true) {
instance.getElement()?.play();
var _instance$getElement;
(_instance$getElement = instance.getElement()) == null ? void 0 : _instance$getElement.play();
}

@@ -22,3 +31,3 @@

}, function updateVideoOverlay(overlay, props, prevProps) {
updateMediaOverlay(overlay, props, prevProps);
(0, _core.updateMediaOverlay)(overlay, props, prevProps);

@@ -38,2 +47,3 @@ if (typeof props.url === 'string' && props.url !== prevProps.url) {

}
});
});
exports.VideoOverlay = VideoOverlay;

@@ -1,4 +0,11 @@

import { createTileLayerComponent, updateGridLayer } from '@react-leaflet/core';
import { TileLayer } from 'leaflet';
export const WMSTileLayer = createTileLayerComponent(function createWMSTileLayer({
"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 = {},

@@ -9,3 +16,3 @@ url,

return {
instance: new TileLayer.WMS(url, { ...params,
instance: new _leaflet.TileLayer.WMS(url, { ...params,
...options

@@ -16,3 +23,3 @@ }),

}, function updateWMSTileLayer(layer, props, prevProps) {
updateGridLayer(layer, props, prevProps);
(0, _core.updateGridLayer)(layer, props, prevProps);

@@ -22,2 +29,3 @@ if (props.params != null && props.params !== prevProps.params) {

}
});
});
exports.WMSTileLayer = WMSTileLayer;

@@ -1,5 +0,13 @@

import { createControlComponent } from '@react-leaflet/core';
import { Control } from 'leaflet';
export const ZoomControl = createControlComponent(function createZoomControl(props) {
return new Control.Zoom(props);
});
"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;
{
"name": "react-leaflet",
"version": "3.0.0-beta.3",
"version": "3.0.0-beta.4",
"description": "React components for Leaflet maps",

@@ -11,3 +11,3 @@ "main": "cjs/index.js",

"build:clean": "del cjs esm types umd",
"build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir cjs --extensions .ts,.tsx",
"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",

@@ -47,3 +47,3 @@ "build:types": "tsc --emitDeclarationOnly",

"dependencies": {
"@react-leaflet/core": "^1.0.0-beta.4"
"@react-leaflet/core": "^1.0.0-beta.5"
},

@@ -50,0 +50,0 @@ "peerDependencies": {