vue3-maplibre-gl
Version:
Vue 3 components and composables for MapLibre GL JS - Build interactive maps with ease
5,813 lines • 166 kB
JavaScript
import { ref, computed, unref, watchEffect, onUnmounted, watch, shallowRef, effectScope, onScopeDispose, onMounted, nextTick } from "vue";
import { Map as Map$1, getVersion, Popup, Marker, GeolocateControl } from "maplibre-gl";
import { M as MapCreationStatus } from "./components-DEq_E09C.js";
var BoundsStatus = /* @__PURE__ */ ((BoundsStatus2) => {
BoundsStatus2["NotSet"] = "not-set";
BoundsStatus2["Setting"] = "setting";
BoundsStatus2["Set"] = "set";
BoundsStatus2["Error"] = "error";
return BoundsStatus2;
})(BoundsStatus || {});
function useFitBounds(props) {
const { logError } = useLogger(props.debug ?? false);
const bounds = ref();
const boundsOptions = ref(props.options);
const boundsStatus = ref(
"not-set"
/* NotSet */
);
const mapInstance = computed(() => unref(props.map));
const isBoundsSet = computed(
() => boundsStatus.value === "set"
/* Set */
);
function validateBoundsOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function validateBounds(boundsVal) {
if (!boundsVal) return false;
if (Array.isArray(boundsVal)) {
if (boundsVal.length !== 4 && boundsVal.length !== 2) {
return false;
}
}
return true;
}
function getCurrentBounds() {
const map = mapInstance.value;
if (!map) return null;
try {
return map.getBounds();
} catch (error) {
logError("Error getting current bounds:", error);
return null;
}
}
function setFitBounds(boundsVal, options) {
if (!validateBoundsOperation() || !validateBounds(boundsVal)) {
boundsStatus.value = "error";
return;
}
const map = mapInstance.value;
boundsStatus.value = "setting";
try {
bounds.value = boundsVal;
if (options) boundsOptions.value = options;
map.fitBounds(boundsVal, boundsOptions.value);
boundsStatus.value = "set";
} catch (error) {
boundsStatus.value = "error";
logError("Error setting map bounds:", error, { bounds: boundsVal });
}
}
function clearBounds() {
bounds.value = void 0;
boundsStatus.value = "not-set";
}
watchEffect(() => {
const map = mapInstance.value;
if (map && bounds.value && boundsStatus.value !== "setting") {
setFitBounds(bounds.value, boundsOptions.value);
}
});
return {
setFitBounds,
clearBounds,
getCurrentBounds,
bounds: bounds.value,
boundsStatus: boundsStatus.value,
isBoundsSet: isBoundsSet.value
};
}
function useCameraForBounds(props) {
var _a;
const { log } = useLogger(props.debug ?? false);
const bbox = ref((_a = props.options) == null ? void 0 : _a.bounds);
const cameraOptions = ref(
props.options
);
const cameraStatus = ref(
"not-set"
/* NotSet */
);
const mapInstance = computed(() => unref(props.map));
const isCameraSet = computed(
() => cameraStatus.value === "set"
/* Set */
);
function validateCameraOperation() {
const map = mapInstance.value;
if (!map) {
log("Cannot perform camera operation: map instance not available");
return false;
}
return true;
}
function getCurrentBounds() {
const map = mapInstance.value;
if (!map) {
log("Cannot get current bounds: map instance not available");
return null;
}
try {
return map.getBounds();
} catch (error) {
log("Error getting current bounds:", error);
return null;
}
}
function cameraForBounds(boundsVal, options) {
if (!validateCameraOperation()) {
cameraStatus.value = "error";
return;
}
if (!boundsVal) {
log("Invalid bounds for camera: bounds value is null or undefined");
cameraStatus.value = "error";
return;
}
const map = mapInstance.value;
cameraStatus.value = "setting";
try {
bbox.value = boundsVal;
if (options) cameraOptions.value = options;
log("Setting camera for bounds", { bounds: boundsVal, options });
map.cameraForBounds(boundsVal, cameraOptions.value);
cameraStatus.value = "set";
log("Camera for bounds set successfully");
} catch (error) {
cameraStatus.value = "error";
log("Error setting camera for bounds:", error, { bounds: boundsVal });
}
}
function clearCamera() {
bbox.value = void 0;
cameraStatus.value = "not-set";
log("Camera bounds cleared");
}
watchEffect(() => {
const map = mapInstance.value;
if (map && bbox.value && cameraStatus.value !== "setting") {
cameraForBounds(bbox.value, cameraOptions.value);
}
});
return {
cameraForBounds,
clearCamera,
getCurrentBounds,
bbox: bbox.value,
cameraStatus: cameraStatus.value,
isCameraSet: isCameraSet.value
};
}
function useLogger(debug = false) {
const log = (...args) => {
if (debug) console.log(...args);
};
const logWarn = (...args) => {
if (debug) console.warn(...args);
};
const logError = (...args) => {
if (debug) console.error(...args);
};
return { log, logWarn, logError };
}
function useDebounce(func, options = {}) {
const {
delay = 300,
leading = false,
trailing = true,
maxWait,
debug = false
} = options;
const { log, logError } = useLogger(debug);
let timeoutId;
let maxTimeoutId;
let lastCallTime;
let lastInvokeTime = 0;
let lastArgs;
let result;
function invokeFunc(time) {
const args = lastArgs;
lastArgs = void 0;
lastInvokeTime = time;
try {
result = func(...args);
if (debug) {
log("Debounced function executed", { time, delay });
}
return result;
} catch (error) {
logError("Error in debounced function:", error);
throw error;
}
}
function shouldInvoke(time) {
const timeSinceLastCall = time - (lastCallTime || 0);
const timeSinceLastInvoke = time - lastInvokeTime;
return lastCallTime === void 0 || timeSinceLastCall >= delay || timeSinceLastCall < 0 || maxWait !== void 0 && timeSinceLastInvoke >= maxWait;
}
function timerExpired() {
const time = Date.now();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
timeoutId = window.setTimeout(
timerExpired,
delay - (time - (lastCallTime || 0))
);
}
function trailingEdge(time) {
timeoutId = void 0;
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = void 0;
return result;
}
function leadingEdge(time) {
lastInvokeTime = time;
timeoutId = window.setTimeout(timerExpired, delay);
return leading ? invokeFunc(time) : result;
}
function cancel() {
if (timeoutId !== void 0) {
clearTimeout(timeoutId);
}
if (maxTimeoutId !== void 0) {
clearTimeout(maxTimeoutId);
}
lastInvokeTime = 0;
lastCallTime = void 0;
lastArgs = void 0;
timeoutId = void 0;
maxTimeoutId = void 0;
}
function flush() {
return timeoutId === void 0 ? result : trailingEdge(Date.now());
}
function pending() {
return timeoutId !== void 0;
}
function debounced(...args) {
const time = Date.now();
const isInvoking = shouldInvoke(time);
lastArgs = args;
lastCallTime = time;
if (isInvoking) {
if (timeoutId === void 0) {
leadingEdge(lastCallTime);
} else if (maxWait !== void 0) {
timeoutId = window.setTimeout(timerExpired, delay);
maxTimeoutId = window.setTimeout(() => {
if (lastArgs) {
invokeFunc(Date.now());
}
}, maxWait);
if (leading) {
invokeFunc(lastCallTime);
}
}
} else if (timeoutId === void 0) {
timeoutId = window.setTimeout(timerExpired, delay);
}
}
onUnmounted(cancel);
debounced.cancel = cancel;
debounced.flush = flush;
debounced.pending = pending;
return debounced;
}
function useDebouncedWatch(source, callback, options = {}) {
const { immediate, deep, flush, ...debounceOptions } = options;
const debouncedCallback = useDebounce(callback, debounceOptions);
const stopWatcher = watch(
source,
(newValue, oldValue) => {
debouncedCallback(newValue, oldValue);
},
{
immediate,
deep,
flush
}
);
return () => {
stopWatcher();
debouncedCallback.cancel();
};
}
function useDebouncedRef(initialValue, delay = 300) {
const immediateRef = ref(initialValue);
const debouncedRef = ref(initialValue);
const updateDebounced = useDebounce(
(value) => {
debouncedRef.value = value;
},
{ delay }
);
watch(
immediateRef,
(newValue) => {
updateDebounced(newValue);
},
{ immediate: false }
);
return [
debouncedRef,
immediateRef,
updateDebounced.flush,
updateDebounced.cancel
];
}
var EaseStatus = /* @__PURE__ */ ((EaseStatus2) => {
EaseStatus2["NotStarted"] = "not-started";
EaseStatus2["Easing"] = "easing";
EaseStatus2["Completed"] = "completed";
EaseStatus2["Error"] = "error";
return EaseStatus2;
})(EaseStatus || {});
function useEaseTo(props) {
const { logError, logWarn } = useLogger(props.debug ?? false);
const easeOptions = ref(props.options);
const easeStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isEasing = computed(
() => easeStatus.value === "easing"
/* Easing */
);
function validateEaseOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function validateEaseOptions(options) {
if (!options || typeof options !== "object") return false;
if (options.zoom !== void 0 && (options.zoom < 0 || options.zoom > 24)) {
logWarn("Warning: Zoom level should be between 0 and 24", {
zoom: options.zoom
});
}
if (options.bearing !== void 0 && (options.bearing < -180 || options.bearing > 180)) {
logWarn("Warning: Bearing should be between -180 and 180 degrees", {
bearing: options.bearing
});
}
if (options.pitch !== void 0 && (options.pitch < 0 || options.pitch > 60)) {
logWarn("Warning: Pitch should be between 0 and 60 degrees", {
pitch: options.pitch
});
}
return true;
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera state:", error);
return null;
}
}
function easeTo(options) {
return new Promise((resolve, reject) => {
if (!validateEaseOperation()) {
reject(new Error("Map instance not available"));
return;
}
const finalOptions = options || easeOptions.value;
if (!finalOptions) {
reject(new Error("No ease options provided"));
return;
}
if (!validateEaseOptions(finalOptions)) {
easeStatus.value = "error";
reject(new Error("Invalid ease options"));
return;
}
const map = mapInstance.value;
easeStatus.value = "easing";
try {
if (options) easeOptions.value = options;
const onMoveEnd = () => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
easeStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
easeStatus.value = "error";
reject(error);
};
map.once("moveend", onMoveEnd);
map.once("error", onError);
map.easeTo(finalOptions);
} catch (error) {
easeStatus.value = "error";
logError("Error starting ease-to animation:", error);
reject(error);
}
});
}
function easeToCenter(center, options) {
return easeTo({ ...options, center });
}
function easeToZoom(zoom, options) {
return easeTo({ ...options, zoom });
}
function easeToBearing(bearing, options) {
return easeTo({ ...options, bearing });
}
function easeToPitch(pitch, options) {
return easeTo({ ...options, pitch });
}
function stopEasing() {
const map = mapInstance.value;
if (!map) return;
try {
map.stop();
easeStatus.value = "completed";
} catch (error) {
logError("Error stopping easing animation:", error);
}
}
watchEffect(() => {
const map = mapInstance.value;
if (map && easeOptions.value && easeStatus.value === "not-started") {
easeTo(easeOptions.value).catch((error) => {
logError("Error in watchEffect easeTo:", error);
});
}
});
return {
easeTo,
easeToCenter,
easeToZoom,
easeToBearing,
easeToPitch,
stopEasing,
getCurrentCamera,
easeStatus: easeStatus.value,
isEasing: isEasing.value
};
}
var FitScreenCoordinatesStatus = /* @__PURE__ */ ((FitScreenCoordinatesStatus2) => {
FitScreenCoordinatesStatus2["NotSet"] = "not-set";
FitScreenCoordinatesStatus2["Setting"] = "setting";
FitScreenCoordinatesStatus2["Set"] = "set";
FitScreenCoordinatesStatus2["Error"] = "error";
return FitScreenCoordinatesStatus2;
})(FitScreenCoordinatesStatus || {});
function useFitScreenCoordinates(propsOrMap) {
const props = "map" in propsOrMap || typeof propsOrMap === "object" && propsOrMap !== null && !("value" in propsOrMap) ? propsOrMap : { map: propsOrMap };
const {
debug = false,
autoCleanup = true,
defaultOptions,
defaultBearing
} = props;
const { logError, logWarn } = useLogger(debug);
const p0 = ref();
const p1 = ref();
const options = ref(defaultOptions);
const bearing = ref(defaultBearing);
const status = ref(
"not-set"
/* NotSet */
);
const mapInstance = computed(() => unref(props.map));
const isCoordinatesSet = computed(() => !!(p0.value && p1.value));
const isFitting = computed(
() => status.value === "setting"
/* Setting */
);
const hasError = computed(
() => status.value === "error"
/* Error */
);
function validateOperation() {
const map = mapInstance.value;
if (!map) {
logWarn("Map instance not available for screen coordinates operation");
return false;
}
if (!map.isStyleLoaded()) {
logWarn("Map style not loaded, deferring screen coordinates operation");
return false;
}
return true;
}
function validateCoordinates(p0Val, p1Val) {
if (!p0Val || !p1Val) {
logError("Invalid screen coordinates: both p0 and p1 are required");
return false;
}
const validatePoint = (point) => {
if (Array.isArray(point)) {
return point.length === 2 && typeof point[0] === "number" && typeof point[1] === "number";
}
if (typeof point === "object" && point !== null) {
return "x" in point && "y" in point && typeof point.x === "number" && typeof point.y === "number";
}
return false;
};
if (!validatePoint(p0Val) || !validatePoint(p1Val)) {
logError(
"Invalid point format: points must be [x, y] arrays or {x, y} objects"
);
return false;
}
return true;
}
function getCurrentBearing() {
const map = mapInstance.value;
if (!map) return null;
try {
return map.getBearing();
} catch (error) {
logError("Error getting current bearing:", error);
return null;
}
}
function fitScreenCoordinates(p0Val, p1Val, optionsVal, bearingVal) {
if (!validateOperation() || !validateCoordinates(p0Val, p1Val)) {
status.value = "error";
return;
}
const map = mapInstance.value;
status.value = "setting";
try {
p0.value = p0Val;
p1.value = p1Val;
if (optionsVal !== void 0) options.value = optionsVal;
if (bearingVal !== void 0) bearing.value = bearingVal;
const finalBearing = bearing.value ?? getCurrentBearing() ?? 0;
map.fitScreenCoordinates(p0Val, p1Val, finalBearing, options.value);
status.value = "set";
} catch (error) {
status.value = "error";
logError("Error fitting screen coordinates:", error, {
p0: p0Val,
p1: p1Val,
bearing: bearingVal,
options: optionsVal
});
}
}
function clearCoordinates() {
p0.value = void 0;
p1.value = void 0;
options.value = defaultOptions;
bearing.value = defaultBearing;
status.value = "not-set";
}
watchEffect(() => {
const map = mapInstance.value;
if (map && p0.value && p1.value && status.value !== "setting") {
try {
if (!map.isStyleLoaded()) {
const onStyleLoad = () => {
map.off("styledata", onStyleLoad);
fitScreenCoordinates(
p0.value,
p1.value,
options.value,
bearing.value
);
};
map.on("styledata", onStyleLoad);
return;
}
const finalBearing = bearing.value ?? getCurrentBearing() ?? 0;
map.fitScreenCoordinates(
p0.value,
p1.value,
finalBearing,
options.value
);
status.value = "set";
} catch (error) {
status.value = "error";
logError("Error in watchEffect for screen coordinates:", error);
}
}
});
function cleanup() {
if (autoCleanup) {
clearCoordinates();
}
}
onUnmounted(cleanup);
return {
fitScreenCoordinates,
clearCoordinates,
status: status.value,
isCoordinatesSet: isCoordinatesSet.value,
isFitting: isFitting.value,
hasError: hasError.value
};
}
var FlyStatus = /* @__PURE__ */ ((FlyStatus2) => {
FlyStatus2["NotStarted"] = "not-started";
FlyStatus2["Flying"] = "flying";
FlyStatus2["Completed"] = "completed";
FlyStatus2["Error"] = "error";
return FlyStatus2;
})(FlyStatus || {});
function useFlyTo(props) {
const { logWarn, logError } = useLogger(props.debug ?? false);
const flyOptions = ref(props.options);
const flyStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isFlying = computed(
() => flyStatus.value === "flying"
/* Flying */
);
function validateFlyOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function validateFlyOptions(options) {
if (!options || typeof options !== "object") return false;
if (options.zoom !== void 0 && (options.zoom < 0 || options.zoom > 24)) {
logWarn("Warning: Zoom level should be between 0 and 24", {
zoom: options.zoom
});
}
if (options.bearing !== void 0 && (options.bearing < -180 || options.bearing > 180)) {
logWarn("Warning: Bearing should be between -180 and 180 degrees", {
bearing: options.bearing
});
}
if (options.pitch !== void 0 && (options.pitch < 0 || options.pitch > 60)) {
logWarn("Warning: Pitch should be between 0 and 60 degrees", {
pitch: options.pitch
});
}
if (options.speed !== void 0 && options.speed <= 0) {
logWarn("Warning: Speed should be greater than 0", {
speed: options.speed
});
}
if (options.curve !== void 0 && options.curve < 0) {
logWarn("Warning: Curve should be non-negative", {
curve: options.curve
});
}
return true;
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera state:", error);
return null;
}
}
function flyTo(options) {
return new Promise((resolve, reject) => {
if (!validateFlyOperation()) {
reject(new Error("Map instance not available"));
return;
}
const finalOptions = options || flyOptions.value;
if (!finalOptions) {
reject(new Error("No fly options provided"));
return;
}
if (!validateFlyOptions(finalOptions)) {
flyStatus.value = "error";
reject(new Error("Invalid fly options"));
return;
}
const map = mapInstance.value;
flyStatus.value = "flying";
try {
if (options) flyOptions.value = options;
const onMoveEnd = () => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
flyStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
flyStatus.value = "error";
reject(error);
};
map.once("moveend", onMoveEnd);
map.once("error", onError);
map.flyTo(finalOptions);
} catch (error) {
flyStatus.value = "error";
logError("Error starting fly-to animation:", error);
reject(error);
}
});
}
function flyToCenter(center, options) {
return flyTo({ ...options, center });
}
function flyToZoom(zoom, options) {
return flyTo({ ...options, zoom });
}
function flyToBearing(bearing, options) {
return flyTo({ ...options, bearing });
}
function flyToPitch(pitch, options) {
return flyTo({ ...options, pitch });
}
function stopFlying() {
const map = mapInstance.value;
if (!map) return;
try {
map.stop();
flyStatus.value = "completed";
} catch (error) {
logError("Error stopping flying animation:", error);
}
}
const stopWatchEffect = watchEffect(() => {
const map = mapInstance.value;
if (map && flyOptions.value && flyStatus.value === "not-started") {
flyTo(flyOptions.value).catch((error) => {
logError("Error in watchEffect flyTo:", error);
});
}
});
function cleanup() {
try {
stopFlying();
stopWatchEffect();
flyOptions.value = void 0;
flyStatus.value = "not-started";
} catch (error) {
logError("Error during useFlyTo cleanup:", error);
}
}
onUnmounted(cleanup);
return {
flyTo,
flyToCenter,
flyToZoom,
flyToBearing,
flyToPitch,
stopFlying,
getCurrentCamera,
flyStatus: flyStatus.value,
isFlying: isFlying.value,
cleanup
// Expose cleanup for manual use
};
}
var JumpStatus = /* @__PURE__ */ ((JumpStatus2) => {
JumpStatus2["NotStarted"] = "not-started";
JumpStatus2["Jumping"] = "jumping";
JumpStatus2["Completed"] = "completed";
JumpStatus2["Error"] = "error";
return JumpStatus2;
})(JumpStatus || {});
function useJumpTo(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
options: legacyOptions,
debug: false,
autoJump: true
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const jumpOptions = ref(props.options);
const jumpStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isJumping = computed(
() => jumpStatus.value === "jumping"
/* Jumping */
);
function validateJumpOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function validateJumpOptions(options) {
if (!options) return false;
if (options.center) {
if (Array.isArray(options.center)) {
if (options.center.length !== 2) {
return false;
}
const [lng, lat] = options.center;
if (typeof lng !== "number" || typeof lat !== "number") {
return false;
}
if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
return false;
}
}
}
if (options.zoom !== void 0) {
if (typeof options.zoom !== "number" || options.zoom < 0 || options.zoom > 24) {
return false;
}
}
if (options.bearing !== void 0) {
if (typeof options.bearing !== "number") {
return false;
}
}
if (options.pitch !== void 0) {
if (typeof options.pitch !== "number" || options.pitch < 0 || options.pitch > 60) {
return false;
}
}
return true;
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera:", error);
return null;
}
}
function jumpTo(options) {
if (!validateJumpOperation()) return;
const finalOptions = options || jumpOptions.value;
if (!finalOptions) return;
if (!validateJumpOptions(finalOptions)) {
jumpStatus.value = "error";
return;
}
const map = mapInstance.value;
jumpStatus.value = "jumping";
try {
if (options) jumpOptions.value = options;
map.jumpTo(finalOptions);
jumpStatus.value = "completed";
} catch (error) {
jumpStatus.value = "error";
logError("Error performing jump-to operation:", error);
}
}
function jumpToCenter(center, options) {
jumpTo({ ...options, center });
}
function jumpToZoom(zoom, options) {
jumpTo({ ...options, zoom });
}
function jumpToBearing(bearing, options) {
jumpTo({ ...options, bearing });
}
function jumpToPitch(pitch, options) {
jumpTo({ ...options, pitch });
}
watchEffect(() => {
const map = mapInstance.value;
if (map && jumpOptions.value && props.autoJump !== false && jumpStatus.value === "not-started") {
jumpTo(jumpOptions.value);
}
});
function cleanup() {
jumpStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { jumpTo };
}
return {
jumpTo,
jumpToCenter,
jumpToZoom,
jumpToBearing,
jumpToPitch,
getCurrentCamera,
validateJumpOptions,
jumpStatus: jumpStatus.value,
isJumping: isJumping.value
};
}
function useOptimizedComputed(getter, options = {}) {
const { deepEqual = false, equalityFn, cacheDuration } = options;
const lastValue = ref();
const lastComputedTime = ref(0);
const hasInitialValue = ref(false);
function defaultEqualityFn(a, b) {
if (deepEqual) {
return JSON.stringify(a) === JSON.stringify(b);
}
return Object.is(a, b);
}
const isEqual = equalityFn || defaultEqualityFn;
return computed(() => {
const now = Date.now();
if (cacheDuration && hasInitialValue.value) {
const timeSinceLastCompute = now - lastComputedTime.value;
if (timeSinceLastCompute < cacheDuration) {
return lastValue.value;
}
}
const newValue = getter();
if (hasInitialValue.value && isEqual(newValue, lastValue.value)) {
return lastValue.value;
}
lastValue.value = newValue;
lastComputedTime.value = now;
hasInitialValue.value = true;
return newValue;
});
}
function useMemoized(fn, keyFn = (...args) => JSON.stringify(args), maxCacheSize = 100) {
const cache = /* @__PURE__ */ new Map();
return (...args) => {
const key = keyFn(...args);
const cached = cache.get(key);
if (cached) {
return cached.value;
}
const result = fn(...args);
if (cache.size >= maxCacheSize) {
const oldestKey = cache.keys().next().value;
if (oldestKey !== void 0) {
cache.delete(oldestKey);
}
}
cache.set(key, { value: result, timestamp: Date.now() });
return result;
};
}
function useThrottledComputed(getter, threshold = 0.01, debounceMs = 100) {
const lastValue = ref();
const timeoutId = ref();
return computed(() => {
const newValue = getter();
if (lastValue.value !== void 0) {
const change = Math.abs(newValue - lastValue.value);
if (change < threshold) {
return lastValue.value;
}
}
if (timeoutId.value) {
clearTimeout(timeoutId.value);
}
timeoutId.value = window.setTimeout(() => {
lastValue.value = newValue;
}, debounceMs);
return newValue;
});
}
function useComputedWithCleanup(getter, cleanup) {
const lastValue = ref();
return computed(() => {
const newValue = getter();
if (lastValue.value !== void 0 && lastValue.value !== newValue) {
try {
cleanup(lastValue.value);
} catch (error) {
console.warn("Error during computed cleanup:", error);
}
}
lastValue.value = newValue;
return newValue;
});
}
function useBatchedComputed(getter, batchSize = 5, batchDelay = 16) {
const pendingUpdates = ref([]);
const lastValue = ref();
const timeoutId = ref();
function processBatch() {
if (pendingUpdates.value.length > 0) {
const latestValue = pendingUpdates.value[pendingUpdates.value.length - 1];
lastValue.value = latestValue;
pendingUpdates.value = [];
}
}
return computed(() => {
const newValue = getter();
pendingUpdates.value.push(newValue);
if (pendingUpdates.value.length >= batchSize) {
processBatch();
return lastValue.value;
}
if (timeoutId.value) {
clearTimeout(timeoutId.value);
}
timeoutId.value = window.setTimeout(processBatch, batchDelay);
return lastValue.value !== void 0 ? lastValue.value : newValue;
});
}
var PanStatus = /* @__PURE__ */ ((PanStatus2) => {
PanStatus2["NotStarted"] = "not-started";
PanStatus2["Panning"] = "panning";
PanStatus2["Completed"] = "completed";
PanStatus2["Error"] = "error";
return PanStatus2;
})(PanStatus || {});
function usePanBy(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
offset: legacyOptions == null ? void 0 : legacyOptions.offset,
options: legacyOptions,
debug: false,
autoPan: true
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const offset = ref(props.offset);
const animationOptions = ref(props.options);
const panStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isPanning = computed(
() => panStatus.value === "panning"
/* Panning */
);
function validatePanOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function validatePanOffset(offset2) {
if (!offset2) return false;
if (Array.isArray(offset2)) {
if (offset2.length !== 2) {
return false;
}
const [x, y] = offset2;
if (typeof x !== "number" || typeof y !== "number") {
return false;
}
} else if (typeof offset2 === "object") {
if (typeof offset2.x !== "number" || typeof offset2.y !== "number") {
return false;
}
} else {
return false;
}
return true;
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera:", error);
return null;
}
}
function panBy(offsetVal, options) {
return new Promise((resolve, reject) => {
if (!validatePanOperation()) {
reject(new Error("Map instance not available"));
return;
}
if (!validatePanOffset(offsetVal)) {
panStatus.value = "error";
reject(new Error("Invalid pan offset"));
return;
}
const map = mapInstance.value;
const finalOptions = options || animationOptions.value;
panStatus.value = "panning";
try {
offset.value = offsetVal;
if (options) animationOptions.value = options;
if (finalOptions) {
const onMoveEnd = () => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
panStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
panStatus.value = "error";
reject(error);
};
map.once("moveend", onMoveEnd);
map.once("error", onError);
map.panBy(offsetVal, finalOptions);
} else {
map.panBy(offsetVal);
panStatus.value = "completed";
resolve();
}
} catch (error) {
panStatus.value = "error";
logError("Error performing pan-by operation:", error);
reject(error);
}
});
}
function stopPanning() {
const map = mapInstance.value;
if (!map) return;
try {
map.stop();
panStatus.value = "completed";
} catch (error) {
logError("Error stopping panning animation:", error);
}
}
function legacyPanBy(offsetVal, options) {
panBy(offsetVal, options).catch((error) => {
logError("Error in legacy panBy:", error);
});
}
watchEffect(() => {
const map = mapInstance.value;
if (map && offset.value && props.autoPan !== false && panStatus.value === "not-started") {
panBy(offset.value, animationOptions.value).catch((error) => {
logError("Error in watchEffect panBy:", error);
});
}
});
function cleanup() {
panStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { panBy: legacyPanBy };
}
return {
panBy,
stopPanning,
getCurrentCamera,
validatePanOffset,
panStatus: panStatus.value,
isPanning: isPanning.value
};
}
function usePanTo(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
lnglat: legacyOptions == null ? void 0 : legacyOptions.lnglat,
options: legacyOptions,
debug: false,
autoPan: true
} : mapOrProps;
const { log } = useLogger(props.debug ?? false);
const lnglat = ref(props.lnglat);
const animationOptions = ref(props.options);
const panStatus = ref(
"not-started"
/* NotStarted */
);
const panCount = ref(0);
const mapInstance = computed(() => unref(props.map));
const isPanning = computed(
() => panStatus.value === "panning"
/* Panning */
);
function validatePanOperation() {
const map = mapInstance.value;
if (!map) {
log("Cannot perform pan operation: map instance not available");
return false;
}
return true;
}
function validatePanTarget(lnglat2) {
if (!lnglat2) {
log("Invalid pan target: coordinates are null or undefined");
return false;
}
if (Array.isArray(lnglat2)) {
if (lnglat2.length !== 2) {
log("Invalid pan target: array must have exactly 2 elements", {
lnglat: lnglat2
});
return false;
}
const [lng, lat] = lnglat2;
if (typeof lng !== "number" || typeof lat !== "number") {
log("Invalid pan target: coordinates must be numbers", { lnglat: lnglat2 });
return false;
}
if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
log("Invalid pan target: coordinates out of valid range", { lnglat: lnglat2 });
return false;
}
} else if (typeof lnglat2 === "object") {
const hasLngLat = "lng" in lnglat2 && "lat" in lnglat2;
const hasLonLat = "lon" in lnglat2 && "lat" in lnglat2;
if (hasLngLat) {
const obj = lnglat2;
if (typeof obj.lng !== "number" || typeof obj.lat !== "number") {
log("Invalid pan target: lng and lat must be numbers", { lnglat: lnglat2 });
return false;
}
if (obj.lng < -180 || obj.lng > 180 || obj.lat < -90 || obj.lat > 90) {
log("Invalid pan target: coordinates out of valid range", { lnglat: lnglat2 });
return false;
}
} else if (hasLonLat) {
const obj = lnglat2;
if (typeof obj.lon !== "number" || typeof obj.lat !== "number") {
log("Invalid pan target: lon and lat must be numbers", { lnglat: lnglat2 });
return false;
}
if (obj.lon < -180 || obj.lon > 180 || obj.lat < -90 || obj.lat > 90) {
log("Invalid pan target: coordinates out of valid range", { lnglat: lnglat2 });
return false;
}
} else {
log(
"Invalid pan target: object must have lng,lat or lon,lat properties",
{ lnglat: lnglat2 }
);
return false;
}
} else {
log(
"Invalid pan target: must be array or object with lng,lat properties",
{ lnglat: lnglat2 }
);
return false;
}
return true;
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) {
log("Cannot get camera: map instance not available");
return null;
}
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
log("Error getting current camera:", error);
return null;
}
}
function panTo(lnglatVal, options) {
return new Promise((resolve, reject) => {
if (!validatePanOperation()) {
reject(new Error("Map instance not available"));
return;
}
if (!validatePanTarget(lnglatVal)) {
panStatus.value = "error";
reject(new Error("Invalid pan target coordinates"));
return;
}
const map = mapInstance.value;
const finalOptions = options || animationOptions.value;
panStatus.value = "panning";
try {
lnglat.value = lnglatVal;
if (options) animationOptions.value = options;
panCount.value++;
log("Performing pan-to operation", {
lnglat: lnglatVal,
options: finalOptions,
panCount: panCount.value
});
if (finalOptions) {
const onMoveEnd = () => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
panStatus.value = "completed";
log("Pan-to animation completed successfully");
resolve();
};
const onError = (error) => {
map.off("moveend", onMoveEnd);
map.off("error", onError);
panStatus.value = "error";
log("Error during pan-to animation:", error);
reject(error);
};
map.once("moveend", onMoveEnd);
map.once("error", onError);
map.panTo(lnglatVal, finalOptions);
} else {
map.panTo(lnglatVal);
panStatus.value = "completed";
log("Pan-to operation completed immediately");
resolve();
}
} catch (error) {
panStatus.value = "error";
log("Error performing pan-to operation:", error);
reject(error);
}
});
}
function stopPanning() {
const map = mapInstance.value;
if (!map) {
log("Cannot stop panning: map instance not available");
return;
}
try {
map.stop();
panStatus.value = "completed";
log("Panning animation stopped");
} catch (error) {
log("Error stopping panning animation:", error);
}
}
function legacyPanTo(lnglatVal, options) {
panTo(lnglatVal, options).catch((error) => {
log("Error in legacy panTo:", error);
});
}
watchEffect(() => {
const map = mapInstance.value;
if (map && lnglat.value && props.autoPan !== false && panStatus.value === "not-started") {
panTo(lnglat.value, animationOptions.value).catch((error) => {
log("Error in watchEffect panTo:", error);
});
}
});
function cleanup() {
log("Cleaning up pan-to composable");
panStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { panTo: legacyPanTo };
}
return {
panTo,
stopPanning,
getCurrentCamera,
validatePanTarget,
panStatus: panStatus.value,
isPanning: isPanning.value
};
}
var RotationStatus = /* @__PURE__ */ ((RotationStatus2) => {
RotationStatus2["NotStarted"] = "not-started";
RotationStatus2["Rotating"] = "rotating";
RotationStatus2["Completed"] = "completed";
RotationStatus2["Error"] = "error";
return RotationStatus2;
})(RotationStatus || {});
function useRotateTo(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
bearing: legacyOptions == null ? void 0 : legacyOptions.bearing,
options: legacyOptions,
debug: false,
autoRotate: true
} : mapOrProps;
const { logError, logWarn } = useLogger(props.debug ?? false);
const bearing = ref(props.bearing);
const animationOptions = ref(props.options);
const rotationStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isRotating = computed(
() => rotationStatus.value === "rotating"
/* Rotating */
);
function validateRotationOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function validateBearing(bearing2) {
if (typeof bearing2 !== "number" || isNaN(bearing2)) {
return false;
}
const normalizedBearing = (bearing2 % 360 + 360) % 360;
if (normalizedBearing !== bearing2 && bearing2 < 0) {
logWarn("Warning: Negative bearing will be normalized", {
original: bearing2,
normalized: normalizedBearing
});
}
return true;
}
function getCurrentBearing() {
const map = mapInstance.value;
if (!map) return null;
try {
return map.getBearing();
} catch (error) {
logError("Error getting current bearing:", error);
return null;
}
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera:", error);
return null;
}
}
function rotateTo(bearingVal, options) {
return new Promise((resolve, reject) => {
if (!validateRotationOperation()) {
reject(new Error("Map instance not available"));
return;
}
if (!validateBearing(bearingVal)) {
rotationStatus.value = "error";
reject(new Error("Invalid bearing value"));
return;
}
const map = mapInstance.value;
const finalOptions = options || animationOptions.value;
rotationStatus.value = "rotating";
try {
bearing.value = bearingVal;
if (options) animationOptions.value = options;
if (finalOptions) {
const onRotateEnd = () => {
map.off("rotateend", onRotateEnd);
map.off("error", onError);
rotationStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("rotateend", onRotateEnd);
map.off("error", onError);
rotationStatus.value = "error";
reject(error);
};
map.once("rotateend", onRotateEnd);
map.once("error", onError);
map.rotateTo(bearingVal, finalOptions);
} else {
map.rotateTo(bearingVal);
rotationStatus.value = "completed";
resolve();
}
} catch (error) {
rotationStatus.value = "error";
logError("Error performing rotate-to operation:", error);
reject(error);
}
});
}
function stopRotating() {
const map = mapInstance.value;
if (!map) return;
try {
map.stop();
rotationStatus.value = "completed";
} catch (error) {
logError("Error stopping rotation animation:", error);
}
}
function legacyRotateTo(bearingVal, options) {
rotateTo(bearingVal, options).catch((error) => {
logError("Error in legacy rotateTo:", error);
});
}
watchEffect(() => {
const map = mapInstance.value;
if (map && bearing.value !== void 0 && props.autoRotate !== false && rotationStatus.value === "not-started") {
rotateTo(bearing.value, animationOptions.value).catch((error) => {
logError("Error in watchEffect rotateTo:", error);
});
}
});
function cleanup() {
rotationStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { rotateTo: legacyRotateTo };
}
return {
rotateTo,
stopRotating,
getCurrentBearing,
getCurrentCamera,
validateBearing,
rotationStatus: rotationStatus.value,
isRotating: isRotating.value
};
}
function useResetNorth(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
options: legacyOptions,
debug: false,
autoReset: true
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const animationOptions = ref(props.options);
const rotationStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isRotating = computed(
() => rotationStatus.value === "rotating"
/* Rotating */
);
function validateRotationOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function getCurrentBearing() {
const map = mapInstance.value;
if (!map) return null;
try {
return map.getBearing();
} catch (error) {
logError("Error getting current bearing:", error);
return null;
}
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera:", error);
return null;
}
}
function resetNorth(options) {
return new Promise((resolve, reject) => {
if (!validateRotationOperation()) {
reject(new Error("Map instance not available"));
return;
}
const map = mapInstance.value;
const finalOptions = options || animationOptions.value;
rotationStatus.value = "rotating";
try {
if (options) animationOptions.value = options;
if (finalOptions) {
const onRotateEnd = () => {
map.off("rotateend", onRotateEnd);
map.off("error", onError);
rotationStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("rotateend", onRotateEnd);
map.off("error", onError);
rotationStatus.value = "error";
reject(error);
};
map.once("rotateend", onRotateEnd);
map.once("error", onError);
map.resetNorth(finalOptions);
} else {
map.resetNorth();
rotationStatus.value = "completed";
resolve();
}
} catch (error) {
rotationStatus.value = "error";
logError("Error performing reset-north operation:", error);
reject(error);
}
});
}
function stopRotating() {
const map = mapInstance.value;
if (!map) return;
try {
map.stop();
rotationStatus.value = "completed";
} catch (error) {
logError("Error stopping rotation animation:", error);
}
}
function legacyResetNorth(options) {
resetNorth(options).catch((error) => {
logError("Error in legacy resetNorth:", error);
});
}
watchEffect(() => {
const map = mapInstance.value;
if (map && props.autoReset !== false && rotationStatus.value === "not-started") {
resetNorth(animationOptions.value).catch((error) => {
logError("Error in watchEffect resetNorth:", error);
});
}
});
function cleanup() {
rotationStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { resetNorth: legacyResetNorth };
}
return {
resetNorth,
stopRotating,
getCurrentBearing,
getCurrentCamera,
rotationStatus: rotationStatus.value,
isRotating: isRotating.value
};
}
function useResetNorthPitch(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
options: legacyOptions,
debug: false
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const animationOptions = ref(props.options);
const rotationStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isRotating = computed(
() => rotationStatus.value === "rotating"
/* Rotating */
);
function getCurrentBearing() {
var _a;
try {
return ((_a = mapInstance.value) == null ? void 0 : _a.getBearing()) ?? null;
} catch {
logError("Error getting current bearing");
return null;
}
}
function getCurrentPitch() {
var _a;
try {
return ((_a = mapInstance.value) == null ? void 0 : _a.getPitch()) ?? null;
} catch {
logError("Error getting current pitch");
return null;
}
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch {
logError("Error getting current camera");
return null;
}
}
function resetNorthPitch(options) {
return new Promise((resolve, reject) => {
const map = mapInstance.value;
if (!map) {
reject(new Error("Map instance not available"));
return;
}
try {
rotationStatus.value = "rotating";
const finalOptions = options || animationOptions.value;
if (finalOptions) {
const onComplete = () => {
rotationStatus.value = "completed";
resolve();
};
map.once("moveend", onComplete);
map.resetNorthPitch(finalOptions);
} else {
map.resetNorthPitch();
rotationStatus.value = "completed";
resolve();
}
} catch (error) {
rotationStatus.value = "error";
logError("Error performing reset-north-pitch operation:", error);
reject(error);
}
});
}
function stopRotating() {
var _a;
try {
(_a = mapInstance.value) == null ? void 0 : _a.stop();
rotationStatus.value = "completed";
} catch {
logError("Error stopping rotation animation");
}
}
onUnmounted(() => {
rotationStatus.value = "completed";
});
if (isLegacyAPI) {
return {
resetNorthPitch: (options) => {
resetNorthPitch(options).catch(() => {
logError("Error in legacy resetNorthPitch");
});
}
};
}
return {
resetNorthPitch,
stopRotating,
getCurrentBearing,
getCurrentPitch,
getCurrentCamera,
rotationStatus: rotationStatus.value,
isRotating: isRotating.value
};
}
function useSnapToNorth(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
options: legacyOptions,
debug: false
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const animationOptions = ref(props.options);
const rotationStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isRotating = computed(
() => rotationStatus.value === "rotating"
/* Rotating */
);
function getCurrentBearing() {
var _a;
try {
return ((_a = mapInstance.value) == null ? void 0 : _a.getBearing()) ?? null;
} catch {
logError("Error getting current bearing");
return null;
}
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) return null;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch {
logError("Error getting current camera");
return null;
}
}
function snapToNorth(options) {
return new Promise((resolve, reject) => {
const map = mapInstance.value;
if (!map) {
reject(new Error("Map instance not available"));
return;
}
try {
rotationStatus.value = "rotating";
const finalOptions = options || animationOptions.value;
if (finalOptions) {
const onComplete = () => {
rotationStatus.value = "completed";
resolve();
};
map.once("moveend", onComplete);
map.snapToNorth(finalOptions);
} else {
map.snapToNorth();
rotationStatus.value = "completed";
resolve();
}
} catch (error) {
rotationStatus.value = "error";
logError("Error performing snap-to-north operation:", error);
reject(error);
}
});
}
function stopRotating() {
var _a;
try {
(_a = mapInstance.value) == null ? void 0 : _a.stop();
rotationStatus.value = "completed";
} catch {
logError("Error stopping rotation animation");
}
}
onUnmounted(() => {
rotationStatus.value = "completed";
});
if (isLegacyAPI) {
return {
snapToNorth: (options) => {
snapToNorth(options).catch(() => {
logError("Error in legacy snapToNorth");
});
}
};
}
return {
snapToNorth,
stopRotating,
getCurrentBearing,
getCurrentCamera,
rotationStatus: rotationStatus.value,
isRotating: isRotating.value
};
}
var ZoomStatus = /* @__PURE__ */ ((ZoomStatus2) => {
ZoomStatus2["NotStarted"] = "not-started";
ZoomStatus2["Zooming"] = "zooming";
ZoomStatus2["Completed"] = "completed";
ZoomStatus2["Error"] = "error";
return ZoomStatus2;
})(ZoomStatus || {});
function useZoomTo(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
zoom: legacyOptions == null ? void 0 : legacyOptions.zoom,
options: legacyOptions,
debug: false,
autoZoom: true
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const zoom = ref(props.zoom);
const animationOptions = ref(props.options);
const zoomStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isZooming = computed(
() => zoomStatus.value === "zooming"
/* Zooming */
);
function validateZoomOperation() {
const map = mapInstance.value;
if (!map) {
return false;
}
return true;
}
function validateZoomLevel(zoom2) {
if (typeof zoom2 !== "number" || isNaN(zoom2)) {
return false;
}
if (zoom2 < 0 || zoom2 > 24) {
return false;
}
return true;
}
function getCurrentZoom() {
const map = mapInstance.value;
if (!map) {
return null;
}
try {
return map.getZoom();
} catch (error) {
logError("Error getting current zoom:", error);
return null;
}
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) {
return null;
}
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera:", error);
return null;
}
}
function zoomTo(zoomVal, options) {
return new Promise((resolve, reject) => {
if (!validateZoomOperation()) {
reject(new Error("Map instance not available"));
return;
}
if (!validateZoomLevel(zoomVal)) {
zoomStatus.value = "error";
reject(new Error("Invalid zoom level"));
return;
}
const map = mapInstance.value;
const finalOptions = options || animationOptions.value;
zoomStatus.value = "zooming";
try {
zoom.value = zoomVal;
if (options) animationOptions.value = options;
if (finalOptions) {
const onZoomEnd = () => {
map.off("zoomend", onZoomEnd);
map.off("error", onError);
zoomStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("zoomend", onZoomEnd);
map.off("error", onError);
zoomStatus.value = "error";
reject(error);
};
map.once("zoomend", onZoomEnd);
map.once("error", onError);
map.zoomTo(zoomVal, finalOptions);
} else {
map.zoomTo(zoomVal);
zoomStatus.value = "completed";
resolve();
}
} catch (error) {
zoomStatus.value = "error";
logError("Error performing zoom-to operation:", error);
reject(error);
}
});
}
function stopZooming() {
const map = mapInstance.value;
if (!map) {
return;
}
try {
map.stop();
zoomStatus.value = "completed";
} catch (error) {
logError("Error stopping zoom animation:", error);
}
}
function legacyZoomTo(zoomVal, options) {
zoomTo(zoomVal, options).catch((error) => {
logError("Error in legacy zoomTo:", error);
});
}
watchEffect(() => {
const map = mapInstance.value;
if (map && zoom.value !== void 0 && props.autoZoom !== false && zoomStatus.value === "not-started") {
zoomTo(zoom.value, animationOptions.value).catch((error) => {
logError("Error in watchEffect zoomTo:", error);
});
}
});
function cleanup() {
zoomStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { zoomTo: legacyZoomTo };
}
return {
zoomTo,
stopZooming,
getCurrentZoom,
getCurrentCamera,
validateZoomLevel,
zoomStatus: zoomStatus.value,
isZooming: isZooming.value
};
}
function useZoomIn(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
options: legacyOptions,
debug: false,
autoZoom: true
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const animationOptions = ref(props.options);
const zoomStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isZooming = computed(
() => zoomStatus.value === "zooming"
/* Zooming */
);
function validateZoomOperation() {
const map = mapInstance.value;
if (!map) {
return false;
}
return true;
}
function getCurrentZoom() {
const map = mapInstance.value;
if (!map) {
return null;
}
try {
return map.getZoom();
} catch (error) {
logError("Error getting current zoom:", error);
return null;
}
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) {
return null;
}
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera:", error);
return null;
}
}
function zoomIn(options) {
return new Promise((resolve, reject) => {
if (!validateZoomOperation()) {
reject(new Error("Map instance not available"));
return;
}
const map = mapInstance.value;
const finalOptions = options || animationOptions.value;
zoomStatus.value = "zooming";
try {
if (options) animationOptions.value = options;
if (finalOptions) {
const onZoomEnd = () => {
map.off("zoomend", onZoomEnd);
map.off("error", onError);
zoomStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("zoomend", onZoomEnd);
map.off("error", onError);
zoomStatus.value = "error";
reject(error);
};
map.once("zoomend", onZoomEnd);
map.once("error", onError);
map.zoomIn(finalOptions);
} else {
map.zoomIn();
zoomStatus.value = "completed";
resolve();
}
} catch (error) {
zoomStatus.value = "error";
logError("Error performing zoom-in operation:", error);
reject(error);
}
});
}
function stopZooming() {
const map = mapInstance.value;
if (!map) {
return;
}
try {
map.stop();
zoomStatus.value = "completed";
} catch (error) {
logError("Error stopping zoom animation:", error);
}
}
function legacyZoomIn(options) {
zoomIn(options).catch((error) => {
logError("Error in legacy zoomIn:", error);
});
}
watchEffect(() => {
const map = mapInstance.value;
if (map && props.autoZoom !== false && zoomStatus.value === "not-started") {
zoomIn(animationOptions.value).catch((error) => {
logError("Error in watchEffect zoomIn:", error);
});
}
});
function cleanup() {
zoomStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { zoomIn: legacyZoomIn };
}
return {
zoomIn,
stopZooming,
getCurrentZoom,
getCurrentCamera,
zoomStatus: zoomStatus.value,
isZooming: isZooming.value
};
}
function useZoomOut(mapOrProps, legacyOptions) {
const isLegacyAPI = legacyOptions !== void 0 || !("map" in mapOrProps);
const props = isLegacyAPI ? {
map: mapOrProps,
options: legacyOptions,
debug: false,
autoZoom: true
} : mapOrProps;
const { logError } = useLogger(props.debug ?? false);
const animationOptions = ref(props.options);
const zoomStatus = ref(
"not-started"
/* NotStarted */
);
const mapInstance = computed(() => unref(props.map));
const isZooming = computed(
() => zoomStatus.value === "zooming"
/* Zooming */
);
function validateZoomOperation() {
const map = mapInstance.value;
if (!map) {
return false;
}
return true;
}
function getCurrentZoom() {
const map = mapInstance.value;
if (!map) {
return null;
}
try {
return map.getZoom();
} catch (error) {
logError("Error getting current zoom:", error);
return null;
}
}
function getCurrentCamera() {
const map = mapInstance.value;
if (!map) {
return null;
}
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera:", error);
return null;
}
}
function zoomOut(options) {
return new Promise((resolve, reject) => {
if (!validateZoomOperation()) {
reject(new Error("Map instance not available"));
return;
}
const map = mapInstance.value;
const finalOptions = options || animationOptions.value;
zoomStatus.value = "zooming";
try {
if (options) animationOptions.value = options;
if (finalOptions) {
const onZoomEnd = () => {
map.off("zoomend", onZoomEnd);
map.off("error", onError);
zoomStatus.value = "completed";
resolve();
};
const onError = (error) => {
map.off("zoomend", onZoomEnd);
map.off("error", onError);
zoomStatus.value = "error";
reject(error);
};
map.once("zoomend", onZoomEnd);
map.once("error", onError);
map.zoomOut(finalOptions);
} else {
map.zoomOut();
zoomStatus.value = "completed";
resolve();
}
} catch (error) {
zoomStatus.value = "error";
logError("Error performing zoom-out operation:", error);
reject(error);
}
});
}
function stopZooming() {
const map = mapInstance.value;
if (!map) {
return;
}
try {
map.stop();
zoomStatus.value = "completed";
} catch (error) {
logError("Error stopping zoom animation:", error);
}
}
function legacyZoomOut(options) {
zoomOut(options).catch((error) => {
logError("Error in legacy zoomOut:", error);
});
}
watchEffect(() => {
const map = mapInstance.value;
if (map && props.autoZoom !== false && zoomStatus.value === "not-started") {
zoomOut(animationOptions.value).catch((error) => {
logError("Error in watchEffect zoomOut:", error);
});
}
});
function cleanup() {
zoomStatus.value = "completed";
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { zoomOut: legacyZoomOut };
}
return {
zoomOut,
stopZooming,
getCurrentZoom,
getCurrentCamera,
zoomStatus: zoomStatus.value,
isZooming: isZooming.value
};
}
function useCreateMapbox(elRef, styleRef, props = {}) {
const { register, onLoad, onError, ...options } = props;
const { log, logError, logWarn } = useLogger(props.debug ?? false);
const mapInstance = shallowRef(null);
const mapCreationStatus = ref(
MapCreationStatus.NotInitialized
);
const mapOptions = ref(options);
const retryCount = ref(0);
const currentStyle = ref(null);
const mapInstanceComputed = computed(() => mapInstance.value);
const mapCreationStatusComputed = computed(() => mapCreationStatus.value);
const isMapReady = computed(
() => mapCreationStatus.value === MapCreationStatus.Loaded
);
const isMapLoading = computed(
() => mapCreationStatus.value === MapCreationStatus.Loading
);
const hasMapError = computed(
() => mapCreationStatus.value === MapCreationStatus.Error
);
function validateMapOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function getCurrentCamera() {
if (!validateMapOperation()) return null;
const map = mapInstance.value;
try {
return {
center: map.getCenter(),
zoom: map.getZoom(),
bearing: map.getBearing(),
pitch: map.getPitch()
};
} catch (error) {
logError("Error getting current camera state:", error);
return null;
}
}
function getCurrentStyle() {
if (!validateMapOperation()) return null;
try {
return mapInstance.value.getStyle();
} catch (error) {
logError("Error getting current style:", error);
return currentStyle.value;
}
}
function initMap() {
const el = unref(elRef);
const style = unref(styleRef);
if (!el) {
mapCreationStatus.value = MapCreationStatus.Error;
return;
}
if (!style) {
mapCreationStatus.value = MapCreationStatus.Error;
return;
}
mapCreationStatus.value = MapCreationStatus.Initializing;
try {
const mapOpts = unref(mapOptions);
mapInstance.value = new Map$1({
...mapOpts,
style,
container: el
});
currentStyle.value = style;
mapCreationStatus.value = MapCreationStatus.Loading;
mapInstance.value.on("load", mapEventLoad);
mapInstance.value.on("error", mapEventError);
mapInstance.value.on("styledata", mapEventStyleData);
} catch (error) {
mapCreationStatus.value = MapCreationStatus.Error;
logError("Error creating map instance:", error);
if (onError) {
onError(error);
}
}
}
function removeMap() {
const map = mapInstance.value;
if (!map) return;
try {
map.off("load", mapEventLoad);
map.off("error", mapEventError);
map.off("styledata", mapEventStyleData);
map.remove();
} catch (error) {
logError("Error removing map instance:", error);
} finally {
mapInstance.value = null;
mapCreationStatus.value = MapCreationStatus.Destroyed;
currentStyle.value = null;
}
}
function mapEventLoad() {
mapCreationStatus.value = MapCreationStatus.Loaded;
retryCount.value = 0;
if (onLoad && mapInstance.value) {
onLoad(mapInstance.value);
}
}
function mapEventError(e) {
mapCreationStatus.value = MapCreationStatus.Error;
if (onError) {
onError(e);
}
}
function mapEventStyleData(e) {
log("Map style data updated", e);
}
function setCenter(centerVal) {
if (!validateMapOperation()) return;
try {
mapInstance.value.setCenter(centerVal);
mapOptions.value.center = centerVal;
} catch (error) {
logError("Error setting map center:", error, { center: centerVal });
}
}
function setBearing(bearing = 0) {
if (!validateMapOperation()) return;
if (bearing < -180 || bearing > 180) {
logWarn("Warning: Bearing should be between -180 and 180 degrees", {
bearing
});
}
try {
mapInstance.value.setBearing(bearing);
mapOptions.value.bearing = bearing;
} catch (error) {
logError("Error setting map bearing:", error, { bearing });
}
}
function setZoom(zoom) {
if (!validateMapOperation()) return;
if (zoom < 0 || zoom > 24) {
logWarn("Warning: Zoom level should be between 0 and 24", { zoom });
}
try {
mapInstance.value.setZoom(zoom);
mapOptions.value.zoom = zoom;
} catch (error) {
logError("Error setting map zoom:", error, { zoom });
}
}
function setPitch(pitch) {
if (!validateMapOperation()) return;
if (pitch < 0 || pitch > 60) {
logWarn("Warning: Pitch should be between 0 and 60 degrees", { pitch });
}
try {
mapInstance.value.setPitch(pitch);
mapOptions.value.pitch = pitch;
} catch (error) {
logError("Error setting map pitch:", error, { pitch });
}
}
function setStyle(style, options2) {
if (!validateMapOperation()) return;
try {
mapInstance.value.setStyle(style, options2);
currentStyle.value = style;
} catch (error) {
logError("Error setting map style:", error, { style });
}
}
function setMaxBounds(bounds) {
if (!validateMapOperation()) return;
try {
mapInstance.value.setMaxBounds(bounds);
mapOptions.value.maxBounds = bounds;
} catch (error) {
logError("Error setting map max bounds:", error, { bounds });
}
}
function setMaxPitch(pitch = 60) {
if (!validateMapOperation()) return;
if (pitch < 0 || pitch > 60) {
logWarn("Warning: Max pitch should be between 0 and 60 degrees", {
pitch
});
}
try {
mapInstance.value.setMaxPitch(pitch);
mapOptions.value.maxPitch = pitch;
} catch (error) {
logError("Error setting map max pitch:", error, { pitch });
}
}
function setMaxZoom(zoom = 24) {
if (!validateMapOperation()) return;
if (zoom < 0 || zoom > 24) {
logWarn("Warning: Max zoom should be between 0 and 24", { zoom });
}
try {
mapInstance.value.setMaxZoom(zoom);
mapOptions.value.maxZoom = zoom;
} catch (error) {
logError("Error setting map max zoom:", error, { zoom });
}
}
function setMinPitch(pitch = 0) {
if (!validateMapOperation()) return;
if (pitch < 0 || pitch > 60) {
logWarn("Warning: Min pitch should be between 0 and 60 degrees", {
pitch
});
}
try {
mapInstance.value.setMinPitch(pitch);
mapOptions.value.minPitch = pitch;
} catch (error) {
logError("Error setting map min pitch:", error, { pitch });
}
}
function setMinZoom(zoom = 0) {
if (!validateMapOperation()) return;
if (zoom < 0 || zoom > 24) {
logWarn("Warning: Min zoom should be between 0 and 24", { zoom });
}
try {
mapInstance.value.setMinZoom(zoom);
mapOptions.value.minZoom = zoom;
} catch (error) {
logError("Error setting map min zoom:", error, { zoom });
}
}
function setRenderWorldCopies(renderWorldCopies = true) {
if (!validateMapOperation()) return;
try {
mapInstance.value.setRenderWorldCopies(renderWorldCopies);
mapOptions.value.renderWorldCopies = renderWorldCopies;
} catch (error) {
logError("Error setting map render world copies:", error, {
renderWorldCopies
});
}
}
function destroyMap() {
removeMap();
mapCreationStatus.value = MapCreationStatus.Destroyed;
}
function checkInitMap() {
const opts = unref(mapOptions);
if (!opts.center && !opts.bounds) {
log("Map initialization skipped: no center or bounds provided");
return;
}
initMap();
}
const stopWatchEffect = watchEffect(() => {
removeMap();
if (!unref(mapInstance) && unref(elRef)) {
initMap();
stopWatchEffect();
}
});
onUnmounted(() => {
destroyMap();
});
const methods = {
// Original CreateMaplibreActions
mapInstance: mapInstanceComputed,
setRenderWorldCopies,
setMinZoom,
setMinPitch,
setMaxZoom,
setMaxPitch,
setMaxBounds,
setStyle,
setPitch,
setZoom,
setBearing,
setCenter,
// Simplified essential actions
getCurrentCamera,
mapCreationStatus: mapCreationStatusComputed.value,
isMapReady: isMapReady.value,
isMapLoading: isMapLoading.value,
hasMapError: hasMapError.value,
getCurrentStyle
};
register == null ? void 0 : register(methods);
return {
initMap,
removeMap,
checkInitMap,
destroyMap,
...methods
};
}
function useMapbox(options = {}) {
const { debug = false, autoCleanup = true } = options;
const { logError } = useLogger(debug);
const instanceRef = ref();
const mapStatus = ref(MapCreationStatus.NotInitialized);
const mapInstance = shallowRef(null);
let watchScope;
const isMapReady = computed(
() => mapStatus.value === MapCreationStatus.Loaded
);
const isMapLoading = computed(
() => mapStatus.value === MapCreationStatus.Loading
);
const hasMapError = computed(
() => mapStatus.value === MapCreationStatus.Error
);
const isRegistered = computed(
() => isMapReady.value && mapInstance.value !== null
);
async function register(instance) {
try {
if (!instance) {
throw new Error("Cannot register: instance is null or undefined");
}
if (!instance.mapInstance) {
throw new Error(
"Cannot register: instance missing mapInstance property"
);
}
if (instance === unref(instanceRef)) {
if (debug) {
console.log("Skipping duplicate registration for same instance");
}
return;
}
if (debug) {
console.log("🔄 Registering MapLibre instance with useMapbox", {
hasMapInstance: !!instance.mapInstance,
currentMapCreationStatus: instance.mapCreationStatus,
isMapReady: instance.isMapReady,
isMapLoading: instance.isMapLoading,
hasMapError: instance.hasMapError
});
}
instanceRef.value = instance;
watchScope == null ? void 0 : watchScope.stop();
watchScope = effectScope();
watchScope.run(() => {
watch(
() => instance.mapInstance.value,
(map) => {
var _a;
try {
mapInstance.value = map;
if (debug) {
console.log("🗺️ Map instance updated in useMapbox", {
hasMap: !!map,
mapLoaded: (_a = map == null ? void 0 : map.loaded) == null ? void 0 : _a.call(map)
});
}
} catch (error) {
mapStatus.value = MapCreationStatus.Error;
logError("Error updating map instance:", error);
}
},
{
immediate: true
}
);
mapStatus.value = instance.mapCreationStatus;
watch(
() => instance.mapInstance.value,
(map) => {
try {
if (map) {
if (map.loaded()) {
mapStatus.value = MapCreationStatus.Loaded;
if (debug) {
console.log("Map successfully registered with useMapbox");
}
} else {
mapStatus.value = MapCreationStatus.Loading;
const onLoad = () => {
mapStatus.value = MapCreationStatus.Loaded;
if (debug) {
console.log("Map loaded and registered with useMapbox");
}
map.off("load", onLoad);
};
map.on("load", onLoad);
}
} else {
if (instance.hasMapError) {
mapStatus.value = MapCreationStatus.Error;
} else if (instance.isMapLoading) {
mapStatus.value = MapCreationStatus.Loading;
} else {
mapStatus.value = MapCreationStatus.NotInitialized;
}
}
} catch (error) {
mapStatus.value = MapCreationStatus.Error;
logError("Error updating map status:", error);
}
},
{
immediate: true
}
);
});
} catch (error) {
mapStatus.value = MapCreationStatus.Error;
logError("Error registering MapLibre instance:", error);
throw error;
}
}
const getMapInstance = () => mapInstance.value;
const getInstance = () => instanceRef.value;
const methods = {
getContainer: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getContainer();
},
getCanvasContainer: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getCanvasContainer();
},
getCanvas: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getCanvas();
},
getStyle: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getStyle();
},
getBounds: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getBounds();
},
getCenter: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getCenter();
},
getZoom: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getZoom();
},
getBearing: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getBearing();
},
getPadding: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getPadding();
},
getPitch: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getPitch();
},
getMinZoom: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getMinZoom();
},
getMaxZoom: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getMaxZoom();
},
getMinPitch: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getMinPitch();
},
getMaxPitch: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getMaxPitch();
},
getFilter: (layerId) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getFilter(layerId);
},
getLayer: (layerId) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getLayer(layerId);
},
getLayoutProperty: (layerId, name) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getLayoutProperty(layerId, name);
},
getPaintProperty: (layerId, name) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getPaintProperty(layerId, name);
},
getSource: (sourceId) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getSource(sourceId);
},
project: (lnglat) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.project(lnglat);
},
unproject: (point) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.unproject(point);
},
queryRenderedFeatures: (point, options2) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.queryRenderedFeatures(point, options2);
},
querySourceFeatures: (sourceId, parameters) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.querySourceFeatures(sourceId, parameters);
},
queryTerrainElevation: (lnglat) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.queryTerrainElevation(lnglat);
},
isStyleLoaded: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.isStyleLoaded();
},
isMoving: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.isMoving();
},
isZooming: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.isZooming();
},
isRotating: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.isRotating();
},
isEasing: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.isEasing();
},
resize: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.resize();
},
remove: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.remove();
},
triggerRepaint: () => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.triggerRepaint();
},
setFeatureState: (options2, state) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.setFeatureState(options2, state);
},
removeFeatureState: (options2, key) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.removeFeatureState(options2, key);
},
getFeatureState: (options2) => {
var _a;
return (_a = getMapInstance()) == null ? void 0 : _a.getFeatureState(options2);
},
setPadding: (padding) => {
var _a;
return padding && ((_a = getMapInstance()) == null ? void 0 : _a.setPadding(padding));
},
// Setter methods that delegate to instance
setRenderWorldCopies: (val) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setRenderWorldCopies) == null ? void 0 : _b.call(_a, val);
},
setMinZoom: (zoom) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setMinZoom) == null ? void 0 : _b.call(_a, zoom);
},
setMinPitch: (pitch) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setMinPitch) == null ? void 0 : _b.call(_a, pitch);
},
setMaxZoom: (zoom) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setMaxZoom) == null ? void 0 : _b.call(_a, zoom);
},
setMaxPitch: (pitch) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setMaxPitch) == null ? void 0 : _b.call(_a, pitch);
},
setMaxBounds: (bounds) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setMaxBounds) == null ? void 0 : _b.call(_a, bounds);
},
setStyle: (style) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setStyle) == null ? void 0 : _b.call(_a, style);
},
setPitch: (pitch) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setPitch) == null ? void 0 : _b.call(_a, pitch);
},
setZoom: (zoom) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setZoom) == null ? void 0 : _b.call(_a, zoom);
},
setBearing: (bearing) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setBearing) == null ? void 0 : _b.call(_a, bearing);
},
setCenter: (center) => {
var _a, _b;
return (_b = (_a = getInstance()) == null ? void 0 : _a.setCenter) == null ? void 0 : _b.call(_a, center);
}
};
onUnmounted(() => {
if (autoCleanup) {
watchScope == null ? void 0 : watchScope.stop();
instanceRef.value = void 0;
mapInstance.value = null;
mapStatus.value = MapCreationStatus.NotInitialized;
}
});
const setMapOptions = (options2) => {
const instance = getInstance();
if (instance == null ? void 0 : instance.setMapOptions) {
instance.setMapOptions(options2);
if (debug) console.log("Map options updated", options2);
} else {
logError("Cannot set map options: no registered instance");
}
};
return {
...methods,
mapInstance: computed(() => mapInstance.value),
mapStatus: computed(() => mapStatus.value),
isMapReady,
isMapLoading,
hasMapError,
isRegistered,
register,
setMapOptions
};
}
const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
let nanoid = (size = 21) => {
let id = "";
let bytes = crypto.getRandomValues(new Uint8Array(size |= 0));
while (size--) {
id += urlAlphabet[bytes[size] & 63];
}
return id;
};
function getNanoid(id) {
if (id) return id;
return nanoid();
}
function getMainVersion() {
return parseInt(getVersion().split(".")[0], 10);
}
function hasSource(map, sourceId) {
return !!map.style && !!map.getSource(sourceId);
}
function hasLayer(map, sourceId) {
return !!map.style && !!map.getLayer(sourceId);
}
function lngLatLikeHasValue(lngLatLike) {
if (lngLatLike) {
if (Array.isArray(lngLatLike)) {
return lngLatLike.length >= 2 && lngLatLike[0] !== void 0 && lngLatLike[1] !== void 0;
}
if (typeof lngLatLike === "object") {
if ("lat" in lngLatLike && ("lng" in lngLatLike || "lon" in lngLatLike)) {
const { lat } = lngLatLike;
const lng = "lng" in lngLatLike ? lngLatLike.lng : void 0;
const lon = "lon" in lngLatLike ? lngLatLike.lon : void 0;
return (lng !== void 0 || lon !== void 0) && lat !== void 0;
}
}
}
return false;
}
function filterStylePropertiesByKeys(style, keys) {
return Object.fromEntries(
Object.entries(style).filter(([key]) => keys.includes(key))
);
}
var LayerManagementStatus = /* @__PURE__ */ ((LayerManagementStatus2) => {
LayerManagementStatus2["NotRegistered"] = "not-registered";
LayerManagementStatus2["Registering"] = "registering";
LayerManagementStatus2["Registered"] = "registered";
LayerManagementStatus2["Error"] = "error";
LayerManagementStatus2["Disposed"] = "disposed";
return LayerManagementStatus2;
})(LayerManagementStatus || {});
function useLayer(props = {}) {
const { debug = false, autoCleanup = true } = props;
const { logError } = useLogger(debug);
const instanceRef = ref();
const layerStatus = ref(
"not-registered"
/* NotRegistered */
);
const mapInstanceRef = shallowRef(null);
const layerRef = shallowRef(null);
const layerIdRef = ref();
let watchScope;
const isLayerRegistered = computed(
() => layerStatus.value === "registered"
/* Registered */
);
const isLayerReady = computed(() => {
const map = mapInstanceRef.value;
const layerId = layerIdRef.value;
return isLayerRegistered.value && !!map && !!layerId && hasLayer(map, layerId);
});
function validateLayerOperation() {
const map = mapInstanceRef.value;
const layerId = layerIdRef.value;
if (!map || !layerId || !hasLayer(map, layerId)) return false;
return true;
}
function register(instance, map) {
try {
if (unref(instanceRef) === instance && layerStatus.value === "registered")
return;
layerStatus.value = "registering";
instanceRef.value = instance;
mapInstanceRef.value = map;
watchScope == null ? void 0 : watchScope.stop();
watchScope = effectScope();
watchScope.run(() => {
watch(
() => instance.getLayer.value,
(layer) => {
try {
layerRef.value = layer;
layerIdRef.value = layer == null ? void 0 : layer.id;
if (layer) {
layerStatus.value = "registered";
} else {
layerStatus.value = "not-registered";
}
} catch (error) {
layerStatus.value = "error";
logError("Error in layer watch handler:", error);
}
},
{
immediate: true
}
);
});
} catch (error) {
layerStatus.value = "error";
logError("Error registering layer instance:", error);
}
}
function getInstance() {
const instance = unref(instanceRef);
if (!instance) return void 0;
return instance;
}
function dispose() {
try {
watchScope == null ? void 0 : watchScope.stop();
instanceRef.value = void 0;
mapInstanceRef.value = null;
layerRef.value = null;
layerIdRef.value = void 0;
layerStatus.value = "disposed";
} catch (error) {
logError("Error disposing layer management:", error);
}
}
function refresh() {
const instance = getInstance();
const map = mapInstanceRef.value;
if (instance && map) {
register(instance, map);
}
}
function getFilter() {
if (!validateLayerOperation()) return;
try {
const map = mapInstanceRef.value;
const layerId = layerIdRef.value;
const filter = map.getFilter(layerId);
return filter;
} catch (error) {
logError("Error getting layer filter:", error, {
layerId: layerIdRef.value
});
}
}
function getLayoutProperty(name) {
if (!validateLayerOperation()) return;
try {
const map = mapInstanceRef.value;
const layerId = layerIdRef.value;
const value = map.getLayoutProperty(layerId, name);
return value;
} catch (error) {
logError("Error getting layout property:", error, {
layerId: layerIdRef.value,
property: name
});
}
}
function getPaintProperty(name) {
if (!validateLayerOperation()) return;
try {
const map = mapInstanceRef.value;
const layerId = layerIdRef.value;
const value = map.getPaintProperty(layerId, name);
return value;
} catch (error) {
logError("Error getting paint property:", error, {
layerId: layerIdRef.value,
property: name
});
}
}
function setBeforeId(beforeId) {
const instance = getInstance();
if (!instance) return;
try {
instance.setBeforeId(beforeId);
} catch (error) {
logError("Error setting before ID:", error, { beforeId });
}
}
function setFilter(filter) {
const instance = getInstance();
if (!instance) return;
try {
instance.setFilter(filter);
} catch (error) {
logError("Error setting filter:", error, { filter });
}
}
function setPaintProperty(name, value, options) {
const instance = getInstance();
if (!instance) return;
try {
instance.setPaintProperty(name, value, options);
} catch (error) {
logError("Error setting paint property:", error, {
property: name,
value
});
}
}
function setLayoutProperty(name, value, options) {
const instance = getInstance();
if (!instance) return;
try {
instance.setLayoutProperty(name, value, options);
} catch (error) {
logError("Error setting layout property:", error, {
property: name,
value
});
}
}
function setZoomRange(minzoom, maxzoom) {
const instance = getInstance();
if (!instance) return;
try {
instance.setZoomRange(minzoom, maxzoom);
} catch (error) {
logError("Error setting zoom range:", error, { minzoom, maxzoom });
}
}
function removeLayer() {
const instance = getInstance();
if (!instance) return;
try {
instance.removeLayer();
} catch (error) {
logError("Error removing layer:", error, { layerId: layerIdRef.value });
}
}
function setStyle(styleVal) {
const instance = getInstance();
if (!instance) return;
try {
instance.setStyle(styleVal);
} catch (error) {
logError("Error setting layer style:", error, { style: styleVal });
}
}
function cleanup() {
if (autoCleanup) {
dispose();
}
}
onUnmounted(cleanup);
return {
register,
layerId: computed(() => layerIdRef.value),
layer: computed(() => layerRef.value),
layerStatus: computed(() => layerStatus.value),
isLayerRegistered,
isLayerReady,
getFilter,
getLayoutProperty,
getPaintProperty,
setBeforeId,
setFilter,
setPaintProperty,
setLayoutProperty,
setZoomRange,
removeLayer,
setStyle,
dispose,
refresh
};
}
var ImageStatus = /* @__PURE__ */ ((ImageStatus2) => {
ImageStatus2["NotCreated"] = "not-created";
ImageStatus2["Loading"] = "loading";
ImageStatus2["Created"] = "created";
ImageStatus2["Updated"] = "updated";
ImageStatus2["Error"] = "error";
return ImageStatus2;
})(ImageStatus || {});
function useCreateImage(props) {
const { logError } = useLogger(props.debug ?? false);
const imageStatus = ref(
"not-created"
/* NotCreated */
);
const mapInstance = computed(() => unref(props.map));
const isImageReady = computed(
() => imageStatus.value === "created" || imageStatus.value === "updated"
/* Updated */
);
let resolveFn;
let rejectFn;
const promise = new Promise((resolve, reject) => {
resolveFn = resolve;
rejectFn = reject;
});
function validateImageOperation() {
const map = mapInstance.value;
if (!map) return false;
return true;
}
function getImageDimensions(imageData) {
try {
if (imageData instanceof HTMLImageElement) {
return {
width: imageData.naturalWidth || imageData.width,
height: imageData.naturalHeight || imageData.height
};
}
if (imageData instanceof ImageBitmap) {
return { width: imageData.width, height: imageData.height };
}
if (imageData instanceof ImageData) {
return { width: imageData.width, height: imageData.height };
}
if (typeof imageData === "object" && "width" in imageData && "height" in imageData) {
return { width: imageData.width, height: imageData.height };
}
return null;
} catch (error) {
logError("Error getting image dimensions:", error);
return null;
}
}
function hasImage() {
const map = mapInstance.value;
if (!map) return false;
try {
return map.hasImage(props.id);
} catch (error) {
logError("Error checking if image exists:", error, { imageId: props.id });
return false;
}
}
async function loadImage(imageUrl) {
if (!validateImageOperation()) {
throw new Error("Map instance not available");
}
const map = mapInstance.value;
try {
const result = await map.loadImage(imageUrl);
return result.data;
} catch (error) {
logError("Error loading image from URL:", error, {
imageId: props.id,
imageUrl
});
throw new Error(`Failed to load image from URL: ${imageUrl}`);
}
}
async function updateImage(newImage) {
var _a, _b;
if (!validateImageOperation()) {
throw new Error("Map instance not available");
}
const map = mapInstance.value;
imageStatus.value = "loading";
try {
let imageData;
if (typeof newImage === "string") {
imageData = await loadImage(newImage);
} else {
imageData = newImage;
}
if (hasImage()) {
const forceRecreate = props.forceRecreateOnDimensionChange ?? true;
if (forceRecreate) {
const newDimensions = getImageDimensions(imageData);
try {
map.removeImage(props.id);
map.addImage(props.id, imageData, props.options);
imageStatus.value = "updated";
} catch (recreateError) {
logError("Error recreating image:", recreateError, {
imageId: props.id,
newDimensions
});
throw recreateError;
}
} else {
try {
map.updateImage(props.id, imageData);
imageStatus.value = "updated";
} catch (updateError) {
if (((_a = updateError == null ? void 0 : updateError.message) == null ? void 0 : _a.includes("width and height")) || ((_b = updateError == null ? void 0 : updateError.message) == null ? void 0 : _b.includes("same as the previous version"))) {
const newDimensions = getImageDimensions(imageData);
logError(
"Image dimensions changed, removing and re-adding image:",
updateError,
{
imageId: props.id,
newDimensions
}
);
map.removeImage(props.id);
map.addImage(props.id, imageData, props.options);
imageStatus.value = "created";
} else {
throw updateError;
}
}
}
} else {
map.addImage(props.id, imageData, props.options);
imageStatus.value = "created";
}
resolveFn();
} catch (error) {
imageStatus.value = "error";
logError("Error updating/creating image:", error, { imageId: props.id });
rejectFn(error);
throw error;
}
}
async function refreshImage() {
await updateImage(props.image);
}
function remove() {
const map = mapInstance.value;
if (!map) return;
try {
if (hasImage()) {
map.removeImage(props.id);
imageStatus.value = "not-created";
}
} catch (error) {
logError("Error removing image:", error, { imageId: props.id });
imageStatus.value = "error";
} finally {
rejectFn(new Error("Image removed"));
}
}
watchEffect(() => {
const map = mapInstance.value;
if (map && imageStatus.value === "not-created") {
updateImage(props.image).catch((error) => {
logError("Error in watchEffect updateImage:", error);
});
}
});
onUnmounted(() => {
remove();
});
return {
remove,
loadImage,
updateImage,
refreshImage,
hasImage,
imageStatus: imageStatus.value,
isImageReady: isImageReady.value,
loadPromise: promise
};
}
var GeoJsonSourceStatus = /* @__PURE__ */ ((GeoJsonSourceStatus2) => {
GeoJsonSourceStatus2["NotRegistered"] = "not-registered";
GeoJsonSourceStatus2["Registered"] = "registered";
GeoJsonSourceStatus2["Error"] = "error";
return GeoJsonSourceStatus2;
})(GeoJsonSourceStatus || {});
function useGeoJsonSource(props = {}) {
const { debug = false, autoRefresh = true } = props;
const { logError } = useLogger(debug);
const instanceRef = ref();
const sourceRef = shallowRef(null);
const sourceIdRef = ref();
const sourceStatus = ref(
"not-registered"
/* NotRegistered */
);
let watchScope;
const isSourceReady = computed(
() => sourceStatus.value === "registered" && !!sourceRef.value && !!sourceIdRef.value
);
function register(instance) {
try {
if (sourceStatus.value === "registered" && instance === unref(instanceRef))
return;
cleanupWatchScope();
instanceRef.value = instance;
sourceStatus.value = "registered";
setupSourceWatcher(instance);
} catch (error) {
sourceStatus.value = "error";
logError("Error registering GeoJSON source instance:", error);
}
}
function setupSourceWatcher(instance) {
watchScope = effectScope();
watchScope.run(() => {
watch(
() => instance.getSource.value,
(newSource, oldSource) => {
try {
if (newSource !== oldSource) {
sourceRef.value = newSource;
sourceIdRef.value = instance.sourceId;
}
} catch (error) {
sourceStatus.value = "error";
logError("Error in source watcher:", error);
}
},
{ immediate: true }
);
});
}
function cleanupWatchScope() {
try {
watchScope == null ? void 0 : watchScope.stop();
watchScope = void 0;
} catch (error) {
logError("Error cleaning up watch scope:", error);
}
}
function setData(data) {
try {
if (!instanceRef.value) return;
if (!instanceRef.value.setData) return;
instanceRef.value.setData(data);
} catch (error) {
logError("Error setting GeoJSON source data:", error);
}
}
function refreshSource() {
try {
if (!autoRefresh) return;
const currentInstance = instanceRef.value;
if (currentInstance) {
register(currentInstance);
}
} catch (error) {
logError("Error refreshing GeoJSON source:", error);
}
}
onScopeDispose(() => {
cleanupWatchScope();
});
const methods = {
sourceId: computed(() => sourceIdRef.value),
getSource: computed(() => sourceRef.value),
setData,
refreshSource,
isSourceReady,
sourceStatus: computed(() => sourceStatus.value)
};
return {
register,
...methods
};
}
var PopupStatus = /* @__PURE__ */ ((PopupStatus2) => {
PopupStatus2["NotCreated"] = "not-created";
PopupStatus2["Creating"] = "creating";
PopupStatus2["Created"] = "created";
PopupStatus2["Open"] = "open";
PopupStatus2["Closed"] = "closed";
PopupStatus2["Error"] = "error";
PopupStatus2["Removed"] = "removed";
return PopupStatus2;
})(PopupStatus || {});
function useCreatePopup({
map: mapRef,
lnglat: lnglatVal,
html,
el,
show: showVal = true,
withMap: withMapVal = true,
options = {},
on = {},
debug = false,
autoCreate = true,
closeOnClick = true,
closeButton = true
}) {
const { logError } = useLogger(debug);
const popup = shallowRef(null);
const popupStatus = ref(
"not-created"
/* NotCreated */
);
const mapInstance = computed(() => unref(mapRef));
const lnglatValue = computed(() => unref(lnglatVal));
const htmlValue = computed(() => unref(html));
const isPopupCreated = computed(
() => popupStatus.value === "created" || popupStatus.value === "open" || popupStatus.value === "closed"
/* Closed */
);
const isPopupOpen = computed(
() => popupStatus.value === "open"
/* Open */
);
const openEventFn = () => {
var _a;
try {
if (popup.value) {
popupStatus.value = "open";
(_a = on.open) == null ? void 0 : _a.call(on, popup.value);
}
} catch (error) {
logError("Error in popup open handler:", error);
}
};
const closeEventFn = () => {
var _a;
try {
if (popup.value) {
popupStatus.value = "closed";
(_a = on.close) == null ? void 0 : _a.call(on, popup.value);
}
} catch (error) {
logError("Error in popup close handler:", error);
}
};
function createPopup() {
const map = mapInstance.value;
if (!map) return;
if (popup.value) return;
if (!(el == null ? void 0 : el.value) && !htmlValue.value) return;
try {
popupStatus.value = "creating";
popup.value = new Popup({
closeOnClick,
closeButton,
...options
});
if (el == null ? void 0 : el.value) {
popup.value.setDOMContent(el.value);
} else if (htmlValue.value) {
popup.value.setHTML(htmlValue.value);
}
const lnglat = lnglatValue.value;
if (lnglat && lngLatLikeHasValue(lnglat)) {
popup.value.setLngLat(lnglat);
}
popup.value.on("open", openEventFn);
popup.value.on("close", closeEventFn);
popupStatus.value = "created";
if (showVal && withMapVal) {
show();
} else if (withMapVal) {
addToMap();
}
} catch (error) {
popupStatus.value = "error";
logError("Error creating popup:", error);
popup.value = null;
}
}
watchEffect((onCleanUp) => {
const map = mapInstance.value;
if (map && popupStatus.value === "not-created" && autoCreate) {
createPopup();
} else if (!map && isPopupCreated.value) {
removePopup();
}
onCleanUp(removePopup);
});
watch(htmlValue, (newHtml) => {
if (popup.value && newHtml) {
setHTMLContent(newHtml);
}
});
watch(lnglatValue, (newLnglat) => {
if (popup.value && newLnglat && lngLatLikeHasValue(newLnglat)) {
setLngLat(newLnglat);
}
});
function setLngLat(lnglat) {
if (!popup.value) return;
try {
popup.value.setLngLat(lnglat);
} catch (error) {
logError("Error setting popup position:", error, { lnglat });
}
}
function setOffset(offset) {
if (!popup.value) return;
try {
popup.value.setOffset(offset);
} catch (error) {
logError("Error setting popup offset:", error, { offset });
}
}
function addClassName(className) {
if (!popup.value) return;
try {
popup.value.addClassName(className);
} catch (error) {
logError("Error adding popup class:", error, { className });
}
}
function removeClassName(className) {
if (!popup.value) return;
try {
popup.value.removeClassName(className);
} catch (error) {
logError("Error removing popup class:", error, { className });
}
}
function setMaxWidth(width) {
if (!popup.value) return;
try {
popup.value.setMaxWidth(width);
} catch (error) {
logError("Error setting popup max width:", error, { width });
}
}
function show() {
const map = mapInstance.value;
if (!map) return;
if (!popup.value) return;
try {
if (!popup.value.isOpen()) {
popup.value.addTo(map);
}
} catch (error) {
logError("Error showing popup:", error);
}
}
function hide() {
if (!popup.value) return;
try {
if (popup.value.isOpen()) {
popup.value.remove();
}
} catch (error) {
logError("Error hiding popup:", error);
}
}
function toggle() {
if (!popup.value) return;
try {
if (popup.value.isOpen()) {
hide();
} else {
show();
}
} catch (error) {
logError("Error toggling popup:", error);
}
}
function addToMap() {
const map = mapInstance.value;
if (!map) return;
if (!popup.value) return;
try {
popup.value.addTo(map);
} catch (error) {
logError("Error adding popup to map:", error);
}
}
function setHTMLContent(html2) {
if (!popup.value) return;
const content = html2 || htmlValue.value;
if (!content) return;
try {
popup.value.setHTML(content);
} catch (error) {
logError("Error setting popup HTML content:", error, { content });
}
}
function setDOMContent(element) {
if (!popup.value) return;
try {
popup.value.setDOMContent(element);
} catch (error) {
logError("Error setting popup DOM content:", error, { element });
}
}
function setText(text) {
if (!popup.value) return;
try {
popup.value.setText(text);
} catch (error) {
logError("Error setting popup text content:", error, { text });
}
}
function getLngLat() {
if (!popup.value) return null;
try {
return popup.value.getLngLat();
} catch (error) {
logError("Error getting popup position:", error);
return null;
}
}
function getElement() {
if (!popup.value) return null;
try {
return popup.value.getElement();
} catch (error) {
logError("Error getting popup element:", error);
return null;
}
}
function removePopup() {
if (!popup.value) return;
try {
popup.value.off("open", openEventFn);
popup.value.off("close", closeEventFn);
if (popup.value.isOpen()) {
popup.value.remove();
}
popupStatus.value = "removed";
} catch (error) {
logError("Error removing popup:", error);
} finally {
popup.value = null;
popupStatus.value = "not-created";
}
}
function cleanup() {
removePopup();
}
onUnmounted(cleanup);
return {
popup: popup.value,
popupStatus: popupStatus.value,
isPopupCreated: isPopupCreated.value,
isPopupOpen: isPopupOpen.value,
setLngLat,
setOffset,
addClassName,
removeClassName,
setMaxWidth,
show,
hide,
toggle,
addToMap,
setHTMLContent,
setDOMContent,
setText,
removePopup,
createPopup,
getLngLat,
getElement
};
}
var MarkerStatus = /* @__PURE__ */ ((MarkerStatus2) => {
MarkerStatus2["NotCreated"] = "not-created";
MarkerStatus2["Creating"] = "creating";
MarkerStatus2["Created"] = "created";
MarkerStatus2["Error"] = "error";
MarkerStatus2["Removed"] = "removed";
return MarkerStatus2;
})(MarkerStatus || {});
function useCreateMarker({
map: mapRef,
lnglat: lnglatVal,
popup: popupRef,
el,
options = {},
on = {},
debug = false,
autoAdd = true
}) {
const { logError } = useLogger(debug);
const marker = shallowRef(null);
const markerStatus = ref(
"not-created"
/* NotCreated */
);
const mapInstance = computed(() => unref(mapRef));
const lnglatValue = computed(() => unref(lnglatVal));
const popupValue = computed(() => unref(popupRef));
const isMarkerCreated = computed(
() => markerStatus.value === "created"
/* Created */
);
const dragstartEventFn = (ev) => {
var _a;
try {
(_a = on.dragstart) == null ? void 0 : _a.call(on, ev);
} catch (error) {
logError("Error in marker dragstart handler:", error);
}
};
const dragEventFn = (ev) => {
var _a;
try {
(_a = on.drag) == null ? void 0 : _a.call(on, ev);
} catch (error) {
logError("Error in marker drag handler:", error);
}
};
const dragendEventFn = (ev) => {
var _a;
try {
(_a = on.dragend) == null ? void 0 : _a.call(on, ev);
} catch (error) {
logError("Error in marker dragend handler:", error);
}
};
function createMarker() {
const map = mapInstance.value;
if (!map) return;
if (marker.value) return;
try {
markerStatus.value = "creating";
marker.value = new Marker({
...options,
element: el == null ? void 0 : el.value
});
const lnglat = lnglatValue.value;
if (lnglat && lngLatLikeHasValue(lnglat)) {
marker.value.setLngLat(lnglat);
}
const popup = popupValue.value;
if (popup) {
marker.value.setPopup(popup);
}
marker.value.on("dragstart", dragstartEventFn);
marker.value.on("drag", dragEventFn);
marker.value.on("dragend", dragendEventFn);
if (autoAdd) {
marker.value.addTo(map);
}
markerStatus.value = "created";
} catch (error) {
markerStatus.value = "error";
logError("Error creating marker:", error);
marker.value = null;
}
}
watchEffect((onCleanUp) => {
const map = mapInstance.value;
if (map && markerStatus.value === "not-created") {
createMarker();
} else if (!map && markerStatus.value === "created") {
removeMarker();
}
onCleanUp(removeMarker);
});
watch(popupValue, (newPopup) => {
if (marker.value && newPopup !== void 0) {
setPopup(newPopup);
}
});
watch(lnglatValue, (newLnglat) => {
if (marker.value && newLnglat && lngLatLikeHasValue(newLnglat)) {
setLngLat(newLnglat);
}
});
function setLngLat(lnglat) {
if (!marker.value) return;
try {
marker.value.setLngLat(lnglat);
} catch (error) {
logError("Error setting marker position:", error, { lnglat });
}
}
function setPopup(popup) {
if (!marker.value) return;
try {
if (popup) {
marker.value.setPopup(popup);
} else {
marker.value.setPopup(void 0);
}
} catch (error) {
logError("Error setting marker popup:", error);
}
}
function setOffset(offset) {
if (!marker.value) return;
try {
marker.value.setOffset(offset);
} catch (error) {
logError("Error setting marker offset:", error, { offset });
}
}
function setDraggable(draggable) {
if (!marker.value) return;
try {
marker.value.setDraggable(draggable);
} catch (error) {
logError("Error setting marker draggable state:", error, { draggable });
}
}
function togglePopup() {
if (!marker.value) return;
try {
marker.value.togglePopup();
} catch (error) {
logError("Error toggling marker popup:", error);
}
}
function getElement() {
if (!marker.value) return null;
try {
return marker.value.getElement();
} catch (error) {
logError("Error getting marker element:", error);
return null;
}
}
function setRotation(rotation) {
if (!marker.value) return;
try {
marker.value.setRotation(rotation);
} catch (error) {
logError("Error setting marker rotation:", error, { rotation });
}
}
function setRotationAlignment(alignment) {
if (!marker.value) return;
try {
marker.value.setRotationAlignment(alignment);
} catch (error) {
logError("Error setting marker rotation alignment:", error, {
alignment
});
}
}
function setPitchAlignment(alignment) {
if (!marker.value) return;
try {
marker.value.setPitchAlignment(alignment);
} catch (error) {
logError("Error setting marker pitch alignment:", error, { alignment });
}
}
function setOpacity(opacity, opacityWhenCovered) {
if (!marker.value) return;
try {
marker.value.setOpacity(opacity, opacityWhenCovered);
} catch (error) {
logError("Error setting marker opacity:", error, {
opacity,
opacityWhenCovered
});
}
}
function addMarker() {
const map = mapInstance.value;
if (!map) return;
if (!marker.value) return;
try {
marker.value.addTo(map);
} catch (error) {
logError("Error adding marker to map:", error);
}
}
function removeMarker() {
if (!marker.value) return;
try {
marker.value.off("dragstart", dragstartEventFn);
marker.value.off("drag", dragEventFn);
marker.value.off("dragend", dragendEventFn);
marker.value.remove();
markerStatus.value = "removed";
} catch (error) {
logError("Error removing marker:", error);
} finally {
marker.value = null;
markerStatus.value = "not-created";
}
}
function getLngLat() {
if (!marker.value) return null;
try {
return marker.value.getLngLat();
} catch (error) {
logError("Error getting marker position:", error);
return null;
}
}
function getPopup() {
if (!marker.value) return null;
try {
return marker.value.getPopup();
} catch (error) {
logError("Error getting marker popup:", error);
return null;
}
}
function getOffset() {
if (!marker.value) return [0, 0];
try {
return marker.value.getOffset();
} catch (error) {
logError("Error getting marker offset:", error);
return [0, 0];
}
}
function getDraggable() {
if (!marker.value) return false;
try {
return marker.value.isDraggable();
} catch (error) {
logError("Error getting marker draggable state:", error);
return false;
}
}
function getRotation() {
if (!marker.value) return 0;
try {
return marker.value.getRotation();
} catch (error) {
logError("Error getting marker rotation:", error);
return 0;
}
}
function cleanup() {
removeMarker();
}
onUnmounted(cleanup);
return {
marker: marker.value,
markerStatus: markerStatus.value,
isMarkerCreated: isMarkerCreated.value,
setLngLat,
setPopup,
setOffset,
setDraggable,
togglePopup,
getElement,
setRotation,
setRotationAlignment,
setPitchAlignment,
setOpacity,
removeMarker,
addMarker,
getLngLat,
getPopup,
getOffset,
getDraggable,
getRotation
};
}
var EventListenerStatus = /* @__PURE__ */ ((EventListenerStatus2) => {
EventListenerStatus2["NotAttached"] = "not-attached";
EventListenerStatus2["Attached"] = "attached";
EventListenerStatus2["Error"] = "error";
return EventListenerStatus2;
})(EventListenerStatus || {});
function useMapEventListener(props) {
const { logError } = useLogger(props.debug ?? false);
const listenerStatus = ref(
"not-attached"
/* NotAttached */
);
const mapInstance = computed(() => unref(props.map));
const isListenerAttached = computed(
() => listenerStatus.value === "attached"
/* Attached */
);
const mapEventFn = (e) => {
try {
if (props.on) props.on(e);
if (props.once) removeListener();
} catch (error) {
logError("Error in map event handler:", error, { event: props.event });
listenerStatus.value = "error";
}
};
function attachListener() {
const map = mapInstance.value;
if (!map) return;
if (listenerStatus.value === "attached") return;
try {
map.on(props.event, mapEventFn);
listenerStatus.value = "attached";
} catch (error) {
listenerStatus.value = "error";
logError("Error attaching map event listener:", error, {
event: props.event
});
}
}
function removeListener() {
const map = mapInstance.value;
if (!map) return;
if (listenerStatus.value === "not-attached") return;
try {
map.off(props.event, mapEventFn);
listenerStatus.value = "not-attached";
} catch (error) {
logError("Error removing map event listener:", error, {
event: props.event
});
listenerStatus.value = "not-attached";
}
}
let lastMapInstance = null;
const stopEffect = watchEffect((onCleanUp) => {
const map = mapInstance.value;
if (map === lastMapInstance) return;
lastMapInstance = map;
if (map && listenerStatus.value === "not-attached") {
attachListener();
} else if (!map && listenerStatus.value === "attached") {
removeListener();
}
onCleanUp(removeListener);
});
function cleanup() {
stopEffect();
removeListener();
}
onUnmounted(cleanup);
return {
removeListener,
attachListener,
isListenerAttached: isListenerAttached.value,
listenerStatus: listenerStatus.value
};
}
var GeolocateEventListenerStatus = /* @__PURE__ */ ((GeolocateEventListenerStatus2) => {
GeolocateEventListenerStatus2["NotAttached"] = "not-attached";
GeolocateEventListenerStatus2["Attached"] = "attached";
GeolocateEventListenerStatus2["Error"] = "error";
return GeolocateEventListenerStatus2;
})(GeolocateEventListenerStatus || {});
function useGeolocateEventListener(props) {
const { logWarn, logError } = useLogger(props.debug ?? false);
const listenerStatus = ref(
"not-attached"
/* NotAttached */
);
const geolocateInstance = computed(() => unref(props.geolocate));
const isListenerAttached = computed(
() => listenerStatus.value === "attached"
/* Attached */
);
const geoEventFn = (e) => {
try {
if (props.on) props.on(e);
if (props.once) removeListener();
} catch (error) {
logError("Error in geolocate event handler:", error, {
event: props.event
});
listenerStatus.value = "error";
}
};
function attachListener() {
const geolocate = geolocateInstance.value;
if (!geolocate) return;
if (listenerStatus.value === "attached") {
logWarn("Event listener already attached", { event: props.event });
return;
}
try {
geolocate.on(props.event, geoEventFn);
listenerStatus.value = "attached";
} catch (error) {
listenerStatus.value = "error";
logError("Error attaching geolocate event listener:", error, {
event: props.event
});
}
}
function removeListener() {
const geolocate = geolocateInstance.value;
if (!geolocate) return;
if (listenerStatus.value === "not-attached")
return;
try {
geolocate.off(props.event, geoEventFn);
listenerStatus.value = "not-attached";
} catch (error) {
logError("Error removing geolocate event listener:", error, {
event: props.event
});
listenerStatus.value = "not-attached";
}
}
const stopEffect = watchEffect((onCleanUp) => {
const geolocate = geolocateInstance.value;
if (geolocate && listenerStatus.value === "not-attached") {
attachListener();
} else if (!geolocate && listenerStatus.value === "attached") {
removeListener();
}
onCleanUp(removeListener);
});
function cleanup() {
stopEffect();
removeListener();
}
onUnmounted(cleanup);
return {
removeListener,
attachListener,
isListenerAttached: isListenerAttached.value,
listenerStatus: listenerStatus.value
};
}
var MapReloadEventStatus = /* @__PURE__ */ ((MapReloadEventStatus2) => {
MapReloadEventStatus2["NotLoaded"] = "not-loaded";
MapReloadEventStatus2["Loading"] = "loading";
MapReloadEventStatus2["Loaded"] = "loaded";
MapReloadEventStatus2["Error"] = "error";
return MapReloadEventStatus2;
})(MapReloadEventStatus || {});
function useMapReloadEvent(mapRefOrProps, legacyCallbacks) {
const isLegacyAPI = legacyCallbacks !== void 0;
const props = isLegacyAPI ? {
map: mapRefOrProps,
callbacks: {
onLoad: legacyCallbacks.onLoad,
onUnload: legacyCallbacks.unLoad
},
debug: false,
autoTriggerOnMount: true
} : mapRefOrProps;
const { logError } = useLogger(props.debug ?? false);
const loadStatus = ref(
"not-loaded"
/* NotLoaded */
);
const mapInstance = computed(() => unref(props.map));
const isMapLoaded = computed(
() => loadStatus.value === "loaded"
/* Loaded */
);
const initialMap = mapInstance.value;
if (initialMap == null ? void 0 : initialMap._loaded) {
loadStatus.value = "loaded";
if (props.autoTriggerOnMount !== false) {
setTimeout(() => forceLoad(), 0);
}
}
function handleUnloadEvent() {
const map = mapInstance.value;
if (loadStatus.value === "not-loaded") return;
try {
loadStatus.value = "not-loaded";
if (props.callbacks.onUnload && map) props.callbacks.onUnload(map);
} catch (error) {
loadStatus.value = "error";
logError("Error in map unload handler:", error);
if (props.callbacks.onError) {
props.callbacks.onError(error);
}
}
}
function handleLoadEvent(isForced = false) {
const map = mapInstance.value;
if (!map) return;
if (loadStatus.value === "loaded" && !isForced) return;
try {
loadStatus.value = "loaded";
props.callbacks.onLoad(map);
} catch (error) {
loadStatus.value = "error";
logError("Error in map load handler:", error);
if (props.callbacks.onError) {
props.callbacks.onError(error);
}
}
}
function forceLoad() {
handleLoadEvent(true);
}
function forceUnload() {
handleUnloadEvent();
}
function clear() {
const map = mapInstance.value;
if (!map) return;
try {
map.off("styledata", handleLoadEvent);
map.off("styledataloading", handleUnloadEvent);
map.off("load", handleLoadEvent);
} catch (error) {
logError("Error clearing map reload event listeners:", error);
}
}
const stopEffect = watchEffect((onCleanUp) => {
const map = mapInstance.value;
if (!map) return;
try {
if (loadStatus.value === "not-loaded" && !map._loaded) {
map.on("load", handleLoadEvent);
} else if (map._loaded && loadStatus.value !== "loaded") {
handleLoadEvent();
}
map.on("styledata", handleLoadEvent);
map.on("styledataloading", handleUnloadEvent);
} catch (error) {
loadStatus.value = "error";
logError("Error setting up map reload event listeners:", error);
if (props.callbacks.onError) {
props.callbacks.onError(error);
}
}
onCleanUp(clear);
});
function cleanup() {
handleUnloadEvent();
stopEffect();
clear();
}
onUnmounted(cleanup);
if (isLegacyAPI) {
return { clear };
}
return {
clear,
forceLoad,
forceUnload,
isMapLoaded: isMapLoaded.value,
loadStatus: loadStatus.value
};
}
var LayerEventListenerStatus = /* @__PURE__ */ ((LayerEventListenerStatus2) => {
LayerEventListenerStatus2["NotAttached"] = "not-attached";
LayerEventListenerStatus2["Attached"] = "attached";
LayerEventListenerStatus2["Error"] = "error";
return LayerEventListenerStatus2;
})(LayerEventListenerStatus || {});
function useLayerEventListener(props) {
const { logError } = useLogger(props.debug ?? false);
const listenerStatus = ref(
"not-attached"
/* NotAttached */
);
const mapInstance = computed(() => unref(props.map));
const layerInstance = computed(() => unref(props.layer));
const layerId = computed(() => {
const layer = layerInstance.value;
return layer ? typeof layer === "string" ? layer : layer.id : null;
});
const isListenerAttached = computed(
() => listenerStatus.value === "attached"
/* Attached */
);
const layerEventFn = (e) => {
try {
if (props.on) props.on(e);
if (props.once) removeListener();
} catch (error) {
logError("Error in layer event handler:", error, {
event: props.event,
layerId: layerId.value
});
listenerStatus.value = "error";
}
};
function validateListenerAttachment() {
const map = mapInstance.value;
const currentLayerId = layerId.value;
if (!map) return false;
if (!currentLayerId) return false;
if (!hasLayer(map, currentLayerId)) return false;
return true;
}
function attachListener() {
if (!validateListenerAttachment()) return;
const map = mapInstance.value;
const currentLayerId = layerId.value;
if (listenerStatus.value === "attached") return;
try {
map.on(props.event, currentLayerId, layerEventFn);
listenerStatus.value = "attached";
} catch (error) {
listenerStatus.value = "error";
logError("Error attaching layer event listener:", error, {
event: props.event,
layerId: currentLayerId
});
}
}
function removeListener() {
const map = mapInstance.value;
const currentLayerId = layerId.value;
if (!map || !currentLayerId) return;
if (listenerStatus.value === "not-attached") return;
try {
map.off(props.event, currentLayerId, layerEventFn);
listenerStatus.value = "not-attached";
} catch (error) {
logError("Error removing layer event listener:", error, {
event: props.event,
layerId: currentLayerId
});
listenerStatus.value = "not-attached";
}
}
let lastMapInstance = null;
let lastLayerInstance = null;
const stopEffect = watchEffect((onCleanUp) => {
const map = mapInstance.value;
const layer = layerInstance.value;
if (map === lastMapInstance && layer === lastLayerInstance) return;
lastMapInstance = map;
lastLayerInstance = layer;
if (map && layer && listenerStatus.value === "not-attached") {
attachListener();
} else if ((!map || !layer) && listenerStatus.value === "attached") {
removeListener();
}
onCleanUp(removeListener);
});
function cleanup() {
stopEffect();
removeListener();
}
onUnmounted(cleanup);
return {
removeListener,
attachListener,
isListenerAttached: isListenerAttached.value,
listenerStatus: listenerStatus.value,
layerId: layerId.value
};
}
function useGeolocateControl({
map,
position = "bottom-right",
options = {},
debug = false
}) {
const { logError } = useLogger(debug);
const geolocateControl = shallowRef(null);
const isControlAdded = shallowRef(false);
const mapInstance = computed(() => unref(map));
function addControl() {
const mapRef = mapInstance.value;
if (!mapRef) return;
if (geolocateControl.value && isControlAdded.value) return;
try {
if (!geolocateControl.value)
geolocateControl.value = new GeolocateControl(options);
mapRef.addControl(geolocateControl.value, position);
isControlAdded.value = true;
} catch (error) {
logError("Error adding geolocate control to map:", error);
geolocateControl.value = null;
isControlAdded.value = false;
}
}
function removeControl() {
const mapRef = mapInstance.value;
if (!mapRef || !geolocateControl.value || !isControlAdded.value) return;
try {
mapRef.removeControl(geolocateControl.value);
isControlAdded.value = false;
} catch (error) {
logError("Error removing geolocate control from map:", error);
isControlAdded.value = false;
} finally {
geolocateControl.value = null;
}
}
function trigger() {
if (!geolocateControl.value) return;
try {
geolocateControl.value.trigger();
} catch (error) {
logError("Error triggering geolocate:", error);
}
}
const stopWatchEffect = watchEffect(() => {
const mapRef = mapInstance.value;
if (mapRef && !isControlAdded.value) {
addControl();
} else if (!mapRef && isControlAdded.value) {
removeControl();
}
});
function cleanup() {
stopWatchEffect();
removeControl();
}
onUnmounted(cleanup);
return {
geolocateControl,
isControlAdded,
removeControl,
addControl,
trigger
};
}
var SourceStatus = /* @__PURE__ */ ((SourceStatus2) => {
SourceStatus2["NotCreated"] = "not-created";
SourceStatus2["Creating"] = "creating";
SourceStatus2["Created"] = "created";
SourceStatus2["Error"] = "error";
return SourceStatus2;
})(SourceStatus || {});
const DEFAULT_GEOJSON_DATA = {
type: "FeatureCollection",
features: []
};
function useCreateGeoJsonSource({
map: mapRef,
id,
data = DEFAULT_GEOJSON_DATA,
options = {},
debug = false,
register
}) {
const { logError } = useLogger(debug);
const sourceId = getNanoid(id);
const source = shallowRef(null);
const sourceStatus = ref(
"not-created"
/* NotCreated */
);
const getSource = computed(() => source.value);
const mapInstance = computed(() => unref(mapRef));
const isSourceReady = computed(
() => sourceStatus.value === "created" && !!source.value && !!mapInstance.value && hasSource(mapInstance.value, sourceId)
);
useMapReloadEvent({
map: mapRef,
callbacks: {
onUnload: removeSource,
onLoad: initSource
},
debug
});
function sourcedataEventFn(e) {
try {
const map = mapInstance.value;
if (!map) return;
let isSourceLoaded = e.isSourceLoaded;
if (getMainVersion() > 0) isSourceLoaded = true;
if (!source.value && e.sourceId === sourceId && isSourceLoaded) {
source.value = map.getSource(sourceId);
sourceStatus.value = "created";
register == null ? void 0 : register(
{
sourceId,
getSource,
setData,
removeSource,
refreshSource,
sourceStatus: sourceStatus.value,
isSourceReady: isSourceReady.value
},
map
);
map.off("sourcedata", sourcedataEventFn);
}
} catch (error) {
sourceStatus.value = "error";
logError("Error in source data event handler:", error);
}
}
function initSource() {
const map = mapInstance.value;
if (!map) return;
if (source.value || hasSource(map, sourceId)) return;
if (!data) return;
sourceStatus.value = "creating";
try {
const sourceSpec = {
...options,
type: "geojson",
data
};
map.addSource(sourceId, sourceSpec);
map.on("sourcedata", sourcedataEventFn);
} catch (error) {
sourceStatus.value = "error";
logError("Error creating GeoJSON source:", error, { sourceId });
}
}
function setData(newData) {
const map = mapInstance.value;
if (!map) return;
if (!source.value || !hasSource(map, sourceId)) return;
if (!newData) return;
try {
source.value.setData(newData);
} catch (error) {
logError("Error setting GeoJSON source data:", error, { sourceId });
}
}
function removeSource() {
const map = mapInstance.value;
if (!map) return;
try {
if (hasSource(map, sourceId)) {
map.removeSource(sourceId);
map.off("sourcedata", sourcedataEventFn);
}
} catch (error) {
logError("Error removing GeoJSON source:", error, { sourceId });
} finally {
source.value = null;
sourceStatus.value = "not-created";
}
}
function refreshSource() {
removeSource();
initSource();
}
onMounted(async () => {
await nextTick();
initSource();
});
onUnmounted(() => {
removeSource();
});
return {
sourceId,
getSource,
setData,
removeSource,
refreshSource,
sourceStatus: sourceStatus.value,
isSourceReady: isSourceReady.value
};
}
var LayerStatus = /* @__PURE__ */ ((LayerStatus2) => {
LayerStatus2["NotCreated"] = "not-created";
LayerStatus2["Creating"] = "creating";
LayerStatus2["Created"] = "created";
LayerStatus2["Error"] = "error";
return LayerStatus2;
})(LayerStatus || {});
function useCreateLayer(cfg) {
const {
map: mapRef,
id,
source: sourceRef,
type,
beforeId,
filter = ["all"],
layout = {},
paint = {},
maxzoom = 24,
minzoom = 0,
metadata,
sourceLayer = "",
debug = false,
register
} = cfg;
const { logWarn, logError } = useLogger(debug);
const layerId = getNanoid(id);
const layer = shallowRef(null);
const layerStatus = ref(
"not-created"
/* NotCreated */
);
const getLayer = computed(() => layer.value);
const mapInstance = computed(() => unref(mapRef));
const sourceInstance = computed(() => unref(sourceRef));
const isLayerReady = computed(
() => layerStatus.value === "created" && !!layer.value && !!mapInstance.value && hasLayer(mapInstance.value, layerId)
);
watch(
sourceInstance,
(source) => {
if (source) createLayer();
else removeLayer();
},
{ immediate: false }
);
useMapReloadEvent({
map: mapRef,
callbacks: {
onUnload: removeLayer,
onLoad: createLayer
},
debug
});
function validateLayerOperation() {
const map = mapInstance.value;
if (!map || !layer.value || !hasLayer(map, layerId)) return false;
return true;
}
function setBeforeId(beforeIdVal) {
if (!validateLayerOperation()) return;
try {
const map = mapInstance.value;
map.moveLayer(layerId, beforeIdVal);
} catch (error) {
logError("Error setting layer position:", error);
}
}
function setFilter(filterVal = ["all"]) {
if (!validateLayerOperation()) return;
try {
const map = mapInstance.value;
map.setFilter(layerId, filterVal);
} catch (error) {
logError("Error setting layer filter:", error);
}
}
function setZoomRange(minzoomVal = 0, maxzoomVal = 24) {
if (!validateLayerOperation()) return;
if (minzoomVal < 0 || maxzoomVal > 24 || minzoomVal >= maxzoomVal) return;
try {
const map = mapInstance.value;
map.setLayerZoomRange(layerId, minzoomVal, maxzoomVal);
} catch (error) {
logError("Error setting layer zoom range:", error);
}
}
function setPaintProperty(name, value, options = { validate: true }) {
if (!validateLayerOperation()) return;
try {
const map = mapInstance.value;
map.setPaintProperty(layerId, name, value, options);
} catch (error) {
logError("Error setting paint property:", error, {
property: name,
value
});
}
}
function setLayoutProperty(name, value, options = { validate: true }) {
if (!validateLayerOperation()) return;
try {
const map = mapInstance.value;
map.setLayoutProperty(layerId, name, value, options);
} catch (error) {
logError("Error setting layout property:", error, {
property: name,
value
});
}
}
function resolveSourceData(source) {
if (typeof source === "string") {
return source;
}
if (typeof source === "object" && source !== null) {
if ("id" in source && typeof source.id === "string") {
return source.id;
}
if ("type" in source) {
logWarn(
"Warning: Source specification provided, ensure source is added to map first"
);
return source.id || "";
}
}
return null;
}
function createLayer() {
const map = mapInstance.value;
const source = sourceInstance.value;
if (!map) return;
if (!source) return;
if (layer.value || hasLayer(map, layerId)) return;
layerStatus.value = "creating";
try {
const sourceData = resolveSourceData(source);
if (!sourceData) {
layerStatus.value = "error";
return;
}
const layerSpec = {
id: layerId,
type,
source: sourceData,
layout: layout || {},
paint: paint || {},
"source-layer": sourceLayer,
minzoom,
maxzoom,
metadata,
filter
};
map.addLayer(layerSpec, beforeId);
layer.value = map.getLayer(layerId);
layerStatus.value = "created";
register == null ? void 0 : register(
{
layerId,
getLayer,
removeLayer,
setBeforeId,
setFilter,
setZoomRange,
setPaintProperty,
setLayoutProperty
},
map
);
} catch (error) {
layerStatus.value = "error";
logError("Error creating layer:", error, { layerId, type });
if (hasLayer(map, layerId)) {
try {
map.removeLayer(layerId);
} catch (cleanupError) {
logError("Error during layer cleanup:", cleanupError);
}
}
layer.value = null;
}
}
function removeLayer() {
const map = mapInstance.value;
if (!map) return;
try {
if (hasLayer(map, layerId)) {
map.removeLayer(layerId);
}
} catch (error) {
logError("Error removing layer:", error, { layerId });
} finally {
layer.value = null;
layerStatus.value = "not-created";
}
}
function refreshLayer() {
removeLayer();
createLayer();
}
function updateLayer(updates) {
if (!validateLayerOperation()) return;
try {
if (updates.filter !== void 0) {
setFilter(updates.filter);
}
if (updates.minzoom !== void 0 || updates.maxzoom !== void 0) {
setZoomRange(updates.minzoom, updates.maxzoom);
}
if (updates.paint) {
Object.entries(updates.paint).forEach(([key, value]) => {
setPaintProperty(key, value);
});
}
if (updates.layout) {
Object.entries(updates.layout).forEach(([key, value]) => {
setLayoutProperty(key, value);
});
}
} catch (error) {
logError("Error updating layer:", error, { layerId, updates });
}
}
return {
layerId,
getLayer,
removeLayer,
setBeforeId,
setFilter,
setZoomRange,
setPaintProperty,
setLayoutProperty,
layerStatus: layerStatus.value,
isLayerReady: isLayerReady.value,
refreshLayer,
updateLayer
};
}
const FILL_PAINT_KEYS = [
"fill-antialias",
"fill-opacity",
"fill-color",
"fill-outline-color",
"fill-translate",
"fill-translate-anchor",
"fill-pattern"
];
const FILL_LAYOUT_KEYS = ["fill-sort-key", "visibility"];
function useCreateFillLayer(props) {
const { logWarn, logError } = useLogger(props.debug ?? false);
const styleConfig = computed(() => {
const style = props.style || {};
return {
paint: filterStylePropertiesByKeys(style, FILL_PAINT_KEYS),
layout: filterStylePropertiesByKeys(style, FILL_LAYOUT_KEYS)
};
});
const { setLayoutProperty, setPaintProperty, ...actions } = useCreateLayer({
map: props.map,
source: props.source,
type: "fill",
id: props.id,
beforeId: props.beforeId,
filter: props.filter,
layout: styleConfig.value.layout,
paint: styleConfig.value.paint,
maxzoom: props.maxzoom,
minzoom: props.minzoom,
metadata: props.metadata,
sourceLayer: props.sourceLayer,
debug: props.debug,
register: (actions2, map) => {
var _a;
(_a = props.register) == null ? void 0 : _a.call(
props,
{
...actions2,
setStyle,
setOpacity,
setColor,
setOutlineColor,
setPattern,
setAntialias,
setVisibility,
setSortKey
},
map
);
}
});
function setStyle(styleVal = {}) {
try {
const styleKeys = Object.keys(styleVal);
styleKeys.forEach((key) => {
const typedKey = key;
const value = styleVal[typedKey];
if (value === void 0) return;
if (FILL_PAINT_KEYS.includes(typedKey)) {
setPaintProperty(key, value, { validate: false });
} else if (FILL_LAYOUT_KEYS.includes(typedKey)) {
setLayoutProperty(key, value, { validate: false });
}
});
} catch (error) {
logError("Error updating fill layer style:", error);
}
}
function setOpacity(opacity, options = { validate: true }) {
try {
if (opacity < 0 || opacity > 1) {
logWarn("Warning: Fill opacity should be between 0 and 1", { opacity });
}
setPaintProperty("fill-opacity", opacity, options);
} catch (error) {
logError("Error setting fill opacity:", error);
}
}
function setColor(color, options = { validate: true }) {
try {
setPaintProperty("fill-color", color, options);
} catch (error) {
logError("Error setting fill color:", error);
}
}
function setOutlineColor(color, options = { validate: true }) {
try {
setPaintProperty("fill-outline-color", color, options);
} catch (error) {
logError("Error setting fill outline color:", error);
}
}
function setPattern(pattern, options = { validate: true }) {
try {
setPaintProperty("fill-pattern", pattern, options);
} catch (error) {
logError("Error setting fill pattern:", error);
}
}
function setAntialias(antialias, options = { validate: true }) {
try {
setPaintProperty("fill-antialias", antialias, options);
} catch (error) {
logError("Error setting fill antialias:", error);
}
}
function setVisibility(visibility, options = { validate: true }) {
try {
setLayoutProperty("visibility", visibility, options);
} catch (error) {
logError("Error setting fill layer visibility:", error);
}
}
function setSortKey(sortKey, options = { validate: true }) {
try {
setLayoutProperty("fill-sort-key", sortKey, options);
} catch (error) {
logError("Error setting fill sort key:", error);
}
}
return {
...actions,
setStyle,
setLayoutProperty,
setPaintProperty,
setOpacity,
setColor,
setOutlineColor,
setPattern,
setAntialias,
setVisibility,
setSortKey
};
}
const CIRCLE_PAINT_KEYS = [
"circle-radius",
"circle-color",
"circle-blur",
"circle-opacity",
"circle-translate",
"circle-translate-anchor",
"circle-pitch-scale",
"circle-pitch-alignment",
"circle-stroke-width",
"circle-stroke-color",
"circle-stroke-opacity"
];
const CIRCLE_LAYOUT_KEYS = ["circle-sort-key", "visibility"];
function useCreateCircleLayer(props) {
const { logError, logWarn } = useLogger(props.debug ?? false);
const styleConfig = computed(() => {
const style = props.style || {};
return {
paint: filterStylePropertiesByKeys(style, CIRCLE_PAINT_KEYS),
layout: filterStylePropertiesByKeys(style, CIRCLE_LAYOUT_KEYS)
};
});
const { setLayoutProperty, setPaintProperty, ...actions } = useCreateLayer({
map: props.map,
source: props.source,
type: "circle",
id: props.id,
beforeId: props.beforeId,
filter: props.filter,
layout: styleConfig.value.layout,
paint: styleConfig.value.paint,
maxzoom: props.maxzoom,
minzoom: props.minzoom,
metadata: props.metadata,
sourceLayer: props.sourceLayer,
register: (actions2, map) => {
var _a;
(_a = props.register) == null ? void 0 : _a.call(
props,
{
...actions2,
setStyle,
setRadius,
setColor,
setOpacity,
setStrokeWidth,
setStrokeColor,
setStrokeOpacity,
setVisibility
},
map
);
}
});
function setStyle(styleVal = {}) {
if (!styleVal || typeof styleVal !== "object") return;
try {
const styleKeys = Object.keys(styleVal);
styleKeys.forEach((key) => {
const typedKey = key;
const value = styleVal[typedKey];
if (value === void 0) return;
if (CIRCLE_PAINT_KEYS.includes(typedKey)) {
setPaintProperty(key, value, { validate: false });
} else if (CIRCLE_LAYOUT_KEYS.includes(typedKey)) {
setLayoutProperty(key, value, { validate: false });
}
});
} catch (error) {
logError("Error updating circle layer style:", error);
}
}
function setRadius(radius, options = { validate: true }) {
try {
setPaintProperty("circle-radius", radius, options);
} catch (error) {
logError("Error setting circle radius:", error);
}
}
function setColor(color, options = { validate: true }) {
try {
setPaintProperty("circle-color", color, options);
} catch (error) {
logError("Error setting circle color:", error);
}
}
function setOpacity(opacity, options = { validate: true }) {
try {
if (opacity < 0 || opacity > 1) {
logWarn("Warning: Circle opacity should be between 0 and 1", {
opacity
});
}
setPaintProperty("circle-opacity", opacity, options);
} catch (error) {
logError("Error setting circle opacity:", error);
}
}
function setStrokeWidth(width, options = { validate: true }) {
try {
setPaintProperty("circle-stroke-width", width, options);
} catch (error) {
logError("Error setting circle stroke width:", error);
}
}
function setStrokeColor(color, options = { validate: true }) {
try {
setPaintProperty("circle-stroke-color", color, options);
} catch (error) {
logError("Error setting circle stroke color:", error);
}
}
function setStrokeOpacity(opacity, options = { validate: true }) {
try {
if (opacity < 0 || opacity > 1) {
logWarn("Warning: Circle stroke opacity should be between 0 and 1", {
opacity
});
}
setPaintProperty("circle-stroke-opacity", opacity, options);
} catch (error) {
logError("Error setting circle stroke opacity:", error);
}
}
function setVisibility(visibility, options = { validate: true }) {
try {
setLayoutProperty("visibility", visibility, options);
} catch (error) {
logError("Error setting circle layer visibility:", error);
}
}
return {
...actions,
setStyle,
setLayoutProperty,
setPaintProperty,
setRadius,
setColor,
setOpacity,
setStrokeWidth,
setStrokeColor,
setStrokeOpacity,
setVisibility
};
}
const LINE_PAINT_KEYS = [
"line-opacity",
"line-color",
"line-translate",
"line-translate-anchor",
"line-width",
"line-gap-width",
"line-offset",
"line-blur",
"line-dasharray",
"line-pattern",
"line-gradient"
];
const LINE_LAYOUT_KEYS = [
"line-cap",
"line-join",
"line-miter-limit",
"line-round-limit",
"line-sort-key",
"visibility"
];
function useCreateLineLayer(props) {
const { logError, logWarn } = useLogger(props.debug ?? false);
const styleConfig = computed(() => {
const style = props.style || {};
return {
paint: filterStylePropertiesByKeys(style, LINE_PAINT_KEYS),
layout: filterStylePropertiesByKeys(style, LINE_LAYOUT_KEYS)
};
});
const { setLayoutProperty, setPaintProperty, ...actions } = useCreateLayer({
map: props.map,
source: props.source,
type: "line",
id: props.id,
beforeId: props.beforeId,
filter: props.filter,
layout: styleConfig.value.layout,
paint: styleConfig.value.paint,
maxzoom: props.maxzoom,
minzoom: props.minzoom,
metadata: props.metadata,
sourceLayer: props.sourceLayer,
debug: props.debug,
register: (actions2, map) => {
var _a;
(_a = props.register) == null ? void 0 : _a.call(
props,
{
...actions2,
setStyle,
setOpacity,
setColor,
setWidth,
setGapWidth,
setOffset,
setBlur,
setDashArray,
setPattern,
setGradient,
setCap,
setJoin,
setVisibility,
setSortKey
},
map
);
}
});
function setStyle(styleVal = {}) {
if (!styleVal || typeof styleVal !== "object") return;
try {
const styleKeys = Object.keys(styleVal);
styleKeys.forEach((key) => {
const typedKey = key;
const value = styleVal[typedKey];
if (value === void 0) return;
if (LINE_PAINT_KEYS.includes(typedKey)) {
setPaintProperty(key, value, { validate: false });
} else if (LINE_LAYOUT_KEYS.includes(typedKey)) {
setLayoutProperty(key, value, { validate: false });
}
});
} catch (error) {
logError("Error updating line layer style:", error);
}
}
function setOpacity(opacity, options = { validate: true }) {
try {
if (opacity < 0 || opacity > 1) {
logWarn("Warning: Line opacity should be between 0 and 1", { opacity });
}
setPaintProperty("line-opacity", opacity, options);
} catch (error) {
logError("Error setting line opacity:", error);
}
}
function setColor(color, options = { validate: true }) {
try {
setPaintProperty("line-color", color, options);
} catch (error) {
logError("Error setting line color:", error);
}
}
function setWidth(width, options = { validate: true }) {
try {
setPaintProperty("line-width", width, options);
} catch (error) {
logError("Error setting line width:", error);
}
}
function setGapWidth(gapWidth, options = { validate: true }) {
try {
setPaintProperty("line-gap-width", gapWidth, options);
} catch (error) {
logError("Error setting line gap width:", error);
}
}
function setOffset(offset, options = { validate: true }) {
try {
setPaintProperty("line-offset", offset, options);
} catch (error) {
logError("Error setting line offset:", error);
}
}
function setBlur(blur, options = { validate: true }) {
try {
setPaintProperty("line-blur", blur, options);
} catch (error) {
logError("Error setting line blur:", error);
}
}
function setDashArray(dashArray, options = { validate: true }) {
try {
if (!Array.isArray(dashArray)) {
logWarn("Warning: Dash array should be an array of numbers", {
dashArray
});
}
setPaintProperty("line-dasharray", dashArray, options);
} catch (error) {
logError("Error setting line dash array:", error);
}
}
function setPattern(pattern, options = { validate: true }) {
try {
setPaintProperty("line-pattern", pattern, options);
} catch (error) {
logError("Error setting line pattern:", error);
}
}
function setGradient(gradient, options = { validate: true }) {
try {
setPaintProperty("line-gradient", gradient, options);
} catch (error) {
logError("Error setting line gradient:", error);
}
}
function setCap(cap, options = { validate: true }) {
try {
setLayoutProperty("line-cap", cap, options);
} catch (error) {
logError("Error setting line cap:", error);
}
}
function setJoin(join, options = { validate: true }) {
try {
setLayoutProperty("line-join", join, options);
} catch (error) {
logError("Error setting line join:", error);
}
}
function setVisibility(visibility, options = { validate: true }) {
try {
setLayoutProperty("visibility", visibility, options);
} catch (error) {
logError("Error setting line layer visibility:", error);
}
}
function setSortKey(sortKey, options = { validate: true }) {
try {
setLayoutProperty("line-sort-key", sortKey, options);
} catch (error) {
logError("Error setting line sort key:", error);
}
}
return {
...actions,
setStyle,
setLayoutProperty,
setPaintProperty,
setOpacity,
setColor,
setWidth,
setGapWidth,
setOffset,
setBlur,
setDashArray,
setPattern,
setGradient,
setCap,
setJoin,
setVisibility,
setSortKey
};
}
const SYMBOL_PAINT_KEYS = [
"icon-opacity",
"icon-color",
"icon-halo-color",
"icon-halo-width",
"icon-halo-blur",
"icon-translate",
"icon-translate-anchor",
"text-opacity",
"text-color",
"text-halo-color",
"text-halo-width",
"text-halo-blur",
"text-translate",
"text-translate-anchor"
];
const SYMBOL_LAYOUT_KEYS = [
"symbol-placement",
"symbol-spacing",
"symbol-avoid-edges",
"symbol-sort-key",
"symbol-z-order",
"icon-allow-overlap",
"icon-overlap",
"icon-ignore-placement",
"icon-optional",
"icon-rotation-alignment",
"icon-size",
"icon-text-fit",
"icon-text-fit-padding",
"icon-image",
"icon-rotate",
"icon-padding",
"icon-keep-upright",
"icon-offset",
"icon-anchor",
"icon-pitch-alignment",
"text-pitch-alignment",
"text-rotation-alignment",
"text-field",
"text-font",
"text-size",
"text-max-width",
"text-line-height",
"text-letter-spacing",
"text-justify",
"text-radial-offset",
"text-variable-anchor",
"text-variable-anchor-offset",
"text-anchor",
"text-max-angle",
"text-writing-mode",
"text-rotate",
"text-padding",
"text-keep-upright",
"text-transform",
"text-offset",
"text-allow-overlap",
"text-overlap",
"text-ignore-placement",
"text-optional",
"visibility"
];
function useCreateSymbolLayer(props) {
const { log, logWarn, logError } = useLogger(props.debug ?? false);
const styleConfig = computed(() => {
const style = props.style || {};
return {
paint: filterStylePropertiesByKeys(style, SYMBOL_PAINT_KEYS),
layout: filterStylePropertiesByKeys(style, SYMBOL_LAYOUT_KEYS)
};
});
const { setLayoutProperty, setPaintProperty, ...actions } = useCreateLayer({
map: props.map,
source: props.source,
type: "symbol",
id: props.id,
beforeId: props.beforeId,
filter: props.filter,
layout: styleConfig.value.layout,
paint: styleConfig.value.paint,
maxzoom: props.maxzoom,
minzoom: props.minzoom,
metadata: props.metadata,
sourceLayer: props.sourceLayer,
debug: props.debug,
register: (actions2, map) => {
var _a;
(_a = props.register) == null ? void 0 : _a.call(
props,
{
...actions2,
setStyle,
setIconOpacity,
setIconColor,
setIconHaloColor,
setIconHaloWidth,
setIconHaloBlur,
setIconImage,
setIconSize,
setIconRotate,
setIconOffset,
setIconAnchor,
setTextOpacity,
setTextColor,
setTextHaloColor,
setTextHaloWidth,
setTextHaloBlur,
setTextField,
setTextFont,
setTextSize,
setTextRotate,
setTextOffset,
setTextAnchor,
setVisibility,
setSortKey
},
map
);
}
});
function setStyle(styleVal = {}) {
if (!styleVal || typeof styleVal !== "object") return;
try {
const styleKeys = Object.keys(styleVal);
styleKeys.forEach((key) => {
const typedKey = key;
const value = styleVal[typedKey];
if (value === void 0) return;
if (SYMBOL_PAINT_KEYS.includes(typedKey)) {
setPaintProperty(key, value, { validate: false });
} else if (SYMBOL_LAYOUT_KEYS.includes(typedKey)) {
setLayoutProperty(key, value, { validate: false });
}
});
} catch (error) {
logError("Error updating symbol layer style:", error);
}
}
function setIconOpacity(opacity, options = { validate: true }) {
try {
if (opacity < 0 || opacity > 1) {
logWarn("Warning: Icon opacity should be between 0 and 1", { opacity });
}
setPaintProperty("icon-opacity", opacity, options);
} catch (error) {
logError("Error setting icon opacity:", error);
}
}
function setIconColor(color, options = { validate: true }) {
try {
setPaintProperty("icon-color", color, options);
} catch (error) {
logError("Error setting icon color:", error);
}
}
function setIconHaloColor(color, options = { validate: true }) {
try {
setPaintProperty("icon-halo-color", color, options);
} catch (error) {
logError("Error setting icon halo color:", error);
}
}
function setIconHaloWidth(width, options = { validate: true }) {
try {
setPaintProperty("icon-halo-width", width, options);
} catch (error) {
logError("Error setting icon halo width:", error);
}
}
function setIconHaloBlur(blur, options = { validate: true }) {
try {
setPaintProperty("icon-halo-blur", blur, options);
} catch (error) {
logError("Error setting icon halo blur:", error);
}
}
function setIconImage(image, options = { validate: true }) {
try {
setLayoutProperty("icon-image", image, options);
} catch (error) {
logError("Error setting icon image:", error);
}
}
function setIconSize(size, options = { validate: true }) {
try {
setLayoutProperty("icon-size", size, options);
} catch (error) {
logError("Error setting icon size:", error);
}
}
function setIconRotate(rotation, options = { validate: true }) {
try {
setLayoutProperty("icon-rotate", rotation, options);
} catch (error) {
logError("Error setting icon rotation:", error);
}
}
function setIconOffset(offset, options = { validate: true }) {
try {
if (!Array.isArray(offset) || offset.length !== 2) {
logWarn(
"Warning: Icon offset should be an array of two numbers [x, y]",
{
offset
}
);
}
setLayoutProperty("icon-offset", offset, options);
log("Icon offset updated", { offset });
} catch (error) {
logError("Error setting icon offset:", error);
}
}
function setIconAnchor(anchor, options = { validate: true }) {
try {
setLayoutProperty("icon-anchor", anchor, options);
} catch (error) {
logError("Error setting icon anchor:", error);
}
}
function setTextOpacity(opacity, options = { validate: true }) {
try {
if (opacity < 0 || opacity > 1) {
logWarn("Warning: Text opacity should be between 0 and 1", { opacity });
}
setPaintProperty("text-opacity", opacity, options);
} catch (error) {
logError("Error setting text opacity:", error);
}
}
function setTextColor(color, options = { validate: true }) {
try {
setPaintProperty("text-color", color, options);
} catch (error) {
logError("Error setting text color:", error);
}
}
function setTextHaloColor(color, options = { validate: true }) {
try {
setPaintProperty("text-halo-color", color, options);
} catch (error) {
logError("Error setting text halo color:", error);
}
}
function setTextHaloWidth(width, options = { validate: true }) {
try {
setPaintProperty("text-halo-width", width, options);
} catch (error) {
logError("Error setting text halo width:", error);
}
}
function setTextHaloBlur(blur, options = { validate: true }) {
try {
setPaintProperty("text-halo-blur", blur, options);
} catch (error) {
logError("Error setting text halo blur:", error);
}
}
function setTextField(field, options = { validate: true }) {
try {
setLayoutProperty("text-field", field, options);
} catch (error) {
logError("Error setting text field:", error);
}
}
function setTextFont(font, options = { validate: true }) {
try {
if (!Array.isArray(font)) {
logWarn("Warning: Text font should be an array of font names", {
font
});
}
setLayoutProperty("text-font", font, options);
} catch (error) {
logError("Error setting text font:", error);
}
}
function setTextSize(size, options = { validate: true }) {
try {
setLayoutProperty("text-size", size, options);
} catch (error) {
logError("Error setting text size:", error);
}
}
function setTextRotate(rotation, options = { validate: true }) {
try {
setLayoutProperty("text-rotate", rotation, options);
} catch (error) {
logError("Error setting text rotation:", error);
}
}
function setTextOffset(offset, options = { validate: true }) {
try {
if (!Array.isArray(offset) || offset.length !== 2) {
logWarn(
"Warning: Text offset should be an array of two numbers [x, y]",
{
offset
}
);
}
setLayoutProperty("text-offset", offset, options);
} catch (error) {
logError("Error setting text offset:", error);
}
}
function setTextAnchor(anchor, options = { validate: true }) {
try {
setLayoutProperty("text-anchor", anchor, options);
} catch (error) {
logError("Error setting text anchor:", error);
}
}
function setVisibility(visibility, options = { validate: true }) {
try {
setLayoutProperty("visibility", visibility, options);
} catch (error) {
logError("Error setting symbol layer visibility:", error);
}
}
function setSortKey(sortKey, options = { validate: true }) {
try {
setLayoutProperty("symbol-sort-key", sortKey, options);
} catch (error) {
logError("Error setting symbol sort key:", error);
}
}
return {
...actions,
setStyle,
setLayoutProperty,
setPaintProperty,
setIconOpacity,
setIconColor,
setIconHaloColor,
setIconHaloWidth,
setIconHaloBlur,
setIconImage,
setIconSize,
setIconRotate,
setIconOffset,
setIconAnchor,
setTextOpacity,
setTextColor,
setTextHaloColor,
setTextHaloWidth,
setTextHaloBlur,
setTextField,
setTextFont,
setTextSize,
setTextRotate,
setTextOffset,
setTextAnchor,
setVisibility,
setSortKey
};
}
export {
EventListenerStatus as $,
useThrottledComputed as A,
BoundsStatus as B,
useComputedWithCleanup as C,
useBatchedComputed as D,
EaseStatus as E,
FitScreenCoordinatesStatus as F,
usePanBy as G,
usePanTo as H,
useRotateTo as I,
JumpStatus as J,
useResetNorth as K,
useResetNorthPitch as L,
useSnapToNorth as M,
useZoomTo as N,
useZoomIn as O,
PanStatus as P,
useZoomOut as Q,
RotationStatus as R,
useMapbox as S,
LayerManagementStatus as T,
useLayer as U,
ImageStatus as V,
GeoJsonSourceStatus as W,
useGeoJsonSource as X,
PopupStatus as Y,
ZoomStatus as Z,
MarkerStatus as _,
useCreateMapbox as a,
GeolocateEventListenerStatus as a0,
MapReloadEventStatus as a1,
useMapReloadEvent as a2,
LayerEventListenerStatus as a3,
SourceStatus as a4,
LayerStatus as a5,
useCreateLayer as a6,
getNanoid as a7,
getMainVersion as a8,
hasSource as a9,
hasLayer as aa,
lngLatLikeHasValue as ab,
filterStylePropertiesByKeys as ac,
useMapEventListener as b,
useLogger as c,
useGeolocateControl as d,
useGeolocateEventListener as e,
useCreateGeoJsonSource as f,
useDebouncedWatch as g,
useCreateFillLayer as h,
useLayerEventListener as i,
useCreateCircleLayer as j,
useCreateLineLayer as k,
useCreateSymbolLayer as l,
useCreateImage as m,
useCreatePopup as n,
useCreateMarker as o,
useFitBounds as p,
useCameraForBounds as q,
useDebounce as r,
useDebouncedRef as s,
useEaseTo as t,
useOptimizedComputed as u,
useFitScreenCoordinates as v,
FlyStatus as w,
useFlyTo as x,
useJumpTo as y,
useMemoized as z
};
//# sourceMappingURL=composables-Bz7jtADq.js.map