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

maplibre-react-components

Package Overview
Dependencies
Maintainers
0
Versions
19
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

maplibre-react-components - npm Package Compare versions

Comparing version 0.0.7 to 0.1.0

chunk-XELPL6N7.js

876

components/RFloatingPopup/index.js

@@ -1,875 +0,1 @@

import {
DOM,
arrowHeight,
init_esm_shims
} from "../../chunk-6D4LQKRK.js";
// src/components/RFloatingPopup/index.ts
init_esm_shims();
// src/components/RFloatingPopup/FloatingPopup.ts
init_esm_shims();
import { Evented, LngLat as LngLat2 } from "maplibre-gl";
// src/maplibre-core/util/util.ts
init_esm_shims();
function extend(dest, ...sources) {
for (const src of sources) {
for (const k in src) {
dest[k] = src[k];
}
}
return dest;
}
// src/maplibre-core/util/smart_wrap.ts
init_esm_shims();
import { LngLat } from "maplibre-gl";
function smartWrap(lngLat, priorPos, transform) {
const originalLngLat = new LngLat(lngLat.lng, lngLat.lat);
lngLat = new LngLat(lngLat.lng, lngLat.lat);
if (priorPos) {
const left = new LngLat(lngLat.lng - 360, lngLat.lat);
const right = new LngLat(lngLat.lng + 360, lngLat.lat);
const delta = transform.locationPoint(lngLat).distSqr(priorPos);
if (transform.locationPoint(left).distSqr(priorPos) < delta) {
lngLat = left;
} else if (transform.locationPoint(right).distSqr(priorPos) < delta) {
lngLat = right;
}
}
while (Math.abs(lngLat.lng - transform.center.lng) > 180) {
const pos = transform.locationPoint(lngLat);
if (pos.x >= 0 && pos.y >= 0 && pos.x <= transform.width && pos.y <= transform.height) {
break;
}
if (lngLat.lng > transform.center.lng) {
lngLat.lng -= 360;
} else {
lngLat.lng += 360;
}
}
if (lngLat.lng !== originalLngLat.lng && transform.locationPoint(lngLat).y > transform.height / 2 - transform.getHorizon()) {
return lngLat;
}
return originalLngLat;
}
// src/components/RFloatingPopup/VirtualElement.ts
init_esm_shims();
var VirtualElement = class {
x = 0;
y = 0;
setCoords(x, y) {
this.x = x;
this.y = y;
}
getBoundingClientRect() {
return {
width: 0,
height: 0,
x: this.x,
y: this.y,
top: this.y,
left: this.x,
right: this.x,
bottom: this.y
};
}
};
// src/components/RFloatingPopup/FloatingPopup.ts
import {
arrow,
computePosition,
flip,
hide,
limitShift,
offset,
shift
} from "@floating-ui/dom";
// ../pentatrion-design/components/button/index.ts
init_esm_shims();
// ../pentatrion-design/components/button/Button.tsx
init_esm_shims();
import {
forwardRef,
useImperativeHandle,
useRef as useRef7
} from "react";
import clsx2 from "clsx";
// ../pentatrion-design/components/loader/index.ts
init_esm_shims();
// ../pentatrion-design/components/loader/Loader.tsx
init_esm_shims();
import { useId } from "react";
import clsx from "clsx";
// ../pentatrion-design/lib/index.ts
init_esm_shims();
// ../pentatrion-design/lib/arrUtil.ts
init_esm_shims();
// ../pentatrion-design/lib/error.ts
init_esm_shims();
// ../pentatrion-design/lib/fetch.ts
init_esm_shims();
// ../pentatrion-design/lib/tailwindVariants.ts
init_esm_shims();
var colorVariants = {
yellow: {
border: "border-yellow-3",
text: "text-yellow-4"
},
gray: {
border: "border-gray-3",
text: "text-gray-4"
},
red: {
border: "border-red-3",
text: "text-red-4"
},
orange: {
border: "border-orange-3",
text: "text-orange-4"
},
green: {
border: "border-green-3",
text: "text-green-4"
},
blue: {
border: "border-blue-3",
text: "text-blue-4"
}
};
// ../pentatrion-design/components/loader/Loader.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var sizeConfig = {
small: "w-6 h-6 text-base",
medium: "w-8 h-8 text-[2rem]",
large: "w-12 h-12 text-[3rem]"
};
var trackStyle = {
strokeLinecap: "round",
strokeWidth: 2
};
var circleStyle = {
strokeLinecap: "round",
strokeWidth: 2,
/**
* $total-length: 43.699; // total length of path, calculated by getTotalLength() in JS
* $looping-percent: 40;
* $looping-length: math.div($looping-percent * $total-length, 100) = 17.464;
* stroke-dasharray: #{$looping-length * 1px}, #{($total-length - $looping-length) * 1px};
*/
strokeDasharray: "17.45px, 26.21px"
};
function Loader({ size = "medium", color = "blue", className, ...rest }) {
const id = useId();
return /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: clsx("inline-block", sizeConfig[size], colorVariants[color].text, className),
viewBox: "0 0 16 16",
...rest,
children: [
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("circle", { id, cx: "8", cy: "8", r: "7" }) }),
/* @__PURE__ */ jsx("use", { href: `#${id}`, className: "opacity-25 fill-none stroke-current", style: trackStyle }),
/* @__PURE__ */ jsx(
"use",
{
href: `#${id}`,
className: "fill-none stroke-current animate-loader-stroke",
style: circleStyle
}
)
]
}
);
}
// ../pentatrion-design/hooks/index.ts
init_esm_shims();
// ../pentatrion-design/hooks/useRipple.tsx
init_esm_shims();
import { useEffect, useState } from "react";
import { jsx as jsx2 } from "react/jsx-runtime";
var useRipple = (ref) => {
const [ripples, setRipples] = useState([]);
useEffect(() => {
const handlePointerDown = (e) => {
if (ref.current) {
const elem = ref.current;
const rect = elem.getBoundingClientRect();
const left = (e.clientX ?? 0) - rect.left;
const top = (e.clientY ?? 0) - rect.top;
const height = elem.clientHeight;
const width = elem.clientWidth;
const diameter = Math.max(width, height);
setRipples((r) => [
...r,
{
top: top - diameter / 2,
left: left - diameter / 2,
height: Math.max(width, height),
width: Math.max(width, height)
}
]);
}
};
if (ref.current) {
const elem = ref.current;
elem.addEventListener("pointerdown", handlePointerDown);
return () => {
elem.removeEventListener("pointerdown", handlePointerDown);
};
}
}, [ref]);
const [_debounced] = useDebounce(ripples, 1e3);
useEffect(() => {
if (_debounced.length) {
setRipples([]);
}
}, [_debounced]);
return ripples?.map((style, i) => {
return /* @__PURE__ */ jsx2(
"span",
{
"data-testid": "ripple",
className: "motion-safe:animate-ripple",
style: {
...style,
//should be absolutely positioned
position: "absolute",
backgroundColor: "#FFFFFF",
opacity: "25%",
transform: "scale(0)",
borderRadius: "50%"
}
},
i
);
});
};
// ../pentatrion-design/hooks/useIsMounted.ts
init_esm_shims();
import { useCallback, useEffect as useEffect2, useRef } from "react";
// ../pentatrion-design/hooks/useCombinedRefs.ts
init_esm_shims();
import { useCallback as useCallback2 } from "react";
// ../pentatrion-design/hooks/useIsClosing.ts
init_esm_shims();
import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
// ../pentatrion-design/hooks/usePrevious.ts
init_esm_shims();
import { useEffect as useEffect4, useRef as useRef3 } from "react";
// ../pentatrion-design/hooks/useEventCallback.ts
init_esm_shims();
import { useCallback as useCallback4, useRef as useRef4 } from "react";
// ../pentatrion-design/hooks/useDebounce.ts
init_esm_shims();
import {
useCallback as useCallback5,
useEffect as useEffect5,
useRef as useRef5,
useState as useState3
} from "react";
function useDebounce(value, delay) {
const [debouncedValue, setImmediateValue] = useState3(value);
useEffect5(() => {
const timer = setTimeout(() => setImmediateValue(value), delay || 500);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return [debouncedValue, setImmediateValue];
}
// ../pentatrion-design/hooks/useCopyToClipboard.ts
init_esm_shims();
import { useCallback as useCallback6, useState as useState4 } from "react";
// ../pentatrion-design/hooks/useEventListener.ts
init_esm_shims();
import { useEffect as useEffect7, useRef as useRef6 } from "react";
// ../pentatrion-design/hooks/useIsomorphicLayoutEffect.ts
init_esm_shims();
import { useEffect as useEffect6, useLayoutEffect } from "react";
// ../pentatrion-design/hooks/useOnClickOutside.ts
init_esm_shims();
// ../pentatrion-design/components/button/Button.tsx
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var buttonVariants = {
size(icon, size) {
if (size === "custom") {
return false;
}
switch (size) {
case "small":
return clsx2("text-sm h-6", icon ? "min-w-6 [&_i]:w-6" : "px-2");
case "medium":
return clsx2("h-8", icon ? "min-w-8 [&_i]:w-8" : "px-4");
case "large":
return clsx2(
"h-12",
icon ? "text-2xl min-w-12 [&_i]:w-12" : "text-xl px-8"
);
}
},
variant: {
contained(color) {
return clsx2(
"shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0",
{
yellow: "text-yellow-text bg-yellow-3 hover:bg-yellow-4 active-full:bg-yellow-5 focus-visible:outline-yellow-5",
gray: "text-gray-text bg-gray-3 hover:bg-gray-4 active-full:bg-gray-5 focus-visible:outline-gray-5",
red: "text-red-text bg-red-3 hover:bg-red-4 active-full:bg-red-5 focus-visible:outline-red-5",
orange: "text-orange-text bg-orange-3 hover:bg-orange-4 active-full:bg-orange-5 focus-visible:outline-orange-5",
green: "text-green-text bg-green-3 hover:bg-green-4 active-full:bg-green-5 focus-visible:outline-green-5",
blue: "text-blue-text bg-blue-3 hover:bg-blue-4 active-full:bg-blue-5 focus-visible:outline-blue-5"
}[color]
);
},
light(color) {
return clsx2(
"shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0 bg-gray-0",
{
yellow: "text-gray-text hover:text-yellow-text hover:bg-yellow-3 active-full:bg-yellow-4 dark:active-full:bg-yellow-4 focus-visible:outline-yellow-4",
gray: "text-gray-text hover:text-gray-text hover:bg-gray-3 active-full:bg-gray-4 dark:active-full:bg-gray-4/50 focus-visible:outline-gray-4",
red: "text-gray-text hover:text-red-text hover:bg-red-3 active-full:bg-red-4 dark:active-full:bg-red-4/50 focus-visible:outline-red-4",
orange: "text-gray-text hover:text-orange-text hover:bg-orange-3 active-full:bg-orange-4 dark:active-full:bg-orange-4/50 focus-visible:outline-orange-4",
green: "text-gray-text hover:text-green-text hover:bg-green-3 active-full:bg-green-4 dark:active-full:bg-green-4/50 focus-visible:outline-green-4",
blue: "text-gray-text hover:text-blue-text hover:bg-blue-3 active-full:bg-blue-4 dark:active-full:bg-blue-4/50 focus-visible:outline-blue-4"
}[color]
);
},
outlined(color) {
return clsx2(
"bg-gray-0 text-gray-7 outline outline-2 outline-offset-[-2px] focus-visible:ring-2 active-full:shadow-md",
{
yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/50 outline-yellow-5 focus-visible:ring-yellow-4",
gray: "hover:bg-gray-1 active-full:bg-gray-2 outline-gray-5 focus-visible:ring-gray-4",
red: "hover:bg-red-1/50 active-full:bg-red-2/50 outline-red-5 focus-visible:ring-red-4",
orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 outline-orange-5 focus-visible:ring-orange-4",
green: "hover:bg-green-1/50 active-full:bg-green-2/50 outline-green-5 focus-visible:ring-green-4",
blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 outline-blue-5 focus-visible:ring-blue-4"
}[color]
);
},
text(color) {
return clsx2(
"bg-transparent active-full:shadow-sm outline-offset-0",
{
yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/25 text-yellow-4 hover:text-yellow-5 focus-visible:outline-yellow-5",
gray: "hover:bg-gray-1 active-full:bg-gray-2 text-gray-5 hover:text-gray-6 active-full:text-gray-7 focus-visible:outline-gray-5",
red: "hover:bg-red-1/50 active-full:bg-red-2/50 text-red-4 hover:text-red-5 focus-visible:outline-red-5",
orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 text-orange-4 hover:text-orange-5 focus-visible:outline-orange-5",
green: "hover:bg-green-1/50 active-full:bg-green-2/50 text-green-4 hover:text-green-5 focus-visible:outline-green-5",
blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 text-blue-4 hover:text-blue-5 focus-visible:outline-blue-5"
}[color]
);
},
ghost(color) {
return clsx2(
"bg-transparent outline-offset-0",
{
yellow: "text-yellow-4 hover:text-yellow-5",
gray: "text-gray-5 hover:text-gray-6 active-full:text-gray-7",
red: "text-red-4 hover:text-red-5",
orange: "text-orange-4 hover:text-orange-5",
green: "text-green-4 hover:text-green-5",
blue: "text-blue-4 hover:text-blue-5"
}[color]
);
}
}
};
var Button = forwardRef(
({
withRipple = true,
variant = "contained",
loading,
color = "yellow",
size = "medium",
focusable = true,
fullWidth,
className,
disabled,
children,
selected = false,
icon = false,
...props
}, ref) => {
const inputRef = useRef7(null);
useImperativeHandle(
ref,
() => inputRef.current
);
const notClickable = loading || disabled;
const ripples = useRipple(inputRef);
return /* @__PURE__ */ jsxs2(
"button",
{
tabIndex: focusable ? 0 : -1,
role: "button",
ref: inputRef,
className: clsx2(
"relative inline-flex cursor-pointer items-center overflow-clip border-0 text-center leading-5 no-underline duration-300 focus-visible:outline focus-visible:outline-2 motion-safe:transition-color-shadow",
icon ? "rounded-full" : "rounded-2xl",
className,
buttonVariants.size(icon, size),
buttonVariants.variant[variant](color),
icon && "justify-center [&_:last-child:not(i,img,svg)]:pr-4",
fullWidth && "w-full",
selected && "active",
notClickable && "disabled"
),
"data-variant": variant,
disabled,
"aria-busy": loading,
...props,
children: [
!notClickable && withRipple && ripples,
children,
loading !== void 0 && /* @__PURE__ */ jsx3("span", { className: "", children: /* @__PURE__ */ jsx3(
Loader,
{
color,
size: "small",
className: clsx2("-mr-2 ml-2", !loading && "invisible")
}
) })
]
}
);
}
);
// ../pentatrion-design/components/button/ButtonGroup.tsx
init_esm_shims();
import clsx3 from "clsx";
import { jsx as jsx4 } from "react/jsx-runtime";
// ../pentatrion-design/components/button/LinkButton.tsx
init_esm_shims();
import {
forwardRef as forwardRef2,
useImperativeHandle as useImperativeHandle2,
useRef as useRef8
} from "react";
import clsx4 from "clsx";
import { jsxs as jsxs3 } from "react/jsx-runtime";
var LinkButton = forwardRef2(
function LinkButton2({
withRipple = true,
variant = "contained",
color = "yellow",
size = "medium",
focusable = true,
fullWidth,
className,
children,
selected = false,
icon = false,
href,
...props
}, ref) {
const anchorRef = useRef8(null);
useImperativeHandle2(
ref,
() => anchorRef.current
);
const ripples = useRipple(anchorRef);
return /* @__PURE__ */ jsxs3(
"a",
{
tabIndex: focusable ? 0 : -1,
role: "button",
href,
ref: anchorRef,
className: clsx4(
"relative inline-flex cursor-pointer items-center overflow-clip border-0 text-center leading-5 no-underline duration-300 focus-visible:outline focus-visible:outline-2 motion-safe:transition-color-shadow",
icon ? "rounded-full" : "rounded-2xl",
className,
buttonVariants.size(icon, size),
buttonVariants.variant[variant](color),
icon && "justify-center [&_:last-child:not(i,img)]:pr-4",
fullWidth && "w-full",
selected && "active"
),
"data-variant": variant,
...props,
children: [
withRipple && ripples,
children
]
}
);
}
);
// ../pentatrion-design/components/dialog/index.ts
init_esm_shims();
// ../pentatrion-design/components/dialog/Dialog.tsx
init_esm_shims();
import clsx5 from "clsx";
import { jsx as jsx5 } from "react/jsx-runtime";
var dialogVariants = {
color(color) {
if (!color) {
return "bg-gray-0";
}
return clsx5(
"border-t-4",
{
yellow: "border-t-yellow-3 bg-gray-0",
gray: "border-t-gray-3 bg-gray-0",
red: "border-t-red-3 bg-red-1",
blue: "border-t-blue-3 bg-blue-1",
green: "border-t-green-3 bg-green-1",
orange: "border-t-orange-3 bg-orange-1"
}[color]
);
}
};
// src/components/RFloatingPopup/FloatingPopup.ts
import clsx6 from "clsx";
var Event = class {
type;
constructor(type, data = {}) {
extend(this, data);
this.type = type;
}
};
var defaultOptions = {
closeButton: true,
closeOnClick: true,
closeOnMove: false,
placement: "top",
maxWidth: "240px",
borderColor: "yellow"
};
var FloatingPopup = class extends Evented {
_map;
options;
_content;
_container;
_dialog;
_closeButton;
_tip;
_lngLat;
_trackPointer = false;
_prevPos;
_pos;
_flatPos;
_virtualElement;
constructor(options) {
super();
this.options = extend(Object.create(defaultOptions), options);
this._virtualElement = new VirtualElement();
}
isOpen() {
return !!this._map;
}
getElement() {
return this._container;
}
remove = () => {
if (this._container) {
DOM.remove(this._container);
delete this._container;
}
if (this._map) {
this._map.off("move", this._onClose);
this._map.off("click", this._onClose);
this._map.off("remove", this.remove);
this._removePositionListeners();
delete this._map;
}
this.fire(new Event("close"));
return this;
};
getLngLat() {
return this._lngLat;
}
addTo(map) {
if (this._map) this.remove();
this._map = map;
if (this.options.closeOnClick) {
this._map.on("click", this._onClose);
}
if (this.options.closeOnMove) {
this._map.on("move", this._onClose);
}
this._map.on("remove", this.remove);
this._update();
this._refreshPositionListeners();
this.fire(new Event("open"));
return this;
}
_removePositionListeners() {
if (!this._map) {
return;
}
this._map.off("move", this._update);
this._map.off("mousemove", this._onMouseMove);
this._map.off("mouseup", this._onMouseUp);
this._map.off("drag", this._onDrag);
}
_refreshPositionListeners() {
if (!this._map) {
return;
}
this._removePositionListeners();
if (this._trackPointer) {
this._map.on("mousemove", this._onMouseMove);
this._map.on("mouseup", this._onMouseUp);
this._map.on("drag", this._onDrag);
} else {
this._map.on("move", this._update);
}
this._container?.classList.toggle("maplibregl-track-pointer", this._trackPointer);
this._map._canvasContainer.classList.toggle("maplibregl-track-pointer", this._trackPointer);
}
setLngLat(lnglat) {
this._trackPointer = false;
this._lngLat = LngLat2.convert(lnglat);
delete this._pos;
delete this._prevPos;
delete this._flatPos;
this._update();
this._refreshPositionListeners();
return this;
}
trackPointer() {
this._trackPointer = true;
delete this._pos;
delete this._prevPos;
delete this._flatPos;
this._update();
this._refreshPositionListeners();
return this;
}
setText(text, title) {
return this.setDOMContent(document.createTextNode(text), title);
}
setHTML(html, title) {
const description = DOM.create("div", "p-2");
const temp = document.createElement("body");
let child;
temp.innerHTML = html;
while (true) {
child = temp.firstChild;
if (!child) break;
description.appendChild(child);
}
return this.setDOMContent(description, title);
}
getMaxWidth() {
return this._container?.style.maxWidth;
}
setMaxWidth(maxWidth) {
this.options.maxWidth = maxWidth;
this._update();
return this;
}
setDOMContent(htmlNode, title) {
if (this._content) {
while (this._content.hasChildNodes()) {
if (this._content.firstChild) {
this._content.removeChild(this._content.firstChild);
}
}
} else {
this._content = DOM.create("div");
}
this._createActions();
this._createHeader(title);
this._content.appendChild(htmlNode);
this._update();
return this;
}
addClassName(className) {
if (this._container) {
this._container.classList.add(className);
}
}
removeClassName(className) {
if (this._container) {
this._container.classList.remove(className);
}
}
setOffset(offset2) {
this.options.offset = offset2;
this._update();
return this;
}
toggleClassName(className) {
if (this._container) {
return this._container.classList.toggle(className);
}
}
_onMouseUp = (event) => {
this._update(event.point);
};
_onMouseMove = (event) => {
this._update(event.point);
};
_onDrag = (event) => {
this._update(event.point);
};
_update = (cursorPosition) => {
const hasPosition = this._lngLat || this._trackPointer;
if (!this._map || !hasPosition || !this._content) {
return;
}
if (!this._container || !this._dialog) {
this._container = DOM.create(
"div",
// we need placement-top because we need initial border to compute the real popup height
"absolute top-0 left-0 w-max min-w-[150px] [&[data-track-pointer='true']]:select-none [&[data-track-pointer='true']]:pointer-events-none",
this._map.getContainer()
);
this._dialog = DOM.create(
"div",
// we need placement-top because we need initial border to compute the real popup height
clsx6(
"animate-fade-in rounded-2xl relative shadow dark:shadow-dark",
dialogVariants.color("yellow")
),
this._container
);
this._dialog.dataset.placement = "top";
this._dialog.dataset.color = "yellow";
if (this.options.className) {
for (const name of this.options.className.split(" ")) {
this._container.classList.add(name);
}
}
this._dialog.appendChild(this._content);
this._tip = DOM.create("div", "p8n-arrow", this._dialog);
}
if (this.options.maxWidth && this._dialog.style.maxWidth !== this.options.maxWidth) {
this._dialog.style.maxWidth = this.options.maxWidth;
}
if (this._map.transform.renderWorldCopies && !this._trackPointer) {
this._lngLat = smartWrap(this._lngLat, this._flatPos, this._map.transform);
} else {
this._lngLat = this._lngLat?.wrap();
}
this._container.dataset.trackPointer = this._trackPointer.toString();
if (this._trackPointer && !cursorPosition) return;
const pos = this._flatPos = this._pos = this._trackPointer && cursorPosition ? cursorPosition : this._map.project(this._lngLat);
if (this._map.terrain) {
this._flatPos = this._trackPointer && cursorPosition ? cursorPosition : this._map.transform.locationPoint(this._lngLat);
}
this._virtualElement.setCoords(pos.x, pos.y);
if (this._prevPos && this._prevPos.x === pos.x && this._prevPos.y === pos.y) {
return;
}
this._prevPos = pos;
computePosition(this._virtualElement, this._container, {
placement: this.options.placement,
middleware: [
offset(this.options.offset || arrowHeight),
flip({
mainAxis: !this.options.offset
}),
shift({
padding: arrowHeight,
limiter: limitShift({
offset: 15
})
}),
arrow({
element: this._tip,
padding: 12
}),
hide({
padding: -400
})
]
}).then(({ x, y, placement, middlewareData }) => {
if (!this._container) {
return;
}
this._container.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible";
if (middlewareData.hide?.referenceHidden) {
return;
}
this._container.style.transform = `translate(${x}px, ${y}px)`;
const { x: arrowX, y: arrowY } = middlewareData.arrow;
const currentSide = placement.split("-")[0];
if (this._dialog) {
this._dialog.dataset.placement = currentSide;
}
const staticSide = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
}[currentSide];
const arrowStyle = {
left: arrowX != null ? `${arrowX}px` : "",
top: arrowY != null ? `${arrowY}px` : "",
right: "",
bottom: "",
[staticSide]: "-6px"
};
Object.assign(this._tip.style, arrowStyle);
});
};
_createActions() {
if (this.options.closeButton) {
const actions = DOM.create("div", "p-1 float-right", this._content);
this._closeButton = DOM.create(
"button",
clsx6(
"rounded-2xl cursor-pointer relative overflow-clip focus-visible:outline focus-visible:outline-2 no-underline border-0 inline-flex items-center transition-color-shadow duration-300 leading-5",
"justify-center min-w-8 h-8 [&_i]:w-8 [&_:last-child:not(i)]:pr-4",
// icon
buttonVariants.variant.text("gray")
),
actions
);
this._closeButton.type = "button";
this._closeButton.setAttribute("aria-label", "Close popup");
DOM.create("i", "fe-cancel", this._closeButton);
this._closeButton.addEventListener("click", this._onClose);
}
}
_createHeader(title) {
if (title) {
const header = DOM.create("header", "flex items-center px-2 pt-2", this._content);
const h4 = DOM.create("h4", void 0, header);
h4.innerText = title;
}
}
_onClose = () => {
this.remove();
};
};
export {
FloatingPopup
};
import{a as o,b as d}from"../../chunk-XELPL6N7.js";o();o();import{Evented as ue,LngLat as ce}from"maplibre-gl";o();function M(t,...e){for(let r of e)for(let i in r)t[i]=r[i];return t}o();import{LngLat as C}from"maplibre-gl";function j(t,e,r){let i=new C(t.lng,t.lat);if(t=new C(t.lng,t.lat),e){let n=new C(t.lng-360,t.lat),l=new C(t.lng+360,t.lat),u=r.locationPoint(t).distSqr(e);r.locationPoint(n).distSqr(e)<u?t=n:r.locationPoint(l).distSqr(e)<u&&(t=l)}for(;Math.abs(t.lng-r.center.lng)>180;){let n=r.locationPoint(t);if(n.x>=0&&n.y>=0&&n.x<=r.width&&n.y<=r.height)break;t.lng>r.center.lng?t.lng-=360:t.lng+=360}return t.lng!==i.lng&&r.locationPoint(t).y>r.height/2-r.getHorizon()?t:i}o();var y=class{x=0;y=0;setCoords(e,r){this.x=e,this.y=r}getBoundingClientRect(){return{width:0,height:0,x:this.x,y:this.y,top:this.y,left:this.x,right:this.x,bottom:this.y}}};import{arrow as de,computePosition as fe,flip as he,hide as pe,limitShift as ge,offset as me,shift as be}from"@floating-ui/dom";o();o();import{jsx as W,jsxs as K}from"react/jsx-runtime";import{forwardRef as Q,useImperativeHandle as Z,useRef as ee}from"react";import p from"clsx";o();o();import{jsx as L,jsxs as N}from"react/jsx-runtime";import{useId as I}from"react";import U from"clsx";o();var V={yellow:{border:"border-yellow-3",text:"text-yellow-4"},gray:{border:"border-gray-3",text:"text-gray-4"},red:{border:"border-red-3",text:"text-red-4"},orange:{border:"border-orange-3",text:"text-orange-4"},green:{border:"border-green-3",text:"text-green-4"},blue:{border:"border-blue-3",text:"text-blue-4"}};var F={small:"w-6 h-6 text-base",medium:"w-8 h-8 text-[2rem]",large:"w-12 h-12 text-[3rem]"},A={strokeLinecap:"round",strokeWidth:2},z={strokeLinecap:"round",strokeWidth:2,strokeDasharray:"17.45px, 26.21px"};function E({size:t="medium",color:e="blue",className:r,...i}){let n=I();return N("svg",{xmlns:"http://www.w3.org/2000/svg",className:U("inline-block",F[t],V[e].text,r),viewBox:"0 0 16 16",...i,children:[L("defs",{children:L("circle",{id:n,cx:"8",cy:"8",r:"7"})}),L("use",{href:`#${n}`,className:"fill-none stroke-current opacity-25",style:A}),L("use",{href:`#${n}`,className:"animate-loader-stroke fill-none stroke-current",style:z})]})}o();o();import{jsx as G}from"react/jsx-runtime";import{useEffect as B,useState as X}from"react";o();import{useCallback as He,useEffect as $,useRef as Ne,useState as q}from"react";function T(t,e){let[r,i]=q(t);return $(()=>{let n=setTimeout(()=>i(t),e||500);return()=>{clearTimeout(n)}},[t,e]),[r,i]}var w=t=>{let[e,r]=X([]);B(()=>{let n=l=>{if(t.current){let u=t.current,h=u.getBoundingClientRect(),g=(l.clientX??0)-h.left,m=(l.clientY??0)-h.top,c=u.clientHeight,f=u.clientWidth,b=Math.max(f,c);r(_=>[..._,{top:m-b/2,left:g-b/2,height:Math.max(f,c),width:Math.max(f,c)}])}};if(t.current){let l=t.current;return l.addEventListener("pointerdown",n),()=>{l.removeEventListener("pointerdown",n)}}},[t]);let[i]=T(e,1e3);return B(()=>{i.length&&r([])},[i]),e?.map((n,l)=>G("span",{"data-testid":"ripple",className:"motion-safe:animate-ripple",style:{...n,position:"absolute",backgroundColor:"#FFFFFF",opacity:"25%",transform:"scale(0)",borderRadius:"50%"}},l))};o();import{useCallback as Xe,useEffect as Ye,useRef as Je}from"react";o();import{useCallback as et}from"react";o();import{useCallback as it,useEffect as nt,useRef as st,useState as at}from"react";o();import{useEffect as dt,useRef as ft}from"react";o();import{useCallback as mt,useRef as bt}from"react";o();import{useCallback as yt,useState as wt}from"react";o();import{useEffect as Rt,useRef as jt}from"react";o();import{useEffect as Pt,useLayoutEffect as Mt}from"react";o();var x={size(t,e){if(e==="custom")return!1;switch(e){case"small":return p("text-sm h-6",t?"min-w-6 [&_i]:w-6":"px-2");case"medium":return p("h-8",t?"min-w-8 [&_i]:w-8":"px-4");case"large":return p("h-12",t?"text-2xl min-w-12 [&_i]:w-12":"text-xl px-8")}},variant:{contained(t){return p("shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0",{yellow:"text-yellow-text bg-yellow-3 hover:bg-yellow-4 active-full:bg-yellow-5 focus-visible:outline-yellow-5",gray:"text-gray-text bg-gray-3 hover:bg-gray-4 active-full:bg-gray-5 focus-visible:outline-gray-5",red:"text-red-text bg-red-3 hover:bg-red-4 active-full:bg-red-5 focus-visible:outline-red-5",orange:"text-orange-text bg-orange-3 hover:bg-orange-4 active-full:bg-orange-5 focus-visible:outline-orange-5",green:"text-green-text bg-green-3 hover:bg-green-4 active-full:bg-green-5 focus-visible:outline-green-5",blue:"text-blue-text bg-blue-3 hover:bg-blue-4 active-full:bg-blue-5 focus-visible:outline-blue-5"}[t])},light(t){return p("shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0 bg-gray-0",{yellow:"text-gray-text hover:text-yellow-text hover:bg-yellow-3 active-full:bg-yellow-4 dark:active-full:bg-yellow-4 focus-visible:outline-yellow-4",gray:"text-gray-text hover:text-gray-text hover:bg-gray-3 active-full:bg-gray-4 dark:active-full:bg-gray-4/50 focus-visible:outline-gray-4",red:"text-gray-text hover:text-red-text hover:bg-red-3 active-full:bg-red-4 dark:active-full:bg-red-4/50 focus-visible:outline-red-4",orange:"text-gray-text hover:text-orange-text hover:bg-orange-3 active-full:bg-orange-4 dark:active-full:bg-orange-4/50 focus-visible:outline-orange-4",green:"text-gray-text hover:text-green-text hover:bg-green-3 active-full:bg-green-4 dark:active-full:bg-green-4/50 focus-visible:outline-green-4",blue:"text-gray-text hover:text-blue-text hover:bg-blue-3 active-full:bg-blue-4 dark:active-full:bg-blue-4/50 focus-visible:outline-blue-4"}[t])},outlined(t){return p("bg-gray-0 text-gray-7 outline outline-2 outline-offset-[-2px] focus-visible:ring-2 active-full:shadow-md",{yellow:"hover:bg-yellow-1/50 active-full:bg-yellow-2/50 outline-yellow-5 focus-visible:ring-yellow-4",gray:"hover:bg-gray-1 active-full:bg-gray-2 outline-gray-5 focus-visible:ring-gray-4",red:"hover:bg-red-1/50 active-full:bg-red-2/50 outline-red-5 focus-visible:ring-red-4",orange:"hover:bg-orange-1/50 active-full:bg-orange-2/50 outline-orange-5 focus-visible:ring-orange-4",green:"hover:bg-green-1/50 active-full:bg-green-2/50 outline-green-5 focus-visible:ring-green-4",blue:"hover:bg-blue-1/50 active-full:bg-blue-2/50 outline-blue-5 focus-visible:ring-blue-4"}[t])},text(t){return p("bg-transparent active-full:shadow-sm outline-offset-0",{yellow:"hover:bg-yellow-1/50 active-full:bg-yellow-2/25 text-yellow-4 hover:text-yellow-5 focus-visible:outline-yellow-5",gray:"hover:bg-gray-1 active-full:bg-gray-2 text-gray-5 hover:text-gray-6 active-full:text-gray-7 focus-visible:outline-gray-5",red:"hover:bg-red-1/50 active-full:bg-red-2/50 text-red-4 hover:text-red-5 focus-visible:outline-red-5",orange:"hover:bg-orange-1/50 active-full:bg-orange-2/50 text-orange-4 hover:text-orange-5 focus-visible:outline-orange-5",green:"hover:bg-green-1/50 active-full:bg-green-2/50 text-green-4 hover:text-green-5 focus-visible:outline-green-5",blue:"hover:bg-blue-1/50 active-full:bg-blue-2/50 text-blue-4 hover:text-blue-5 focus-visible:outline-blue-5"}[t])},ghost(t){return p("bg-transparent outline-offset-0",{yellow:"text-yellow-4 hover:text-yellow-5",gray:"text-gray-5 hover:text-gray-6 active-full:text-gray-7",red:"text-red-4 hover:text-red-5",orange:"text-orange-4 hover:text-orange-5",green:"text-green-4 hover:text-green-5",blue:"text-blue-4 hover:text-blue-5"}[t])}}},te=Q(({withRipple:t=!0,variant:e="contained",loading:r,color:i="yellow",size:n="medium",focusable:l=!0,fullWidth:u,className:h,disabled:g,children:m,selected:c=!1,icon:f=!1,...b},_)=>{let v=ee(null);Z(_,()=>v.current);let k=r||g,H=w(v);return K("button",{tabIndex:l?0:-1,role:"button",ref:v,className:p("relative inline-flex cursor-pointer items-center overflow-clip border-0 text-center leading-5 no-underline duration-300 focus-visible:outline focus-visible:outline-2 motion-safe:transition-color-shadow",f?"rounded-full":"rounded-2xl",h,x.size(f,n),x.variant[e](i),f&&"justify-center [&_:last-child:not(i,img,svg)]:pr-4",u&&"w-full",c&&"active",k&&"disabled"),"data-variant":e,disabled:g,"aria-busy":r,...b,children:[!k&&t&&H,m,r!==void 0&&W("span",{className:"",children:W(E,{color:i,size:"small",className:p("-mr-2 ml-2",!r&&"invisible")})})]})});o();import{jsx as mo}from"react/jsx-runtime";import xo from"clsx";o();import{jsxs as oe}from"react/jsx-runtime";import{forwardRef as re,useImperativeHandle as ie,useRef as ne}from"react";import se from"clsx";var ae=re(function({withRipple:e=!0,variant:r="contained",color:i="yellow",size:n="medium",focusable:l=!0,fullWidth:u,className:h,children:g,selected:m=!1,icon:c=!1,href:f,...b},_){let v=ne(null);ie(_,()=>v.current);let k=w(v);return oe("a",{tabIndex:l?0:-1,role:"button",href:f,ref:v,className:se("relative inline-flex cursor-pointer items-center overflow-clip border-0 text-center leading-5 no-underline duration-300 focus-visible:outline focus-visible:outline-2 motion-safe:transition-color-shadow",c?"rounded-full":"rounded-2xl",h,x.size(c,n),x.variant[r](i),c&&"justify-center [&_:last-child:not(i,img)]:pr-4",u&&"w-full",m&&"active"),"data-variant":r,...b,children:[e&&k,g]})});o();o();import{jsx as Wo}from"react/jsx-runtime";import le from"clsx";var O={color(t){return t?le("border-t-4",{yellow:"border-t-yellow-3 bg-gray-0",gray:"border-t-gray-3 bg-gray-0",red:"border-t-red-3 bg-red-1",blue:"border-t-blue-3 bg-blue-1",green:"border-t-green-3 bg-green-1",orange:"border-t-orange-3 bg-orange-1"}[t]):"bg-gray-0"}};import D from"clsx";var P=class{type;constructor(e,r={}){M(this,r),this.type=e}},xe={closeButton:!0,closeOnClick:!0,closeOnMove:!1,placement:"top",maxWidth:"240px",borderColor:"yellow"},R=class extends ue{_map;options;_content;_container;_dialog;_closeButton;_tip;_lngLat;_trackPointer=!1;_prevPos;_pos;_flatPos;_virtualElement;constructor(e){super(),this.options=M(Object.create(xe),e),this._virtualElement=new y}isOpen(){return!!this._map}getElement(){return this._container}remove=()=>(this._container&&(d.remove(this._container),delete this._container),this._map&&(this._map.off("move",this._onClose),this._map.off("click",this._onClose),this._map.off("remove",this.remove),this._removePositionListeners(),delete this._map),this.fire(new P("close")),this);getLngLat(){return this._lngLat}addTo(e){return this._map&&this.remove(),this._map=e,this.options.closeOnClick&&this._map.on("click",this._onClose),this.options.closeOnMove&&this._map.on("move",this._onClose),this._map.on("remove",this.remove),this._update(),this._refreshPositionListeners(),this.fire(new P("open")),this}_removePositionListeners(){this._map&&(this._map.off("move",this._update),this._map.off("mousemove",this._onMouseMove),this._map.off("mouseup",this._onMouseUp),this._map.off("drag",this._onDrag))}_refreshPositionListeners(){this._map&&(this._removePositionListeners(),this._trackPointer?(this._map.on("mousemove",this._onMouseMove),this._map.on("mouseup",this._onMouseUp),this._map.on("drag",this._onDrag)):this._map.on("move",this._update),this._container?.classList.toggle("maplibregl-track-pointer",this._trackPointer),this._map._canvasContainer.classList.toggle("maplibregl-track-pointer",this._trackPointer))}setLngLat(e){return this._trackPointer=!1,this._lngLat=ce.convert(e),delete this._pos,delete this._prevPos,delete this._flatPos,this._update(),this._refreshPositionListeners(),this}trackPointer(){return this._trackPointer=!0,delete this._pos,delete this._prevPos,delete this._flatPos,this._update(),this._refreshPositionListeners(),this}setText(e,r){return this.setDOMContent(document.createTextNode(e),r)}setHTML(e,r){let i=d.create("div","p-2"),n=document.createElement("body"),l;for(n.innerHTML=e;l=n.firstChild,!!l;)i.appendChild(l);return this.setDOMContent(i,r)}getMaxWidth(){return this._container?.style.maxWidth}setMaxWidth(e){return this.options.maxWidth=e,this._update(),this}setDOMContent(e,r){if(this._content)for(;this._content.hasChildNodes();)this._content.firstChild&&this._content.removeChild(this._content.firstChild);else this._content=d.create("div");return this._createActions(),this._createHeader(r),this._content.appendChild(e),this._update(),this}addClassName(e){this._container&&this._container.classList.add(e)}removeClassName(e){this._container&&this._container.classList.remove(e)}setOffset(e){return this.options.offset=e,this._update(),this}toggleClassName(e){if(this._container)return this._container.classList.toggle(e)}_onMouseUp=e=>{this._update(e.point)};_onMouseMove=e=>{this._update(e.point)};_onDrag=e=>{this._update(e.point)};_update=e=>{let r=this._lngLat||this._trackPointer;if(!this._map||!r||!this._content)return;if(!this._container||!this._dialog){if(this._container=d.create("div","absolute top-0 left-0 w-max min-w-[150px] [&[data-track-pointer='true']]:select-none [&[data-track-pointer='true']]:pointer-events-none",this._map.getContainer()),this._dialog=d.create("div",D("animate-fade-in rounded-2xl relative shadow dark:shadow-dark",O.color("yellow")),this._container),this._dialog.dataset.placement="top",this._dialog.dataset.color="yellow",this.options.className)for(let n of this.options.className.split(" "))this._container.classList.add(n);this._dialog.appendChild(this._content),this._tip=d.create("div","p8n-arrow",this._dialog)}if(this.options.maxWidth&&this._dialog.style.maxWidth!==this.options.maxWidth&&(this._dialog.style.maxWidth=this.options.maxWidth),this._map.transform.renderWorldCopies&&!this._trackPointer?this._lngLat=j(this._lngLat,this._flatPos,this._map.transform):this._lngLat=this._lngLat?.wrap(),this._container.dataset.trackPointer=this._trackPointer.toString(),this._trackPointer&&!e)return;let i=this._flatPos=this._pos=this._trackPointer&&e?e:this._map.project(this._lngLat);this._map.terrain&&(this._flatPos=this._trackPointer&&e?e:this._map.transform.locationPoint(this._lngLat)),this._virtualElement.setCoords(i.x,i.y),!(this._prevPos&&this._prevPos.x===i.x&&this._prevPos.y===i.y)&&(this._prevPos=i,fe(this._virtualElement,this._container,{placement:this.options.placement,middleware:[me(this.options.offset||8),he({mainAxis:!this.options.offset}),be({padding:8,limiter:ge({offset:15})}),de({element:this._tip,padding:12}),pe({padding:-400})]}).then(({x:n,y:l,placement:u,middlewareData:h})=>{if(!this._container||(this._container.style.visibility=h.hide?.referenceHidden?"hidden":"visible",h.hide?.referenceHidden))return;this._container.style.transform=`translate(${n}px, ${l}px)`;let{x:g,y:m}=h.arrow,c=u.split("-")[0];this._dialog&&(this._dialog.dataset.placement=c);let f={top:"bottom",right:"left",bottom:"top",left:"right"}[c],b={left:g!=null?`${g}px`:"",top:m!=null?`${m}px`:"",right:"",bottom:"",[f]:"-6px"};Object.assign(this._tip.style,b)}))};_createActions(){if(this.options.closeButton){let e=d.create("div","p-1 float-right",this._content);this._closeButton=d.create("button",D("rounded-2xl cursor-pointer relative overflow-clip focus-visible:outline focus-visible:outline-2 no-underline border-0 inline-flex items-center transition-color-shadow duration-300 leading-5","justify-center min-w-8 h-8 [&_i]:w-8 [&_:last-child:not(i)]:pr-4",x.variant.text("gray")),e),this._closeButton.type="button",this._closeButton.setAttribute("aria-label","Close popup"),d.create("i","fe-cancel",this._closeButton),this._closeButton.addEventListener("click",this._onClose)}}_createHeader(e){if(e){let r=d.create("header","flex items-center px-2 pt-2",this._content),i=d.create("h4",void 0,r);i.innerText=e}}_onClose=()=>{this.remove()}};export{R as FloatingPopup};

24

index.d.ts

@@ -195,4 +195,4 @@ import * as react from 'react';

declare const RPopup: react.MemoExoticComponent<react.ForwardRefExoticComponent<PopupInitialOptions & PopupReactiveOptions & PopupCallbacks & {
longitude?: number | undefined;
latitude?: number | undefined;
longitude?: number;
latitude?: number;
children?: ReactNode;

@@ -211,4 +211,5 @@ } & react.RefAttributes<Popup>>>;

_popup?: FloatingPopup | Popup;
_iconElement?: HTMLElement | SVGSVGElement;
_textElement?: HTMLDivElement;
_circleElement: HTMLElement | null;
_iconElement: HTMLElement | SVGSVGElement | null;
_textElement: HTMLDivElement | null;
_markerElement?: HTMLElement;

@@ -222,2 +223,3 @@ constructor(options?: GradientMarkerOptions);

getIcon(): string | HTMLElement | SVGSVGElement | (() => HTMLElement | SVGSVGElement) | undefined;
resetIconText(): void;
setText(text?: string): this;

@@ -277,27 +279,27 @@ getText(): string | undefined;

declare const RAttributionControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<AttributionControlOptions & {
position?: ControlPosition | undefined;
position?: ControlPosition;
} & react.RefAttributes<IControl>>>;
declare const RFullscreenControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<FullscreenControlOptions & {
position?: ControlPosition | undefined;
position?: ControlPosition;
} & react.RefAttributes<IControl>>>;
declare const RGeolocateControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<GeolocateControlOptions & {
position?: ControlPosition | undefined;
position?: ControlPosition;
} & react.RefAttributes<IControl>>>;
declare const RLogoControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoControlOptions & {
position?: ControlPosition | undefined;
position?: ControlPosition;
} & react.RefAttributes<IControl>>>;
declare const RNavigationControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<NavigationControlOptions & {
position?: ControlPosition | undefined;
position?: ControlPosition;
} & react.RefAttributes<IControl>>>;
declare const RScaleControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<ScaleControlOptions & {
position?: ControlPosition | undefined;
position?: ControlPosition;
} & react.RefAttributes<IControl>>>;
declare const RTerrainControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<TerrainSpecification & {
position?: ControlPosition | undefined;
position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

@@ -304,0 +306,0 @@

1746

index.js

@@ -1,1745 +0,1 @@

"use client";
import {
DOM,
arrowHeight,
init_esm_shims
} from "./chunk-6D4LQKRK.js";
// src/index.ts
init_esm_shims();
// src/components/index.ts
init_esm_shims();
// src/components/RMap/index.ts
init_esm_shims();
// src/components/RMap/RMap.tsx
init_esm_shims();
import {
forwardRef,
useImperativeHandle,
useMemo,
useRef,
useState
} from "react";
// src/lib/MapManager.ts
init_esm_shims();
import {
Map
} from "maplibre-gl";
// src/lib/util.ts
init_esm_shims();
import { LngLat } from "maplibre-gl";
function filterMapProps(options) {
const callbacks = {};
const mapHandlerOptions = {};
const mapReactiveOptions = {};
for (const key in options) {
if (key.startsWith("on")) {
callbacks[key] = options[key];
} else if (mapHandlerNames.includes(key)) {
mapHandlerOptions[key] = options[key];
} else if (mapReactiveOptionNames.includes(key)) {
mapReactiveOptions[key] = options[key];
} else if (!key.startsWith("initial") && key !== "container" && key !== "style") {
throw Error(`unknown map option key ${key}`);
}
}
return [
mapReactiveOptions,
callbacks,
mapHandlerOptions
];
}
function transformPropsToOptions(props) {
const callbacks = {};
const options = {};
for (const key in props) {
if (key.startsWith("on")) {
callbacks[key] = props[key];
} else {
const definitiveKey = key.startsWith("initial") ? key[7].toLowerCase() + key.substring(8) : key;
if (options[definitiveKey]) {
throw new Error(`duplicate key ${definitiveKey}`);
} else {
options[definitiveKey] = props[key];
}
}
}
return [options, callbacks];
}
function prepareEventDep(eventNameToCallbackName5, callbacks) {
const activeEvents = Object.keys(eventNameToCallbackName5).filter(
(eventName) => eventNameToCallbackName5[eventName] in callbacks
);
return activeEvents.sort();
}
function deepEqual(a, b) {
if (a === b) {
return true;
}
if (!a || !b) {
return false;
}
if (Array.isArray(a)) {
if (!Array.isArray(b) || a.length !== b.length) {
return false;
}
for (let i = 0; i < a.length; i++) {
if (!deepEqual(a[i], b[i])) {
return false;
}
}
return true;
} else if (Array.isArray(b)) {
return false;
}
if (typeof a === "object" && typeof b === "object") {
const aKeys = Object.keys(a);
const bKeys = Object.keys(b);
if (aKeys.length !== bKeys.length) {
return false;
}
for (const key of aKeys) {
if (!Object.prototype.hasOwnProperty.call(b, key)) {
return false;
}
if (!deepEqual(a[key], b[key])) {
return false;
}
}
return true;
}
return false;
}
function areLngLatClose(lngLat1, lngLat2) {
if (!lngLat1 && !lngLat2) {
return true;
}
if (!lngLat1 || !lngLat2) {
return false;
}
return Math.round(lngLat1.lng * 1e5) === Math.round(lngLat2.lng * 1e5) && Math.round(lngLat1.lat * 1e5) === Math.round(lngLat2.lat * 1e5);
}
function areCoordsClose(coords1, coords2) {
if (!coords1 && !coords2) {
return true;
}
if (!coords1 || !coords2) {
return false;
}
const lngLat1 = LngLat.convert(coords1);
const lngLat2 = LngLat.convert(coords2);
return Math.round(lngLat1.lng * 1e5) === Math.round(lngLat2.lng * 1e5) && Math.round(lngLat1.lat * 1e5) === Math.round(lngLat2.lat * 1e5);
}
function lngLatClassToObj(lngLat) {
return {
lng: lngLat.lng,
lat: lngLat.lat
};
}
function arePointsEqual(a, b) {
const ax = Array.isArray(a) ? a[0] : a ? a.x : 0;
const ay = Array.isArray(a) ? a[1] : a ? a.y : 0;
const bx = Array.isArray(b) ? b[0] : b ? b.x : 0;
const by = Array.isArray(b) ? b[1] : b ? b.y : 0;
return ax === bx && ay === by;
}
function updateClassNames(elt, prevClassNames, nextClassNames) {
prevClassNames.forEach((name) => {
if (name === "") {
return;
}
if (nextClassNames.indexOf(name) === -1) {
elt.classList.remove(name);
}
});
nextClassNames.forEach((name) => {
if (name === "") {
return;
}
if (prevClassNames.indexOf(name) === -1 || !elt.classList.contains(name)) {
elt.classList.add(name);
}
});
}
function updateListeners(prevEventTypes, nextEventTypes, onSubscribe, onUnsubscribe) {
prevEventTypes.forEach((eventName) => {
if (eventName !== "" && nextEventTypes.indexOf(eventName) === -1) {
onUnsubscribe(eventName);
}
});
nextEventTypes.forEach((eventName) => {
if (eventName !== "" && prevEventTypes.indexOf(eventName) === -1) {
onSubscribe(eventName);
}
});
}
var markerHeight = 41 - 5.8 / 2;
var markerRadius = 13.5;
var linearOffset = Math.abs(markerRadius) / Math.SQRT2;
var markerPopupOffset = {
top: [0, 0],
"top-left": [0, 0],
"top-right": [0, 0],
bottom: [0, -markerHeight],
"bottom-left": [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
"bottom-right": [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
left: [markerRadius, (markerHeight - markerRadius) * -1],
right: [-markerRadius, (markerHeight - markerRadius) * -1]
};
var emptyStyle = {
version: 8,
name: "Empty",
sources: {},
layers: []
};
// src/lib/MapManager.ts
var eventNameToCallbackName = {
mousedown: "onMouseDown",
mouseup: "onMouseUp",
mouseover: "onMouseOver",
mouseout: "onMouseOut",
mousemove: "onMouseMove",
mouseenter: "onMouseEnter",
mouseleave: "onMouseLeave",
click: "onClick",
dblclick: "onDblClick",
contextmenu: "onContextMenu",
touchstart: "onTouchStart",
touchend: "onTouchEnd",
touchcancel: "onTouchCancel",
touchmove: "onTouchMove",
movestart: "onMoveStart",
move: "onMove",
moveend: "onMoveEnd",
dragstart: "onDragStart",
drag: "onDrag",
dragend: "onDragEnd",
zoomstart: "onZoomStart",
zoom: "onZoom",
zoomend: "onZoomEnd",
rotatestart: "onRotateStart",
rotate: "onRotate",
rotateend: "onRotateEnd",
pitchstart: "onPitchStart",
pitch: "onPitch",
pitchend: "onPitchEnd",
wheel: "onWheel",
resize: "onResize",
remove: "onRemove",
boxzoomstart: "onBoxZoomStart",
boxzoomend: "onBoxZoomEnd",
boxzoomcancel: "onBoxZoomCancel",
webglcontextlost: "onWebglContextLost",
webglcontextrestored: "onWebglContextRestored",
load: "onLoad",
render: "onRender",
idle: "onIdle",
error: "onError",
data: "onData",
styledata: "onStyleData",
sourcedata: "onSourceData",
dataloading: "onDataLoading",
styledataloading: "onStyleDataLoading",
sourcedataloading: "onSourceDataLoading",
tiledataloading: "onTileDataLoading",
styleimagemissing: "onStyleImageMissing",
dataabort: "onDataAbort",
sourcedataabort: "onSourceDataAbort",
terrain: "onTerrain"
};
var mapReactiveOptionNames = [
"maxBounds",
"minZoom",
"maxZoom",
"minPitch",
"maxPitch",
"renderWorldCopies",
"pixelRatio"
];
var mapHandlerNames = [
"scrollZoom",
"boxZoom",
/**
* DragRotateHandler is a composition of multiple handlers
* MouseRotateHandler
* MousePitchHandler (can be disabled with "pitchWithRotate" option)
*/
"dragRotate",
// right click rotate the map (right click can optionnaly pitch the map)
"dragPan",
// left click pan the map
"keyboard",
"doubleClickZoom",
// shift + dbl-click dezoom
/**
* TwoFingersTouchZoomRotateHandler is a composition of multiple handlers
* touchZoom : TwoFingersTouchZoomHandler
* touchRotate : TwoFingersTouchRotateHandler (can be disabled)
* tapDragZoom : TapDragZoomHandler
*/
"touchZoomRotate",
"touchPitch",
/**
* desktop: ctrl + click to zoom
* touch screen: two fingers to move the map
*/
"cooperativeGestures"
];
var DEFAULT_STYLE = "https://demotiles.maplibre.org/style.json";
var MapManager = class {
reactiveOptions = {};
handlerOptions = {};
eventNames = [];
callbacks;
_map;
padding;
mapStyle;
controlledSources = {};
controlledLayers = {};
controlledTerrain = null;
constructor({ mapStyle = DEFAULT_STYLE, padding }, mapProps, container) {
this.mapStyle = mapStyle;
this.padding = padding;
const [mapBaseOptions, callbacks] = transformPropsToOptions(mapProps);
this.callbacks = callbacks;
const mapOptions = {
...mapBaseOptions,
container,
style: mapStyle
};
const map = new Map(mapOptions);
map.style.on("error", this._onStyleError);
if (padding) {
map.setPadding(padding);
}
this._map = map;
this._updateCallbacks(callbacks);
}
setProps({ mapStyle = DEFAULT_STYLE, styleDiffing = true, styleTransformStyle, padding }, mapProps) {
const [reactiveOptions, callbacks, handlerOptions] = filterMapProps(mapProps);
this._updateCallbacks(callbacks);
this._updateStyle(mapStyle, {
diff: styleDiffing,
transformStyle: styleTransformStyle
});
this._updateReactiveOptions(reactiveOptions, { padding });
this._updateHandlers(handlerOptions);
}
getControlledTerrain() {
return this.controlledTerrain;
}
setControlledTerrain(terrainProps) {
this.controlledTerrain = terrainProps;
}
getControlledLayer(id) {
return this.controlledLayers[id] ?? null;
}
setControlledLayer(id, layerProps) {
if (!layerProps) {
delete this.controlledLayers[id];
} else {
this.controlledLayers[id] = layerProps;
}
}
getControlledSource(id) {
return this.controlledSources[id] ?? null;
}
setControlledSource(id, layerProps) {
if (!layerProps) {
delete this.controlledSources[id];
} else {
this.controlledSources[id] = layerProps;
}
}
_updateStyle(nextStyle, options) {
const curStyle = this.mapStyle;
if (nextStyle !== curStyle) {
this.mapStyle = nextStyle;
this._map.setStyle(nextStyle, {
diff: options.diff,
transformStyle: (prevStyle, nextStyle2) => {
const prevControlledSources = prevStyle ? Object.fromEntries(
Object.entries(prevStyle?.sources).filter(
([sourceId]) => sourceId in this.controlledSources
)
) : {};
const prevControlledLayers = prevStyle ? prevStyle.layers.filter((layer) => layer.id in this.controlledLayers) : [];
const result = {
...nextStyle2,
sources: {
...nextStyle2.sources,
...prevControlledSources
},
layers: [...nextStyle2.layers, ...prevControlledLayers],
terrain: this.controlledTerrain ? prevStyle?.terrain : nextStyle2.terrain
};
return options.transformStyle ? options.transformStyle(prevStyle, result) : result;
}
});
}
}
_updateReactiveOptions(nextReactiveOptions, { padding }) {
const currReactiveOptions = this.reactiveOptions;
this.reactiveOptions = nextReactiveOptions;
for (const optionName of mapReactiveOptionNames) {
if (optionName in nextReactiveOptions && !deepEqual(currReactiveOptions[optionName], nextReactiveOptions[optionName])) {
const setterName = `set${optionName[0].toUpperCase()}${optionName.substring(1)}`;
this._map[setterName](nextReactiveOptions[optionName]);
}
}
if (padding && !deepEqual(this.padding, padding)) {
this._map.setPadding(padding);
}
this.padding = padding;
}
_updateCallbacks(callbacks = {}) {
this.callbacks = callbacks;
const nextEventNames = prepareEventDep(eventNameToCallbackName, callbacks);
if (this.eventNames.join("-") === nextEventNames.join("-")) {
return;
}
updateListeners(
this.eventNames,
nextEventNames,
(eventName) => this._map.on(eventName, this._onMapEvent),
(eventName) => this._map.off(eventName, this._onMapEvent)
);
this.eventNames = nextEventNames;
}
_updateHandlers(nextHandlers) {
const currHandlers = this.handlerOptions;
this.handlerOptions = nextHandlers;
for (const propName of mapHandlerNames) {
const nextValue = nextHandlers[propName] ?? true;
const currValue = currHandlers[propName] ?? true;
if (!deepEqual(nextValue, currValue)) {
if (nextValue) {
this._map[propName].enable(nextValue);
} else {
this._map[propName].disable();
}
}
}
}
_onStyleError = (event) => {
if (event.error.name !== "AbortError") {
console.error(event.error);
}
};
_onMapEvent = (e) => {
const eventType = e.type;
const callbackName = eventNameToCallbackName[eventType];
if (this.callbacks[callbackName]) {
this.callbacks[callbackName]?.(e);
} else {
console.info("not managed RMap event", eventType, e);
}
};
get map() {
return this._map;
}
destroy() {
this._updateCallbacks();
this._map.remove();
}
};
// src/context.ts
init_esm_shims();
import { createContext } from "react";
var mapLibreContext = createContext({
mapManager: void 0
});
// src/hooks/useIsomorphicLayoutEffect.ts
init_esm_shims();
import { useEffect, useLayoutEffect } from "react";
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
// src/components/RMap/RMap.tsx
import { jsx } from "react/jsx-runtime";
var childContainerStyle = {
height: "100%"
};
var RMap = forwardRef(function RMap2({
/* RMapProps */
children,
style,
id,
className,
onMounted,
/* ManagerOptions */
mapStyle,
styleDiffing,
styleTransformStyle,
padding,
/* MapProps */
...mapProps
}, ref) {
const containerRef = useRef(null);
const maplibreRef = useRef({
mapManager: void 0
});
const needPropsUpdate = useRef(true);
const [, reRender] = useState(0);
useIsomorphicLayoutEffect(() => {
if (!maplibreRef.current.mapManager) {
maplibreRef.current.mapManager = new MapManager(
{ mapStyle, styleDiffing, padding },
mapProps,
containerRef.current
);
onMounted && onMounted(maplibreRef.current.mapManager.map);
reRender((v) => v + 1);
needPropsUpdate.current = false;
} else {
if (needPropsUpdate.current) {
maplibreRef.current.mapManager.setProps(
{ mapStyle, padding, styleDiffing, styleTransformStyle },
mapProps
);
} else {
needPropsUpdate.current = true;
}
}
});
useIsomorphicLayoutEffect(() => {
return () => {
if (maplibreRef.current.mapManager) {
maplibreRef.current.mapManager.destroy();
maplibreRef.current.mapManager = void 0;
}
};
}, []);
useImperativeHandle(ref, () => maplibreRef.current.mapManager?.map || null, []);
useIsomorphicLayoutEffect(() => {
if (!className) {
return;
}
const container = containerRef.current;
className.split(" ").map((classItem) => container.classList.add(classItem));
return () => void className.split(" ").map((classItem) => container.classList.remove(classItem));
}, [className]);
const completeStyle = useMemo(
() => ({
position: "relative",
width: "100%",
height: "100%",
...style
}),
[style]
);
return /* @__PURE__ */ jsx("div", { ref: containerRef, id, style: completeStyle, children: maplibreRef.current.mapManager && /* @__PURE__ */ jsx(mapLibreContext.Provider, { value: maplibreRef.current, children: /* @__PURE__ */ jsx("div", { className: "maplibregl-children", style: childContainerStyle, children }) }) });
});
// src/components/RMarker/index.ts
init_esm_shims();
// src/components/RMarker/RMarker.tsx
init_esm_shims();
import { Marker } from "maplibre-gl";
import {
forwardRef as forwardRef2,
memo,
useEffect as useEffect2,
useImperativeHandle as useImperativeHandle2,
useMemo as useMemo2,
useRef as useRef2
} from "react";
import { createPortal } from "react-dom";
// src/hooks/useMap.ts
init_esm_shims();
import { useContext } from "react";
function useMap() {
const context = useContext(mapLibreContext);
if (!context.mapManager) {
throw new Error("use useMap in components inside <RMap />");
}
return context.mapManager.map;
}
// src/components/RMarker/RMarker.tsx
var eventNameToCallbackName2 = {
dragstart: "onDragStart",
drag: "onDrag",
dragend: "onDragEnd",
click: "onClick"
};
var RMarker = memo(
forwardRef2(function RMarker2(props, ref) {
const { longitude, latitude, children, ...markerProps } = props;
const map = useMap();
const [options, callbacks] = transformPropsToOptions(markerProps);
const prevOptionsRef = useRef2(options);
const callbacksRef = useRef2();
callbacksRef.current = callbacks;
const marker = useMemo2(() => {
const completeOptions = {
...options,
element: children ? document.createElement("div") : void 0
};
const mk = new Marker(completeOptions);
mk.setLngLat([longitude, latitude]);
return mk;
}, []);
const nextEventsStr = prepareEventDep(eventNameToCallbackName2, callbacks).join("-");
useEffect2(() => {
function onMarkerEvent(e) {
const eventType = e.type;
const callbackName = eventNameToCallbackName2[eventType];
if (callbacksRef.current?.[callbackName]) {
callbacksRef.current[callbackName]?.(e);
} else {
console.info("not managed RMarker event", eventType, e);
}
}
const eventNames = nextEventsStr.split("-");
eventNames.forEach((eventName) => {
if (eventName === "click") {
marker.getElement().addEventListener("click", onMarkerEvent);
} else {
marker.on(eventName, onMarkerEvent);
}
});
return () => {
eventNames.forEach((eventName) => {
if (eventName === "click") {
marker.getElement().removeEventListener("click", onMarkerEvent);
} else {
marker.off(eventName, onMarkerEvent);
}
});
};
}, [nextEventsStr, marker]);
useEffect2(() => {
marker.addTo(map);
return () => void marker.remove();
}, []);
const {
className,
offset,
draggable,
clickTolerance = 0,
rotation,
rotationAlignment,
pitchAlignment,
opacity,
opacityWhenCovered
} = options;
useImperativeHandle2(ref, () => marker, [marker]);
if (prevOptionsRef.current.className !== className) {
updateClassNames(
marker._element,
prevOptionsRef.current.className?.split(" ") || [],
className?.split(" ") || []
);
}
if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
marker.setLngLat([longitude, latitude]);
}
if (offset && !arePointsEqual(marker.getOffset(), offset)) {
marker.setOffset(offset);
}
if (marker.isDraggable() !== draggable) {
marker.setDraggable(draggable);
}
if (marker._clickTolerance !== clickTolerance) {
marker._clickTolerance = clickTolerance;
}
if (marker.getRotation() !== rotation) {
marker.setRotation(rotation);
}
if (marker.getRotationAlignment() !== rotationAlignment) {
marker.setRotationAlignment(rotationAlignment);
}
if (marker.getPitchAlignment() !== pitchAlignment) {
marker.setPitchAlignment(pitchAlignment);
}
if (marker._opacity !== opacity || marker._opacityWhenCovered !== opacityWhenCovered) {
marker.setOpacity(opacity, opacityWhenCovered);
}
prevOptionsRef.current = options;
return children ? createPortal(children, marker.getElement()) : null;
})
);
// src/components/RPopup/index.ts
init_esm_shims();
// src/components/RPopup/RPopup.tsx
init_esm_shims();
import { Popup } from "maplibre-gl";
import {
forwardRef as forwardRef3,
memo as memo2,
useEffect as useEffect3,
useImperativeHandle as useImperativeHandle3,
useMemo as useMemo3,
useRef as useRef3
} from "react";
import { createPortal as createPortal2 } from "react-dom";
var eventNameToCallbackName3 = {
map_click: "onMapClick",
map_move: "onMapMove"
};
var RPopup = memo2(
forwardRef3(function RPopup2(props, ref) {
const { longitude, latitude, children, ...popupProps } = props;
const map = useMap();
const [options, callbacks] = transformPropsToOptions(popupProps);
const popupRef = useRef3(null);
const prevOptionsRef = useRef3(options);
const currCallbacksRef = useRef3();
currCallbacksRef.current = callbacks;
const container = useMemo3(() => {
return document.createElement("div");
}, []);
if (!popupRef.current) {
popupRef.current = new Popup({
...options,
closeButton: false,
closeOnClick: false,
closeOnMove: false
});
if (longitude !== void 0 && latitude !== void 0) {
popupRef.current.setLngLat([longitude, latitude]);
}
}
const nextEventsStr = prepareEventDep(eventNameToCallbackName3, callbacks).join("-");
useEffect3(() => {
function onPopupEvent(e) {
const eventType = e.type;
const callbackName = eventNameToCallbackName3[eventType] || // @ts-ignore
eventNameToCallbackName3[`map_${eventType}`];
if (currCallbacksRef.current?.[callbackName]) {
currCallbacksRef.current[callbackName]?.(e);
} else {
console.info("not managed RPopup event", eventType, e);
}
}
if (nextEventsStr === "") {
return;
}
const eventNames = nextEventsStr.split("-");
const popupStable = popupRef.current;
eventNames.forEach((eventName) => {
if (eventName.startsWith("map_")) {
map.on(eventName.substring(4), onPopupEvent);
} else {
popupStable.on(eventName, onPopupEvent);
}
});
return () => {
eventNames.forEach((eventName) => {
if (eventName.startsWith("map_")) {
map.off(eventName.substring(4), onPopupEvent);
} else {
popupStable.off(eventName, onPopupEvent);
}
});
};
}, [nextEventsStr, map]);
useEffect3(() => {
popupRef.current.setDOMContent(container).addTo(map);
return () => void popupRef.current.remove();
}, [container, map]);
const { offset, maxWidth = "240px", className } = options;
useImperativeHandle3(ref, () => popupRef.current, [popupRef]);
if (popupRef.current.isOpen()) {
if (longitude !== void 0 && latitude !== void 0 && (popupRef.current.getLngLat().lng !== longitude || popupRef.current.getLngLat().lat !== latitude)) {
popupRef.current.setLngLat([longitude, latitude]);
}
if (offset && !deepEqual(popupRef.current.options.offset, offset)) {
popupRef.current.setOffset(offset);
}
if (prevOptionsRef.current.className !== className) {
updateClassNames(
container,
prevOptionsRef.current.className?.split(" ") || [],
className?.split(" ") || []
);
}
if (popupRef.current.getMaxWidth() !== maxWidth) {
popupRef.current.setMaxWidth(maxWidth);
}
}
prevOptionsRef.current = options;
return createPortal2(children, container);
})
);
// src/components/RLayer/index.ts
init_esm_shims();
// src/components/RLayer/RLayer.tsx
init_esm_shims();
import {
forwardRef as forwardRef4,
memo as memo3,
useCallback,
useContext as useContext2,
useEffect as useEffect4,
useImperativeHandle as useImperativeHandle4,
useRef as useRef4,
useState as useState2
} from "react";
function createLayer(map, layerOptions, beforeId) {
if (map.style?._loaded) {
if (
// BackgroundLayerSpecification and CustomLayerInterface has no source
layerOptions.type === "background" || layerOptions.type === "custom" || // source exists for LayerSpecification who need one
layerOptions.source && map.getSource(layerOptions.source)
) {
map.addLayer(layerOptions, beforeId && map.getLayer(beforeId) ? beforeId : void 0);
return map.getLayer(layerOptions.id);
}
}
return void 0;
}
function updateLayer(map, { beforeId: nextBeforeId, ...nextOptions }, { beforeId: prevBeforeId, ...prevOptions }) {
if (prevOptions.type === "custom" || nextOptions.type === "custom") {
return;
}
if (prevBeforeId !== nextBeforeId) {
map.moveLayer(nextOptions.id, nextBeforeId);
}
if (nextOptions.type !== "background" && nextOptions.type !== "custom" && prevOptions.filter !== nextOptions.filter) {
map.setFilter(nextOptions.id, nextOptions.filter);
}
const prevO = prevOptions;
const nextO = nextOptions;
if (prevO.layout !== nextO.layout) {
if (nextO.layout) {
for (const key of Object.keys(nextO.layout)) {
if (nextO.layout[key] !== prevO.layout?.[key]) {
map.setLayoutProperty(nextOptions.id, key, nextO.layout[key]);
}
}
}
for (const key in prevO.layout) {
if (!Object.prototype.hasOwnProperty.call(nextO.layout, key)) {
map.setLayoutProperty(nextOptions.id, key, void 0);
}
}
}
if (prevO.paint !== nextO.paint) {
if (nextO.paint) {
for (const key of Object.keys(nextO.paint)) {
if (nextO.paint[key] !== prevO.paint?.[key]) {
map.setPaintProperty(nextOptions.id, key, nextO.paint[key]);
}
}
}
for (const key in prevO.paint) {
if (!Object.prototype.hasOwnProperty.call(nextO.paint, key)) {
map.setPaintProperty(nextOptions.id, key, void 0);
}
}
}
if (prevO.minzoom !== nextO.minzoom || prevO.maxzoom !== nextO.maxzoom) {
if (nextO.minzoom && nextO.maxzoom) {
map.setLayerZoomRange(nextOptions.id, nextO.minzoom, nextO.maxzoom);
}
}
}
var RLayer = memo3(
forwardRef4(function RLayer2(props, ref) {
const { beforeId, ...layerOptions } = props;
const id = layerOptions.id;
const context = useContext2(mapLibreContext);
if (!context.mapManager) {
throw new Error("use <RLayer /> component inside <RMap />");
}
const map = context.mapManager.map;
const initialLayerId = useRef4(id);
if (id !== initialLayerId.current) {
throw new Error(
`RLayer id should not change. "${id}" "${initialLayerId.current}". If you defined id as const string add a "key" prop to your RLayer component`
);
}
const prevProps = context.mapManager.getControlledLayer(id) ?? props;
const [, setVersion] = useState2(0);
const reRender = useCallback(() => setVersion((v) => v + 1), []);
if (props.type !== prevProps.type) {
throw new Error(`RLayer type should not change. "${props.type}" "${prevProps.type}"`);
}
useEffect4(() => {
map.on("styledata", reRender);
if (map.style._loaded) {
reRender();
}
return () => {
map.off("styledata", reRender);
if (map.style && map.style._loaded && map.getLayer(id)) {
map.removeLayer(id);
}
context.mapManager?.setControlledLayer(id, null);
};
}, [map, id, context, reRender]);
let layer = map.style?._loaded && map.getLayer(id);
if (layer) {
updateLayer(map, props, prevProps);
} else {
layer = createLayer(map, layerOptions, beforeId);
if (layer) {
map.off("styledata", reRender);
}
}
useImperativeHandle4(ref, () => layer || null, [layer]);
context.mapManager.setControlledLayer(id, props);
return null;
})
);
// src/components/RSource/index.ts
init_esm_shims();
// src/components/RSource/RSource.tsx
init_esm_shims();
import {
forwardRef as forwardRef5,
useEffect as useEffect5,
useRef as useRef5,
useState as useState3,
useImperativeHandle as useImperativeHandle5,
useContext as useContext3,
memo as memo4,
useCallback as useCallback2
} from "react";
function createSource(map, id, sourceOptions) {
if (map.style?._loaded) {
map.addSource(id, sourceOptions);
return map.getSource(id);
}
return void 0;
}
function updateSource(source, nextOptions, prevOptions) {
switch (nextOptions.type) {
case "image": {
const prevO = prevOptions;
const nextO = nextOptions;
if (prevO.url !== nextO.url) {
source.updateImage({
url: nextO.url,
coordinates: nextO.coordinates
});
}
if (prevO.coordinates !== nextO.coordinates) {
source.setCoordinates(nextO.coordinates);
}
break;
}
case "video": {
const prevO = prevOptions;
const nextO = nextOptions;
if (prevO.coordinates !== nextO.coordinates) {
source.setCoordinates(nextO.coordinates);
}
break;
}
case "geojson": {
const prevO = prevOptions;
const nextO = nextOptions;
if (prevO.data !== nextO.data) {
source.setData(nextO.data);
}
if (prevO.cluster !== nextO.cluster || prevO.clusterMaxZoom !== nextO.clusterMaxZoom || prevO.clusterRadius !== nextO.clusterRadius) {
source.setClusterOptions({
cluster: nextO.cluster,
clusterMaxZoom: nextO.clusterMaxZoom,
clusterRadius: nextO.clusterRadius
});
}
break;
}
case "raster":
case "raster-dem":
case "vector": {
const prevO = prevOptions;
const nextO = nextOptions;
if (prevO.tiles !== nextO.tiles && nextO.tiles) {
source.setTiles(nextO.tiles);
}
if (prevO.url !== nextO.url && nextO.url) {
source.setUrl(nextO.url);
}
break;
}
}
}
var RSource = memo4(
forwardRef5(function RSource2(props, ref) {
const { id, ...sourceOptions } = props;
const context = useContext3(mapLibreContext);
if (!context.mapManager) {
throw new Error("use <RSource /> component inside <RMap />");
}
const map = context.mapManager.map;
const initialId = useRef5(id);
if (id !== initialId.current) {
throw new Error(
`RSource id should not change. "${id}" "${initialId.current}". If you defined id as const string add a "key" prop to your RSource component`
);
}
const { id: _, ...prevOptions } = context.mapManager.getControlledSource(id) ?? props;
if (sourceOptions.type !== prevOptions.type) {
throw new Error(
`RSource type should not change. "${sourceOptions.type}" "${prevOptions.type}"`
);
}
const [, setVersion] = useState3(0);
const reRender = useCallback2(() => void setTimeout(() => setVersion((v) => v + 1), 0), []);
useEffect5(() => {
map.on("styledata", reRender);
if (map.style._loaded) {
reRender();
}
return () => {
map.off("styledata", reRender);
if (map.style && map.getSource(id)) {
const layers = map.getStyle()?.layers;
if (layers) {
for (const layer of layers) {
if (layer.type !== "background" && layer.type !== "custom" && layer.source === id) {
map.removeLayer(layer.id);
}
}
}
map.removeSource(id);
}
context.mapManager?.setControlledSource(id, null);
};
}, [map, id, context, reRender]);
let source = map.style?._loaded && map.getSource(id);
if (source) {
updateSource(source, sourceOptions, prevOptions);
} else {
source = createSource(map, id, sourceOptions);
if (source) {
map.off("styledata", reRender);
}
}
useImperativeHandle5(ref, () => source || null, [source]);
context.mapManager.setControlledSource(id, props);
return null;
})
);
// src/components/RTerrain/index.ts
init_esm_shims();
// src/components/RTerrain/RTerrain.tsx
init_esm_shims();
import { useContext as useContext4, useEffect as useEffect6, useState as useState4 } from "react";
var RTerrain = (props) => {
const terrainOptions = props;
const context = useContext4(mapLibreContext);
if (!context.mapManager) {
throw new Error("use <RTerrain /> component inside <RMap />");
}
const map = context.mapManager.map;
const prevOptions = context.mapManager.getControlledTerrain() ?? props;
const [, setVersion] = useState4(0);
useEffect6(() => {
const reRender = () => void setVersion((v) => v + 1);
if (map.style._loaded) {
reRender();
}
return () => {
if (map.style?._loaded && map.getTerrain()) {
map.setTerrain(null);
}
context.mapManager?.setControlledTerrain(null);
};
}, [map, context]);
const terrain = map.style?._loaded && map.getSource(terrainOptions.source) && map.getTerrain();
if (terrain) {
if (prevOptions.exaggeration !== terrainOptions.exaggeration || prevOptions.source !== terrainOptions.source) {
map.setTerrain(terrainOptions);
}
} else if (map.style?._loaded) {
if (map.getSource(terrainOptions.source)) {
map.setTerrain(terrainOptions);
} else {
throw new Error(`Unable to find Terrain source ${terrainOptions.source}`);
}
}
context.mapManager.setControlledTerrain(props);
return null;
};
// src/components/RGradientMarker/index.ts
init_esm_shims();
// src/components/RGradientMarker/GradientMarker.ts
init_esm_shims();
import { Marker as Marker2, Popup as Popup2 } from "maplibre-gl";
var defaultColor = "#ffe64b";
var defaultHeight = 50;
var GradientMarker = class extends Marker2 {
_icon;
_height = defaultHeight;
_text;
// @ts-ignore
_popup;
_iconElement;
_textElement;
_markerElement;
constructor(options) {
const useDefaultMarker = !options || !options.element;
if (useDefaultMarker) {
options ??= {};
options.element = DOM.create("div", "maplibregl-gradient-marker");
if (options.className) {
options.element.classList.add(options.className);
}
}
super(options);
if (this._draggable) {
this._element.classList.add("draggable");
}
this._anchor = options && options.anchor || "bottom";
this._color = options && options.color || defaultColor;
this._icon = options && options.icon;
this._text = options && options.text;
if (useDefaultMarker) {
this._defaultMarker = true;
this._element.setAttribute("aria-label", "Map marker");
this._element.setAttribute("tabindex", "0");
this.setScale(this._scale);
this.setColor(this._color);
this._markerElement = DOM.create("div", "marker");
if (this._text) {
DOM.create("div", "circle", this._markerElement);
this._textElement = DOM.create("div", "text", this._markerElement);
this._textElement.innerText = this._text;
} else if (this._icon) {
DOM.create("div", "circle", this._markerElement);
this.setIcon(this._icon);
}
const target = DOM.create("div", "target");
this._element.appendChild(this._markerElement);
this._element.appendChild(target);
}
}
_onActive = (e) => {
if (this._element.contains(e.originalEvent.target)) {
this._map.once("mouseup", this._onInactive);
this._map.once("touchend", this._onInactive);
this._element.classList.add("active");
}
};
_onInactive = () => {
this._element.classList.remove("active");
};
addTo(map) {
Marker2.prototype.addTo.apply(this, [map]);
this._map.on("mousedown", this._onActive);
this._map.on("touchstart", this._onActive);
return this;
}
remove() {
if (this._map) {
this._map.off("mousedown", this._onActive);
this._map.off("touchstart", this._onActive);
}
Marker2.prototype.remove.apply(this);
return this;
}
setIcon(icon) {
this._icon = icon;
if (this._iconElement) {
this._iconElement.remove();
}
if (!icon) {
return this;
}
if (typeof icon === "string") {
DOM.create("div", "circle", this._markerElement);
this._iconElement = DOM.create("i", icon, this._markerElement);
this._iconElement.className = icon || "";
} else if (typeof icon === "function") {
this._iconElement = icon();
this._markerElement?.append(this._iconElement);
} else {
this._iconElement = icon;
this._markerElement?.append(icon);
}
return this;
}
getIcon() {
return this._icon;
}
setText(text) {
this._text = text;
if (this._textElement) {
this._textElement.innerText = this._text || "";
}
return this;
}
getText() {
return this._text;
}
setColor(color) {
this._color = color || defaultColor;
this._element.style.setProperty("--marker-color", this._color);
return this;
}
getColor() {
return this._color;
}
setScale(scale = 1, markerHeight2 = defaultHeight) {
this._scale = scale;
this._height = markerHeight2 * this._scale;
this._element.style.setProperty("--marker-size", `${this._height}px`);
return this;
}
getScale() {
return this._scale;
}
setPopup(popup) {
if (this._popup) {
this._popup.remove();
delete this._popup;
this._element.removeEventListener("keypress", this._onKeyPress);
if (!this._originalTabIndex) {
this._element.removeAttribute("tabindex");
}
}
if (popup) {
if (!("offset" in popup.options)) {
if (popup instanceof Popup2) {
popup.options.offset = this._height + arrowHeight;
} else {
popup.options.offset = {
mainAxis: this._height + arrowHeight
};
}
}
this._popup = popup;
if (this._lngLat) this._popup.setLngLat(this._lngLat);
this._originalTabIndex = this._element.getAttribute("tabindex") || "";
if (!this._originalTabIndex) {
this._element.setAttribute("tabindex", "0");
}
this._element.addEventListener("keypress", this._onKeyPress);
}
return this;
}
setDraggable(shouldBeDraggable) {
Marker2.prototype.setDraggable.apply(this, [shouldBeDraggable]);
this._element.classList.toggle("draggable", shouldBeDraggable);
return this;
}
};
// src/components/RGradientMarker/RGradientMarker.tsx
init_esm_shims();
import { forwardRef as forwardRef6, memo as memo5, useEffect as useEffect7, useImperativeHandle as useImperativeHandle6, useMemo as useMemo4, useRef as useRef6 } from "react";
var eventNameToCallbackName4 = {
dragstart: "onDragStart",
drag: "onDrag",
dragend: "onDragEnd",
click: "onClick"
};
var RGradientMarker = memo5(
forwardRef6(function RGradientMarker2(props, ref) {
const { longitude, latitude, ...markerProps } = props;
const map = useMap();
const [options, markerCallbacks] = transformPropsToOptions(markerProps);
const prevOptionsRef = useRef6(options);
const currCallbacksRef = useRef6();
currCallbacksRef.current = markerCallbacks;
const marker = useMemo4(() => {
const mk = new GradientMarker({
...options,
anchor: "bottom"
});
mk.setLngLat([longitude, latitude]);
return mk;
}, []);
const eventDepStr = prepareEventDep(eventNameToCallbackName4, markerCallbacks).join("-");
useEffect7(() => {
function onGradientMarkerEvent(e) {
const eventType = e.type;
const callbackName = eventNameToCallbackName4[eventType];
if (currCallbacksRef.current?.[callbackName]) {
currCallbacksRef.current[callbackName]?.(e);
} else {
console.info("not managed RGradientMarker event", eventType, e);
}
}
const eventNames = eventDepStr.split("-");
eventNames.forEach((eventName) => {
if (eventName === "click") {
marker.getElement().addEventListener("click", onGradientMarkerEvent);
} else {
marker.on(eventName, onGradientMarkerEvent);
}
});
return () => {
eventNames.forEach((eventName) => {
if (eventName === "click") {
marker.getElement().removeEventListener("click", onGradientMarkerEvent);
} else {
marker.off(eventName, onGradientMarkerEvent);
}
});
};
}, [eventDepStr, marker]);
useEffect7(() => {
marker.addTo(map);
return () => void marker.remove();
}, []);
const {
scale,
color,
text,
icon,
className,
draggable,
clickTolerance = 0,
rotation,
rotationAlignment,
pitchAlignment,
opacity,
opacityWhenCovered
} = options;
useImperativeHandle6(ref, () => marker, [marker]);
if (prevOptionsRef.current.className !== className) {
updateClassNames(
marker._element,
prevOptionsRef.current.className?.split(" ") || [],
className?.split(" ") || []
);
}
if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
marker.setLngLat([longitude, latitude]);
}
if (marker.isDraggable() !== draggable) {
marker.setDraggable(draggable);
}
if (marker._clickTolerance !== clickTolerance) {
marker._clickTolerance = clickTolerance;
}
if (marker.getRotation() !== rotation) {
marker.setRotation(rotation);
}
if (marker.getRotationAlignment() !== rotationAlignment) {
marker.setRotationAlignment(rotationAlignment);
}
if (marker.getPitchAlignment() !== pitchAlignment) {
marker.setPitchAlignment(pitchAlignment);
}
if (marker._opacity !== opacity || marker._opacityWhenCovered !== opacityWhenCovered) {
marker.setOpacity(opacity, opacityWhenCovered);
}
if (marker.getColor() !== color) {
marker.setColor(color);
}
if (marker.getScale() !== scale) {
marker.setScale(scale);
}
if (marker.getText() !== text) {
marker.setText(text);
}
if (marker.getIcon() !== icon) {
marker.setIcon(icon);
}
prevOptionsRef.current = options;
return null;
})
);
// src/components/ContextMenuEventDispatcher.ts
init_esm_shims();
import { useEffect as useEffect8 } from "react";
function ContextMenuEventDispatcher({
customEventName = "contextmenu-maplibre",
enabled = true
}) {
const map = useMap();
useEffect8(() => {
if (!enabled) {
return;
}
const eventName = window.matchMedia("(pointer: coarse)").matches ? "click" : "contextmenu";
function handleContextMenu({ originalEvent, point, lngLat }) {
map.getCanvasContainer().dispatchEvent(
new CustomEvent(customEventName, {
detail: {
originalEvent,
point,
lngLat,
emulated: eventName !== "contextmenu"
}
})
);
}
map.on(eventName, handleContextMenu);
return () => {
map.off(eventName, handleContextMenu);
};
}, [map, enabled, customEventName]);
return null;
}
// src/controls/index.ts
init_esm_shims();
// src/controls/MrcLogoControl.tsx
init_esm_shims();
import { memo as memo6, useState as useState5 } from "react";
// src/hooks/useRControl.ts
init_esm_shims();
import { useEffect as useEffect9, useRef as useRef7 } from "react";
function useRControl({
position,
className = "maplibregl-ctrl maplibregl-ctrl-group"
}) {
const map = useMap();
const containerRef = useRef7();
const prevOptionsRef = useRef7({
className
});
if (!containerRef.current) {
const ctrl = document.createElement("div");
ctrl.className = className;
containerRef.current = ctrl;
}
useEffect9(() => {
const ctrl = containerRef.current;
if (ctrl && !ctrl.parentElement) {
const positionContainer = map._controlPositions[position];
if (!positionContainer) {
throw new Error(`Unable to add control, position ${position} doesn't exists`);
}
if (position.indexOf("bottom") !== -1) {
positionContainer.insertBefore(ctrl, positionContainer.firstChild);
} else {
positionContainer.appendChild(ctrl);
}
}
return () => {
containerRef.current && containerRef.current.remove();
};
}, [map, position]);
if (prevOptionsRef.current.className !== className) {
updateClassNames(
containerRef.current,
prevOptionsRef.current.className?.split(" ") || [],
className?.split(" ") || []
);
}
prevOptionsRef.current = {
className
};
return {
container: containerRef.current
};
}
// src/controls/MrcLogoControl.tsx
import { createPortal as createPortal3 } from "react-dom";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function MapLibreReactLogo({ height = 27 }) {
const [duration, setDuration] = useState5("25s");
return /* @__PURE__ */ jsxs(
"svg",
{
width: height * 21 / 27,
height,
viewBox: "-10.5 -10.5 21 27",
fill: "none",
version: "1.1",
id: "svg3",
xmlns: "http://www.w3.org/2000/svg",
onMouseEnter: () => setDuration("2s"),
onMouseLeave: () => setDuration("25s"),
children: [
/* @__PURE__ */ jsx2(
"path",
{
fill: "#82b4fe",
fillRule: "evenodd",
d: "m 0.04378077,-7.0160133 c -3.95934197,-0.025693 -7.19979577,2.9709105 -7.22395607,6.67957072 -0.021351,3.28396108 1.6024867,4.88716988 3.3609363,6.62322508 1.2259466,1.2102943 2.5172339,2.4851233 3.36206037,4.4390285 0.056993,0.04631 0.095121,0.07722 0.1114948,0.09183 a 0.41450831,0.41450831 0 0 0 0.2727553,0.103225 0.41515047,0.41515047 0 0 0 0.2741963,-0.09961 c 0.00438,-0.0039 0.012527,-0.0074 0.022479,-0.01165 0.027304,-0.01171 0.068791,-0.02955 0.090222,-0.0789 C 1.1559887,8.7954149 2.4656545,7.5377628 3.7164045,6.3367792 5.4974902,4.626493 7.158975,3.0309869 7.1802478,-0.24301718 7.2043965,-3.9517594 4.0032063,-6.9901745 0.04378537,-7.016023 Z m -0.06903,10.6235008 C 1.9352357,3.6202595 3.5351559,2.0173639 3.5480768,0.02733852 3.5610008,-1.9626869 1.9821136,-3.5862858 0.02154667,-3.5990486 -1.9390213,-3.6118206 -3.5388592,-2.0089214 -3.5518634,-0.01889648 -3.5647874,1.9711289 -1.9858982,3.5947246 -0.02533123,3.6074875 Z"
}
),
/* @__PURE__ */ jsx2(
"path",
{
fill: "currentColor",
d: "m -2.4911489,12.068709 c -0.3270955,-0.0022 -0.5946317,0.359604 -0.5975214,0.807906 l -0.014767,2.269118 c -0.00295,0.448302 0.2598305,0.813445 0.587006,0.815611 l 5.0075702,0.03259 c 0.3270965,0.0022 0.5946306,-0.359606 0.5975218,-0.807909 l 0.014775,-2.269117 c 0.00304,-0.44838 -0.259831,-0.813523 -0.5870064,-0.815609 z"
}
),
/* @__PURE__ */ jsxs("g", { children: [
/* @__PURE__ */ jsx2("circle", { cx: "0", cy: "0", r: "2", fill: "currentColor", id: "circle1" }),
/* @__PURE__ */ jsxs("g", { stroke: "currentColor", strokeWidth: "1", fill: "none", id: "g3", children: [
/* @__PURE__ */ jsx2("ellipse", { rx: "10", ry: "4.5", id: "ellipse1", cx: "0", cy: "0" }),
/* @__PURE__ */ jsx2("ellipse", { rx: "10", ry: "4.5", transform: "rotate(60)", id: "ellipse2", cx: "0", cy: "0" }),
/* @__PURE__ */ jsx2("ellipse", { rx: "10", ry: "4.5", transform: "rotate(120)", id: "ellipse3", cx: "0", cy: "0" })
] }),
/* @__PURE__ */ jsx2(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
dur: duration,
values: "0 0 0;360 0 0;",
repeatCount: "indefinite"
}
)
] })
]
}
);
}
var MrcLogoControl = memo6(function MrcLogoControl2({
position = "bottom-left"
}) {
const { container } = useRControl({
position,
className: "maplibregl-ctrl maplibregl-ctrl-mrc-logo"
});
return createPortal3(
/* @__PURE__ */ jsx2(
"a",
{
target: "_blank",
rel: "noopener nofollow",
href: "https://maplibre-react-components.pentatrion.com",
"aria-label": "MapLibre React components logo",
children: /* @__PURE__ */ jsx2(MapLibreReactLogo, { height: 30 })
}
),
container
);
});
// src/controls/RAttributionControl.ts
init_esm_shims();
import {
AttributionControl
} from "maplibre-gl";
import { memo as memo7, forwardRef as forwardRef7, useImperativeHandle as useImperativeHandle7 } from "react";
// src/hooks/useControl.ts
init_esm_shims();
import { useEffect as useEffect10, useMemo as useMemo5 } from "react";
// src/hooks/useEventCallback.ts
init_esm_shims();
import { useCallback as useCallback3, useRef as useRef8 } from "react";
function useEventCallback(callback) {
const ref = useRef8(() => {
throw new Error("Cannot call an event handler while rendering.");
});
ref.current = callback;
return useCallback3((...args) => ref.current?.(...args), [ref]);
}
// src/hooks/useControl.ts
function useControl({
position = "top-right",
factory,
onRemove
}) {
const map = useMap();
const ctrl = useMemo5(() => factory(map), [map]);
const onRemoveStable = useEventCallback(onRemove || null);
useEffect10(() => {
if (!map.hasControl(ctrl)) {
map.addControl(ctrl, position);
}
return () => {
onRemoveStable && onRemoveStable(map);
if (map.hasControl(ctrl)) {
map.removeControl(ctrl);
} else {
console.error("map has not control", ctrl);
}
};
}, [map, ctrl, onRemoveStable, position]);
return ctrl;
}
// src/controls/RAttributionControl.ts
var RAttributionControl = memo7(
forwardRef7(function RAttributionControl2({ position = "bottom-right", ...controlOptions }, ref) {
const control = useControl({
position,
factory: () => new AttributionControl(controlOptions)
});
useImperativeHandle7(ref, () => control);
return null;
})
);
// src/controls/RFullscreenControl.ts
init_esm_shims();
import {
FullscreenControl
} from "maplibre-gl";
import { memo as memo8, forwardRef as forwardRef8, useImperativeHandle as useImperativeHandle8 } from "react";
var RFullscreenControl = memo8(
forwardRef8(function RFullscreenControl2({ position = "top-right", ...controlOptions }, ref) {
const control = useControl({
position,
factory: () => new FullscreenControl(controlOptions)
});
useImperativeHandle8(ref, () => control);
return null;
})
);
// src/controls/RGeolocateControl.ts
init_esm_shims();
import { GeolocateControl } from "maplibre-gl";
import { memo as memo9, forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle9 } from "react";
var RGeolocateControl = memo9(
forwardRef9(function RGeolocateControl2({ position = "top-right", ...controlOptions }, ref) {
const control = useControl({
position,
factory: () => new GeolocateControl(controlOptions)
});
useImperativeHandle9(ref, () => control);
return null;
})
);
// src/controls/RLogoControl.ts
init_esm_shims();
import { LogoControl } from "maplibre-gl";
import { memo as memo10, forwardRef as forwardRef10, useImperativeHandle as useImperativeHandle10 } from "react";
var RLogoControl = memo10(
forwardRef10(function RLogoControl2({ position = "bottom-left", ...controlOptions }, ref) {
const control = useControl({
position,
factory: () => new LogoControl(controlOptions)
});
useImperativeHandle10(ref, () => control);
return null;
})
);
// src/controls/RNavigationControl.ts
init_esm_shims();
import { forwardRef as forwardRef11, memo as memo11, useImperativeHandle as useImperativeHandle11 } from "react";
import {
NavigationControl
} from "maplibre-gl";
var RNavigationControl = memo11(
forwardRef11(function RNavigationControl2({ position = "top-right", ...controlOptions }, ref) {
const control = useControl({
position,
factory: () => new NavigationControl(controlOptions)
});
useImperativeHandle11(ref, () => control);
return null;
})
);
// src/controls/RScaleControl.ts
init_esm_shims();
import { ScaleControl } from "maplibre-gl";
import { memo as memo12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle12 } from "react";
var RScaleControl = memo12(
forwardRef12(function RScaleControl2({ position = "bottom-left", ...controlOptions }, ref) {
const control = useControl({
position,
factory: () => new ScaleControl(controlOptions)
});
useImperativeHandle12(ref, () => control);
return null;
})
);
// src/controls/RTerrainControl.ts
init_esm_shims();
import { TerrainControl } from "maplibre-gl";
import { memo as memo13, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle13 } from "react";
var RTerrainControl = memo13(
forwardRef13(function RTerrainControl2({ position = "top-right", ...controlOptions }, ref) {
const control = useControl({
position,
factory: () => new TerrainControl(controlOptions)
});
useImperativeHandle13(ref, () => control);
return null;
})
);
// src/hooks/index.ts
init_esm_shims();
// src/hooks/useMapAndCanvasRefs.ts
init_esm_shims();
import { useCallback as useCallback4, useRef as useRef9 } from "react";
var useMapAndCanvasRefs = () => {
const mapRef = useRef9(null);
const canvasRef = useRef9(null);
const setMapAndCanvasRef = useCallback4((map) => {
mapRef.current = map;
canvasRef.current = map?.getCanvasContainer();
}, []);
return { mapRef, canvasRef, setMapAndCanvasRef };
};
// src/hooks/useCanvasRef.ts
init_esm_shims();
import { useRef as useRef10 } from "react";
var useCanvasRef = () => {
const map = useMap();
const canvasRef = useRef10(map.getCanvasContainer());
return canvasRef;
};
// src/lib/index.ts
init_esm_shims();
export {
ContextMenuEventDispatcher,
GradientMarker,
MapLibreReactLogo,
MapManager,
MrcLogoControl,
RAttributionControl,
RFullscreenControl,
RGeolocateControl,
RGradientMarker,
RLayer,
RLogoControl,
RMap,
RMarker,
RNavigationControl,
RPopup,
RScaleControl,
RSource,
RTerrain,
RTerrainControl,
areCoordsClose,
areLngLatClose,
arePointsEqual,
deepEqual,
emptyStyle,
filterMapProps,
lngLatClassToObj,
mapLibreContext,
markerPopupOffset,
prepareEventDep,
transformPropsToOptions,
updateClassNames,
updateListeners,
useCanvasRef,
useControl,
useMap,
useMapAndCanvasRefs,
useRControl
};
"use client";import{a,b as I}from"./chunk-XELPL6N7.js";a();a();a();a();import{forwardRef as Ie,useImperativeHandle as De,useMemo as Ge,useRef as J,useState as Ae}from"react";a();import{Map as Te}from"maplibre-gl";a();import{LngLat as re}from"maplibre-gl";function ne(n){let e={},r={},t={};for(let o in n)if(o.startsWith("on"))e[o]=n[o];else if(q.includes(o))r[o]=n[o];else if(U.includes(o))t[o]=n[o];else if(!o.startsWith("initial")&&o!=="container"&&o!=="style")throw Error(`unknown map option key ${o}`);return[t,e,r]}function G(n){let e={},r={};for(let t in n)if(t.startsWith("on"))e[t]=n[t];else{let o=t.startsWith("initial")?t[7].toLowerCase()+t.substring(8):t;if(r[o])throw new Error(`duplicate key ${o}`);r[o]=n[t]}return[r,e]}function A(n,e){return Object.keys(n).filter(t=>n[t]in e).sort()}function D(n,e){if(n===e)return!0;if(!n||!e)return!1;if(Array.isArray(n)){if(!Array.isArray(e)||n.length!==e.length)return!1;for(let r=0;r<n.length;r++)if(!D(n[r],e[r]))return!1;return!0}else if(Array.isArray(e))return!1;if(typeof n=="object"&&typeof e=="object"){let r=Object.keys(n),t=Object.keys(e);if(r.length!==t.length)return!1;for(let o of r)if(!Object.prototype.hasOwnProperty.call(e,o)||!D(n[o],e[o]))return!1;return!0}return!1}function To(n,e){return!n&&!e?!0:!n||!e?!1:Math.round(n.lng*1e5)===Math.round(e.lng*1e5)&&Math.round(n.lat*1e5)===Math.round(e.lat*1e5)}function _o(n,e){if(!n&&!e)return!0;if(!n||!e)return!1;let r=re.convert(n),t=re.convert(e);return Math.round(r.lng*1e5)===Math.round(t.lng*1e5)&&Math.round(r.lat*1e5)===Math.round(t.lat*1e5)}function No(n){return{lng:n.lng,lat:n.lat}}function ae(n,e){let r=Array.isArray(n)?n[0]:n?n.x:0,t=Array.isArray(n)?n[1]:n?n.y:0,o=Array.isArray(e)?e[0]:e?e.x:0,i=Array.isArray(e)?e[1]:e?e.y:0;return r===o&&t===i}function H(n,e,r){e.forEach(t=>{t!==""&&r.indexOf(t)===-1&&n.classList.remove(t)}),r.forEach(t=>{t!==""&&(e.indexOf(t)===-1||!n.classList.contains(t))&&n.classList.add(t)})}function ie(n,e,r,t){n.forEach(o=>{o!==""&&e.indexOf(o)===-1&&t(o)}),e.forEach(o=>{o!==""&&n.indexOf(o)===-1&&r(o)})}var j=41-5.8/2,W=13.5,V=Math.abs(W)/Math.SQRT2,wo={top:[0,0],"top-left":[0,0],"top-right":[0,0],bottom:[0,-j],"bottom-left":[V,(j-W+V)*-1],"bottom-right":[-V,(j-W+V)*-1],left:[W,(j-W)*-1],right:[-W,(j-W)*-1]},Io={version:8,name:"Empty",sources:{},layers:[]};var se={mousedown:"onMouseDown",mouseup:"onMouseUp",mouseover:"onMouseOver",mouseout:"onMouseOut",mousemove:"onMouseMove",mouseenter:"onMouseEnter",mouseleave:"onMouseLeave",click:"onClick",dblclick:"onDblClick",contextmenu:"onContextMenu",touchstart:"onTouchStart",touchend:"onTouchEnd",touchcancel:"onTouchCancel",touchmove:"onTouchMove",movestart:"onMoveStart",move:"onMove",moveend:"onMoveEnd",dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",zoomstart:"onZoomStart",zoom:"onZoom",zoomend:"onZoomEnd",rotatestart:"onRotateStart",rotate:"onRotate",rotateend:"onRotateEnd",pitchstart:"onPitchStart",pitch:"onPitch",pitchend:"onPitchEnd",wheel:"onWheel",resize:"onResize",remove:"onRemove",boxzoomstart:"onBoxZoomStart",boxzoomend:"onBoxZoomEnd",boxzoomcancel:"onBoxZoomCancel",webglcontextlost:"onWebglContextLost",webglcontextrestored:"onWebglContextRestored",load:"onLoad",render:"onRender",idle:"onIdle",error:"onError",data:"onData",styledata:"onStyleData",sourcedata:"onSourceData",dataloading:"onDataLoading",styledataloading:"onStyleDataLoading",sourcedataloading:"onSourceDataLoading",tiledataloading:"onTileDataLoading",styleimagemissing:"onStyleImageMissing",dataabort:"onDataAbort",sourcedataabort:"onSourceDataAbort",terrain:"onTerrain"},U=["maxBounds","minZoom","maxZoom","minPitch","maxPitch","renderWorldCopies","pixelRatio"];var q=["scrollZoom","boxZoom","dragRotate","dragPan","keyboard","doubleClickZoom","touchZoomRotate","touchPitch","cooperativeGestures"],pe="https://demotiles.maplibre.org/style.json",F=class{reactiveOptions={};handlerOptions={};eventNames=[];callbacks;_map;padding;mapStyle;controlledSources={};controlledLayers={};controlledTerrain=null;constructor({mapStyle:e=pe,padding:r},t,o){this.mapStyle=e,this.padding=r;let[i,s]=G(t);this.callbacks=s;let p={...i,container:o,style:e},d=new Te(p);d.style.on("error",this._onStyleError),r&&d.setPadding(r),this._map=d,this._updateCallbacks(s)}setProps({mapStyle:e=pe,styleDiffing:r=!0,styleTransformStyle:t,padding:o},i){let[s,p,d]=ne(i);this._updateCallbacks(p),this._updateStyle(e,{diff:r,transformStyle:t}),this._updateReactiveOptions(s,{padding:o}),this._updateHandlers(d)}getControlledTerrain(){return this.controlledTerrain}setControlledTerrain(e){this.controlledTerrain=e}getControlledLayer(e){return this.controlledLayers[e]??null}setControlledLayer(e,r){r?this.controlledLayers[e]=r:delete this.controlledLayers[e]}getControlledSource(e){return this.controlledSources[e]??null}setControlledSource(e,r){r?this.controlledSources[e]=r:delete this.controlledSources[e]}_updateStyle(e,r){let t=this.mapStyle;e!==t&&(this.mapStyle=e,this._map.setStyle(e,{diff:r.diff,transformStyle:(o,i)=>{let s=o?Object.fromEntries(Object.entries(o?.sources).filter(([M])=>M in this.controlledSources)):{},p=o?o.layers.filter(M=>M.id in this.controlledLayers):[],d={...i,sources:{...i.sources,...s},layers:[...i.layers,...p],terrain:this.controlledTerrain?o?.terrain:i.terrain};return r.transformStyle?r.transformStyle(o,d):d}}))}_updateReactiveOptions(e,{padding:r}){let t=this.reactiveOptions;this.reactiveOptions=e;for(let o of U)if(o in e&&!D(t[o],e[o])){let i=`set${o[0].toUpperCase()}${o.substring(1)}`;this._map[i](e[o])}r&&!D(this.padding,r)&&this._map.setPadding(r),this.padding=r}_updateCallbacks(e={}){this.callbacks=e;let r=A(se,e);this.eventNames.join("-")!==r.join("-")&&(ie(this.eventNames,r,t=>this._map.on(t,this._onMapEvent),t=>this._map.off(t,this._onMapEvent)),this.eventNames=r)}_updateHandlers(e){let r=this.handlerOptions;this.handlerOptions=e;for(let t of q){let o=e[t]??!0,i=r[t]??!0;D(o,i)||(o?this._map[t].enable(o):this._map[t].disable())}}_onStyleError=e=>{e.error.name!=="AbortError"&&console.error(e.error)};_onMapEvent=e=>{let r=e.type,t=se[r];this.callbacks[t]?this.callbacks[t]?.(e):console.info("not managed RMap event",r,e)};get map(){return this._map}destroy(){this._updateCallbacks(),this._map.remove()}};a();import{createContext as _e}from"react";var S=_e({mapManager:void 0});a();import{useEffect as Ne,useLayoutEffect as we}from"react";var $=typeof window<"u"?we:Ne;import{jsx as K}from"react/jsx-runtime";var He={height:"100%"},le=Ie(function({children:e,style:r,id:t,className:o,onMounted:i,mapStyle:s,styleDiffing:p,styleTransformStyle:d,padding:M,...f},l){let c=J(null),v=J({mapManager:void 0}),y=J(!0),[,L]=Ae(0);$(()=>{v.current.mapManager?y.current?v.current.mapManager.setProps({mapStyle:s,padding:M,styleDiffing:p,styleTransformStyle:d},f):y.current=!0:(v.current.mapManager=new F({mapStyle:s,styleDiffing:p,padding:M},f,c.current),i&&i(v.current.mapManager.map),L(R=>R+1),y.current=!1)}),$(()=>()=>{v.current.mapManager&&(v.current.mapManager.destroy(),v.current.mapManager=void 0)},[]),De(l,()=>v.current.mapManager?.map||null,[]),$(()=>{if(!o)return;let R=c.current;return o.split(" ").map(k=>R.classList.add(k)),()=>void o.split(" ").map(k=>R.classList.remove(k))},[o]);let P=Ge(()=>({position:"relative",width:"100%",height:"100%",...r}),[r]);return K("div",{ref:c,id:t,style:P,children:v.current.mapManager&&K(S.Provider,{value:v.current,children:K("div",{className:"maplibregl-children",style:He,children:e})})})});a();a();import{Marker as Ze}from"maplibre-gl";import{forwardRef as ze,memo as je,useEffect as ce,useImperativeHandle as Fe,useMemo as Ve,useRef as ue}from"react";import{createPortal as $e}from"react-dom";a();import{useContext as We}from"react";function E(){let n=We(S);if(!n.mapManager)throw new Error("use useMap in components inside <RMap />");return n.mapManager.map}var me={dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",click:"onClick"};var fe=je(ze(function(e,r){let{longitude:t,latitude:o,children:i,...s}=e,p=E(),[d,M]=G(s),f=ue(d),l=ue();l.current=M;let c=Ve(()=>{let b={...d,element:i?document.createElement("div"):void 0},w=new Ze(b);return w.setLngLat([t,o]),w},[]),v=A(me,M).join("-");ce(()=>{function b(h){let z=h.type,x=me[z];l.current?.[x]?l.current[x]?.(h):console.info("not managed RMarker event",z,h)}let w=v.split("-");return w.forEach(h=>{h==="click"?c.getElement().addEventListener("click",b):c.on(h,b)}),()=>{w.forEach(h=>{h==="click"?c.getElement().removeEventListener("click",b):c.off(h,b)})}},[v,c]),ce(()=>(c.addTo(p),()=>void c.remove()),[]);let{className:y,offset:L,draggable:P,clickTolerance:R=0,rotation:k,rotationAlignment:_,pitchAlignment:N,opacity:g,opacityWhenCovered:O}=d;return Fe(r,()=>c,[c]),f.current.className!==y&&H(c._element,f.current.className?.split(" ")||[],y?.split(" ")||[]),(c.getLngLat().lng!==t||c.getLngLat().lat!==o)&&c.setLngLat([t,o]),L&&!ae(c.getOffset(),L)&&c.setOffset(L),c.isDraggable()!==P&&c.setDraggable(P),c._clickTolerance!==R&&(c._clickTolerance=R),c.getRotation()!==k&&c.setRotation(k),c.getRotationAlignment()!==_&&c.setRotationAlignment(_),c.getPitchAlignment()!==N&&c.setPitchAlignment(N),(c._opacity!==g||c._opacityWhenCovered!==O)&&c.setOpacity(g,O),f.current=d,i?$e(i,c.getElement()):null}));a();a();import{Popup as Be}from"maplibre-gl";import{forwardRef as Ue,memo as qe,useEffect as de,useImperativeHandle as Je,useMemo as Ke,useRef as Q}from"react";import{createPortal as Qe}from"react-dom";var Y={map_click:"onMapClick",map_move:"onMapMove"};var ve=qe(Ue(function(e,r){let{longitude:t,latitude:o,children:i,...s}=e,p=E(),[d,M]=G(s),f=Q(null),l=Q(d),c=Q();c.current=M;let v=Ke(()=>document.createElement("div"),[]);f.current||(f.current=new Be({...d,closeButton:!1,closeOnClick:!1,closeOnMove:!1}),t!==void 0&&o!==void 0&&f.current.setLngLat([t,o]));let y=A(Y,M).join("-");de(()=>{function k(g){let O=g.type,b=Y[O]||Y[`map_${O}`];c.current?.[b]?c.current[b]?.(g):console.info("not managed RPopup event",O,g)}if(y==="")return;let _=y.split("-"),N=f.current;return _.forEach(g=>{g.startsWith("map_")?p.on(g.substring(4),k):N.on(g,k)}),()=>{_.forEach(g=>{g.startsWith("map_")?p.off(g.substring(4),k):N.off(g,k)})}},[y,p]),de(()=>(f.current.setDOMContent(v).addTo(p),()=>void f.current.remove()),[v,p]);let{offset:L,maxWidth:P="240px",className:R}=d;return Je(r,()=>f.current,[f]),f.current.isOpen()&&(t!==void 0&&o!==void 0&&(f.current.getLngLat().lng!==t||f.current.getLngLat().lat!==o)&&f.current.setLngLat([t,o]),L&&!D(f.current.options.offset,L)&&f.current.setOffset(L),l.current.className!==R&&H(v,l.current.className?.split(" ")||[],R?.split(" ")||[]),f.current.getMaxWidth()!==P&&f.current.setMaxWidth(P)),l.current=d,Qe(i,v)}));a();a();import{forwardRef as Ye,memo as Xe,useCallback as et,useContext as tt,useEffect as ot,useImperativeHandle as rt,useRef as nt,useState as at}from"react";function it(n,e,r){if(n.style?._loaded&&(e.type==="background"||e.type==="custom"||e.source&&n.getSource(e.source)))return n.addLayer(e,r&&n.getLayer(r)?r:void 0),n.getLayer(e.id)}function st(n,{beforeId:e,...r},{beforeId:t,...o}){if(o.type==="custom"||r.type==="custom")return;t!==e&&n.moveLayer(r.id,e),r.type!=="background"&&r.type!=="custom"&&o.filter!==r.filter&&n.setFilter(r.id,r.filter);let i=o,s=r;if(i.layout!==s.layout){if(s.layout)for(let p of Object.keys(s.layout))s.layout[p]!==i.layout?.[p]&&n.setLayoutProperty(r.id,p,s.layout[p]);for(let p in i.layout)Object.prototype.hasOwnProperty.call(s.layout,p)||n.setLayoutProperty(r.id,p,void 0)}if(i.paint!==s.paint){if(s.paint)for(let p of Object.keys(s.paint))s.paint[p]!==i.paint?.[p]&&n.setPaintProperty(r.id,p,s.paint[p]);for(let p in i.paint)Object.prototype.hasOwnProperty.call(s.paint,p)||n.setPaintProperty(r.id,p,void 0)}(i.minzoom!==s.minzoom||i.maxzoom!==s.maxzoom)&&s.minzoom&&s.maxzoom&&n.setLayerZoomRange(r.id,s.minzoom,s.maxzoom)}var Me=Xe(Ye(function(e,r){let{beforeId:t,...o}=e,i=o.id,s=tt(S);if(!s.mapManager)throw new Error("use <RLayer /> component inside <RMap />");let p=s.mapManager.map,d=nt(i);if(i!==d.current)throw new Error(`RLayer id should not change. "${i}" "${d.current}". If you defined id as const string add a "key" prop to your RLayer component`);let M=s.mapManager.getControlledLayer(i)??e,[,f]=at(0),l=et(()=>f(v=>v+1),[]);if(e.type!==M.type)throw new Error(`RLayer type should not change. "${e.type}" "${M.type}"`);ot(()=>(p.on("styledata",l),p.style._loaded&&l(),()=>{p.off("styledata",l),p.style&&p.style._loaded&&p.getLayer(i)&&p.removeLayer(i),s.mapManager?.setControlledLayer(i,null)}),[p,i,s,l]);let c=p.style?._loaded&&p.getLayer(i);return c?st(p,e,M):(c=it(p,o,t),c&&p.off("styledata",l)),rt(r,()=>c||null,[c]),s.mapManager.setControlledLayer(i,e),null}));a();a();import{forwardRef as pt,useEffect as lt,useRef as ct,useState as ut,useImperativeHandle as mt,useContext as ft,memo as dt,useCallback as vt}from"react";function Mt(n,e,r){if(n.style?._loaded)return n.addSource(e,r),n.getSource(e)}function yt(n,e,r){switch(e.type){case"image":{let t=r,o=e;t.url!==o.url&&n.updateImage({url:o.url,coordinates:o.coordinates}),t.coordinates!==o.coordinates&&n.setCoordinates(o.coordinates);break}case"video":{let t=r,o=e;t.coordinates!==o.coordinates&&n.setCoordinates(o.coordinates);break}case"geojson":{let t=r,o=e;t.data!==o.data&&n.setData(o.data),(t.cluster!==o.cluster||t.clusterMaxZoom!==o.clusterMaxZoom||t.clusterRadius!==o.clusterRadius)&&n.setClusterOptions({cluster:o.cluster,clusterMaxZoom:o.clusterMaxZoom,clusterRadius:o.clusterRadius});break}case"raster":case"raster-dem":case"vector":{let t=r,o=e;t.tiles!==o.tiles&&o.tiles&&n.setTiles(o.tiles),t.url!==o.url&&o.url&&n.setUrl(o.url);break}}}var ye=dt(pt(function(e,r){let{id:t,...o}=e,i=ft(S);if(!i.mapManager)throw new Error("use <RSource /> component inside <RMap />");let s=i.mapManager.map,p=ct(t);if(t!==p.current)throw new Error(`RSource id should not change. "${t}" "${p.current}". If you defined id as const string add a "key" prop to your RSource component`);let{id:d,...M}=i.mapManager.getControlledSource(t)??e;if(o.type!==M.type)throw new Error(`RSource type should not change. "${o.type}" "${M.type}"`);let[,f]=ut(0),l=vt(()=>void setTimeout(()=>f(v=>v+1),0),[]);lt(()=>(s.on("styledata",l),s.style._loaded&&l(),()=>{if(s.off("styledata",l),s.style&&s.getSource(t)){let v=s.getStyle()?.layers;if(v)for(let y of v)y.type!=="background"&&y.type!=="custom"&&y.source===t&&s.removeLayer(y.id);s.removeSource(t)}i.mapManager?.setControlledSource(t,null)}),[s,t,i,l]);let c=s.style?._loaded&&s.getSource(t);return c?yt(c,o,M):(c=Mt(s,t,o),c&&s.off("styledata",l)),mt(r,()=>c||null,[c]),i.mapManager.setControlledSource(t,e),null}));a();a();import{useCallback as gt,useContext as ht,useEffect as Et,useState as Ct}from"react";var ge=n=>{let e=n,r=ht(S);if(!r.mapManager)throw new Error("use <RTerrain /> component inside <RMap />");let t=r.mapManager.map,o=r.mapManager.getControlledTerrain()??n,[,i]=Ct(0),s=gt(()=>i(d=>d+1),[]);return Et(()=>(t.on("styledata",s),t.style._loaded&&s(),()=>{t.off("styledata",s),t.style?._loaded&&t.getTerrain()&&t.setTerrain(null),r.mapManager?.setControlledTerrain(null)}),[t,r,s]),t.style?._loaded&&(t.getSource(e.source)?t.getTerrain():!1)?(o.exaggeration!==e.exaggeration||o.source!==e.source)&&t.setTerrain(e):t.style?._loaded&&t.getSource(e.source)&&(t.setTerrain(e),t.off("styledata",s)),r.mapManager.setControlledTerrain(n),null};a();a();import{Marker as B,Popup as kt}from"maplibre-gl";var Ee="#ffe64b",Ce=50,Z=class extends B{_icon;_height=Ce;_text;_popup;_circleElement=null;_iconElement=null;_textElement=null;_markerElement;constructor(e){let r=!e||!e.element;if(r&&(e??={},e.element=I.create("div","maplibregl-gradient-marker"),e.className&&e.element.classList.add(e.className)),super(e),this._draggable&&this._element.classList.add("draggable"),this._anchor=e&&e.anchor||"bottom",this._color=e&&e.color||Ee,this._icon=e&&e.icon,this._text=e&&e.text,r){this._defaultMarker=!0,this._element.setAttribute("aria-label","Map marker"),this._element.setAttribute("tabindex","0"),this.setScale(this._scale),this.setColor(this._color),this._markerElement=I.create("div","marker"),this._text?this.setText(this._text):this._icon&&this.setIcon(this._icon);let t=I.create("div","target");this._element.appendChild(this._markerElement),this._element.appendChild(t)}}_onActive=e=>{this._element.contains(e.originalEvent.target)&&(this._map.once("mouseup",this._onInactive),this._map.once("touchend",this._onInactive),this._element.classList.add("active"))};_onInactive=()=>{this._element.classList.remove("active")};addTo(e){return B.prototype.addTo.apply(this,[e]),this._map.on("mousedown",this._onActive),this._map.on("touchstart",this._onActive),this}remove(){return this._map&&(this._map.off("mousedown",this._onActive),this._map.off("touchstart",this._onActive)),B.prototype.remove.apply(this),this}setIcon(e){return this.resetIconText(),this._icon=e,e?(this._circleElement=I.create("div","circle",this._markerElement),typeof e=="string"?(this._iconElement=I.create("i",e,this._markerElement),this._iconElement.className=e||""):typeof e=="function"?(this._iconElement=e(),this._markerElement?.append(this._iconElement)):(this._iconElement=e,this._markerElement?.append(e)),this):this}getIcon(){return this._icon}resetIconText(){this._circleElement?.remove(),this._iconElement?.remove(),this._textElement?.remove(),this._circleElement=null,this._iconElement=null,this._textElement=null}setText(e){return this.resetIconText(),this._text=e,e?(this._circleElement=I.create("div","circle",this._markerElement),this._textElement=I.create("div","text",this._markerElement),this._textElement.innerText=e,this):this}getText(){return this._text}setColor(e){return this._color=e||Ee,this._element.style.setProperty("--marker-color",this._color),this}getColor(){return this._color}setScale(e=1,r=Ce){return this._scale=e,this._height=r*this._scale,this._element.style.setProperty("--marker-size",`${this._height}px`),this}getScale(){return this._scale}setPopup(e){return this._popup&&(this._popup.remove(),delete this._popup,this._element.removeEventListener("keypress",this._onKeyPress),this._originalTabIndex||this._element.removeAttribute("tabindex")),e&&("offset"in e.options||(e instanceof kt?e.options.offset=this._height+8:e.options.offset={mainAxis:this._height+8}),this._popup=e,this._lngLat&&this._popup.setLngLat(this._lngLat),this._originalTabIndex=this._element.getAttribute("tabindex")||"",this._originalTabIndex||this._element.setAttribute("tabindex","0"),this._element.addEventListener("keypress",this._onKeyPress)),this}setDraggable(e){return B.prototype.setDraggable.apply(this,[e]),this._element.classList.toggle("draggable",e),this}};a();import{forwardRef as Rt,memo as Lt,useEffect as ke,useImperativeHandle as bt,useMemo as xt,useRef as Re}from"react";var Le={dragstart:"onDragStart",drag:"onDrag",dragend:"onDragEnd",click:"onClick"};var be=Lt(Rt(function(e,r){let{longitude:t,latitude:o,...i}=e,s=E(),[p,d]=G(i),M=Re(p),f=Re();f.current=d;let l=xt(()=>{let h=new Z({...p,anchor:"bottom"});return h.setLngLat([t,o]),h},[]),c=A(Le,d).join("-");ke(()=>{function h(x){let te=x.type,oe=Le[te];f.current?.[oe]?f.current[oe]?.(x):console.info("not managed RGradientMarker event",te,x)}let z=c.split("-");return z.forEach(x=>{x==="click"?l.getElement().addEventListener("click",h):l.on(x,h)}),()=>{z.forEach(x=>{x==="click"?l.getElement().removeEventListener("click",h):l.off(x,h)})}},[c,l]),ke(()=>(l.addTo(s),()=>void l.remove()),[]);let{scale:v,color:y,text:L,icon:P,className:R,draggable:k,clickTolerance:_=0,rotation:N,rotationAlignment:g,pitchAlignment:O,opacity:b,opacityWhenCovered:w}=p;return bt(r,()=>l,[l]),M.current.className!==R&&H(l._element,M.current.className?.split(" ")||[],R?.split(" ")||[]),(l.getLngLat().lng!==t||l.getLngLat().lat!==o)&&l.setLngLat([t,o]),l.isDraggable()!==k&&l.setDraggable(k),l._clickTolerance!==_&&(l._clickTolerance=_),l.getRotation()!==N&&l.setRotation(N),l.getRotationAlignment()!==g&&l.setRotationAlignment(g),l.getPitchAlignment()!==O&&l.setPitchAlignment(O),(l._opacity!==b||l._opacityWhenCovered!==w)&&l.setOpacity(b,w),l.getColor()!==y&&l.setColor(y),l.getScale()!==v&&l.setScale(v),l.getText()!==L&&l.setText(L),l.getIcon()!==P&&l.setIcon(P),M.current=p,null}));a();import{useEffect as St}from"react";function Pt({customEventName:n="contextmenu-maplibre",enabled:e=!0}){let r=E();return St(()=>{if(!e)return;let t=window.matchMedia("(pointer: coarse)").matches?"click":"contextmenu";function o({originalEvent:i,point:s,lngLat:p}){r.getCanvasContainer().dispatchEvent(new CustomEvent(n,{detail:{originalEvent:i,point:s,lngLat:p,emulated:t!=="contextmenu"}}))}return r.on(t,o),()=>{r.off(t,o)}},[r,e,n]),null}a();a();import{memo as Tt,useState as _t}from"react";a();import{useEffect as Ot,useRef as xe}from"react";function X({position:n,className:e="maplibregl-ctrl maplibregl-ctrl-group"}){let r=E(),t=xe(),o=xe({className:e});if(!t.current){let i=document.createElement("div");i.className=e,t.current=i}return Ot(()=>{let i=t.current;if(i&&!i.parentElement){let s=r._controlPositions[n];if(!s)throw new Error(`Unable to add control, position ${n} doesn't exists`);n.indexOf("bottom")!==-1?s.insertBefore(i,s.firstChild):s.appendChild(i)}return()=>{t.current&&t.current.remove()}},[r,n]),o.current.className!==e&&H(t.current,o.current.className?.split(" ")||[],e?.split(" ")||[]),o.current={className:e},{container:t.current}}import{createPortal as Nt}from"react-dom";import{jsx as T,jsxs as ee}from"react/jsx-runtime";function Se({height:n=27}){let[e,r]=_t("25s");return ee("svg",{width:n*21/27,height:n,viewBox:"-10.5 -10.5 21 27",fill:"none",version:"1.1",id:"svg3",xmlns:"http://www.w3.org/2000/svg",onMouseEnter:()=>r("2s"),onMouseLeave:()=>r("25s"),children:[T("path",{fill:"#82b4fe",fillRule:"evenodd",d:"m 0.04378077,-7.0160133 c -3.95934197,-0.025693 -7.19979577,2.9709105 -7.22395607,6.67957072 -0.021351,3.28396108 1.6024867,4.88716988 3.3609363,6.62322508 1.2259466,1.2102943 2.5172339,2.4851233 3.36206037,4.4390285 0.056993,0.04631 0.095121,0.07722 0.1114948,0.09183 a 0.41450831,0.41450831 0 0 0 0.2727553,0.103225 0.41515047,0.41515047 0 0 0 0.2741963,-0.09961 c 0.00438,-0.0039 0.012527,-0.0074 0.022479,-0.01165 0.027304,-0.01171 0.068791,-0.02955 0.090222,-0.0789 C 1.1559887,8.7954149 2.4656545,7.5377628 3.7164045,6.3367792 5.4974902,4.626493 7.158975,3.0309869 7.1802478,-0.24301718 7.2043965,-3.9517594 4.0032063,-6.9901745 0.04378537,-7.016023 Z m -0.06903,10.6235008 C 1.9352357,3.6202595 3.5351559,2.0173639 3.5480768,0.02733852 3.5610008,-1.9626869 1.9821136,-3.5862858 0.02154667,-3.5990486 -1.9390213,-3.6118206 -3.5388592,-2.0089214 -3.5518634,-0.01889648 -3.5647874,1.9711289 -1.9858982,3.5947246 -0.02533123,3.6074875 Z"}),T("path",{fill:"currentColor",d:"m -2.4911489,12.068709 c -0.3270955,-0.0022 -0.5946317,0.359604 -0.5975214,0.807906 l -0.014767,2.269118 c -0.00295,0.448302 0.2598305,0.813445 0.587006,0.815611 l 5.0075702,0.03259 c 0.3270965,0.0022 0.5946306,-0.359606 0.5975218,-0.807909 l 0.014775,-2.269117 c 0.00304,-0.44838 -0.259831,-0.813523 -0.5870064,-0.815609 z"}),ee("g",{children:[T("circle",{cx:"0",cy:"0",r:"2",fill:"currentColor",id:"circle1"}),ee("g",{stroke:"currentColor",strokeWidth:"1",fill:"none",id:"g3",children:[T("ellipse",{rx:"10",ry:"4.5",id:"ellipse1",cx:"0",cy:"0"}),T("ellipse",{rx:"10",ry:"4.5",transform:"rotate(60)",id:"ellipse2",cx:"0",cy:"0"}),T("ellipse",{rx:"10",ry:"4.5",transform:"rotate(120)",id:"ellipse3",cx:"0",cy:"0"})]}),T("animateTransform",{attributeName:"transform",type:"rotate",dur:e,values:"0 0 0;360 0 0;",repeatCount:"indefinite"})]})]})}var wt=Tt(function({position:e="bottom-left"}){let{container:r}=X({position:e,className:"maplibregl-ctrl maplibregl-ctrl-mrc-logo"});return Nt(T("a",{target:"_blank",rel:"noopener nofollow",href:"https://maplibre-react-components.pentatrion.com","aria-label":"MapLibre React components logo",children:T(Se,{height:30})}),r)});a();import{AttributionControl as Ht}from"maplibre-gl";import{memo as Wt,forwardRef as Zt,useImperativeHandle as zt}from"react";a();import{useEffect as Gt,useMemo as At}from"react";a();import{useCallback as It,useRef as Dt}from"react";function Pe(n){let e=Dt(()=>{throw new Error("Cannot call an event handler while rendering.")});return e.current=n,It((...r)=>e.current?.(...r),[e])}function C({position:n="top-right",factory:e,onRemove:r}){let t=E(),o=At(()=>e(t),[t]),i=Pe(r||null);return Gt(()=>(console.log("mount"),t.hasControl(o)||t.addControl(o,n),()=>{console.log("unmount"),i&&i(t),t.hasControl(o)&&t.removeControl(o)}),[t,o,i,n]),o}var jt=Wt(Zt(function({position:e="bottom-right",...r},t){let o=C({position:e,factory:()=>new Ht(r)});return zt(t,()=>o),null}));a();import{FullscreenControl as Ft}from"maplibre-gl";import{memo as Vt,forwardRef as $t,useImperativeHandle as Bt}from"react";var Ut=Vt($t(function({position:e="top-right",...r},t){let o=C({position:e,factory:()=>new Ft(r)});return Bt(t,()=>o),null}));a();import{GeolocateControl as qt}from"maplibre-gl";import{memo as Jt,forwardRef as Kt,useImperativeHandle as Qt}from"react";var Yt=Jt(Kt(function({position:e="top-right",...r},t){let o=C({position:e,factory:()=>new qt(r)});return Qt(t,()=>o),null}));a();import{LogoControl as Xt}from"maplibre-gl";import{memo as eo,forwardRef as to,useImperativeHandle as oo}from"react";var ro=eo(to(function({position:e="bottom-left",...r},t){let o=C({position:e,factory:()=>new Xt(r)});return oo(t,()=>o),null}));a();import{forwardRef as no,memo as ao,useImperativeHandle as io}from"react";import{NavigationControl as so}from"maplibre-gl";var po=ao(no(function({position:e="top-right",...r},t){let o=C({position:e,factory:()=>new so(r)});return io(t,()=>o),null}));a();import{ScaleControl as lo}from"maplibre-gl";import{memo as co,forwardRef as uo,useImperativeHandle as mo}from"react";var fo=co(uo(function({position:e="bottom-left",...r},t){let o=C({position:e,factory:()=>new lo(r)});return mo(t,()=>o),null}));a();import{TerrainControl as vo}from"maplibre-gl";import{memo as Mo,forwardRef as yo,useImperativeHandle as go}from"react";var ho=Mo(yo(function({position:e="top-right",...r},t){let o=C({position:e,factory:()=>new vo(r)});return go(t,()=>o),null}));a();a();import{useCallback as Eo,useRef as Oe}from"react";var Co=()=>{let n=Oe(null),e=Oe(null),r=Eo(t=>{n.current=t,e.current=t?.getCanvasContainer()},[]);return{mapRef:n,canvasRef:e,setMapAndCanvasRef:r}};a();import{useRef as ko}from"react";var Ro=()=>{let n=E();return ko(n.getCanvasContainer())};a();export{Pt as ContextMenuEventDispatcher,Z as GradientMarker,Se as MapLibreReactLogo,F as MapManager,wt as MrcLogoControl,jt as RAttributionControl,Ut as RFullscreenControl,Yt as RGeolocateControl,be as RGradientMarker,Me as RLayer,ro as RLogoControl,le as RMap,fe as RMarker,po as RNavigationControl,ve as RPopup,fo as RScaleControl,ye as RSource,ge as RTerrain,ho as RTerrainControl,_o as areCoordsClose,To as areLngLatClose,ae as arePointsEqual,D as deepEqual,Io as emptyStyle,ne as filterMapProps,No as lngLatClassToObj,S as mapLibreContext,wo as markerPopupOffset,A as prepareEventDep,G as transformPropsToOptions,H as updateClassNames,ie as updateListeners,Ro as useCanvasRef,C as useControl,E as useMap,Co as useMapAndCanvasRefs,X as useRControl};

11

package.json
{
"name": "maplibre-react-components",
"version": "0.0.7",
"version": "0.1.0",
"description": "React components for MapLibre GL JS",

@@ -10,8 +10,8 @@ "keywords": [

"author": "Hugues Tavernier",
"license": "ISC",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/lhapaipai/lonlat.git"
"url": "https://github.com/lhapaipai/maplibre-react-components.git"
},
"homepage": "https://github.com/lhapaipai/lonlat/tree/main/packages/maplibre-react-components",
"homepage": "https://maplibre-react-components.pentatrion.com",
"type": "module",

@@ -35,2 +35,5 @@ "dependencies": {

},
"volta": {
"node": "20.14.0"
},
"main": "index.js",

@@ -37,0 +40,0 @@ "types": "index.d.ts",

24

README.md

@@ -1,24 +0,6 @@

<p align="center">
<img width="128" src="https://raw.githubusercontent.com/lhapaipai/lonlat/main/packages/pentatrion-design/images/logo.svg" alt="Lonlat logo">
</p>
# MapLibre React Components
# Import alias
<a href="https://maplibre-react-components.pentatrion.com">
<img src="https://raw.githubusercontent.com/lhapaipai/maplibre-react-components/main/screenshot.png" alt="MapLibre React components" />
</a>
n'utiliser l'alias d'import que pour les tests ?
# Tests
on utilise jsdom@^22 et canvas@~2.10.0
car les versions supérieures de jsdom requièrent canvas 2.11.4 qui entraine une erreur pnpm
```console
ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command was killed with SIGBUS (Bus error due to misaligned, non-existing address or paging error): vitest src/components/RMap.test.ts
```
## Questions
est-ce que cela vaut la peine de memoiser RMap alors que de toute façon il aura des enfants et la props `children` sera différente à chaque rendu ce qui entrainera un re rendu de RMap.
chunk-6D4LQKRK.js
fontello.css

Sorry, the diff of this file is not supported yet

style.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc