@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
146 lines • 7.68 kB
JavaScript
"use client";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import L from "leaflet";
import { MapContainer, TileLayer, LayersControl, useMap, GeoJSON } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.fullscreen/Control.FullScreen.css";
import "leaflet.fullscreen";
import { tileOptions as defaultTileOptions } from "./tileOptions";
var BaseLayer = LayersControl.BaseLayer;
var ClickHandler = function (_a) {
var onDblClick = _a.onDblClick, dragging = _a.dragging;
var map = useMap();
useEffect(function () {
if (!dragging)
return;
var handleDoubleClick = function (e) {
setTimeout(function () {
map.setView(e.latlng, map.getZoom());
}, 500);
if (onDblClick) {
onDblClick(e.latlng);
}
};
map.on("dblclick", handleDoubleClick);
return function () {
map.off("dblclick", handleDoubleClick);
};
}, [map, onDblClick, dragging]);
return null;
};
var FullscreenControlHandler = function (_a) {
var fullscreenControl = _a.fullscreenControl, fullscreenControlPosition = _a.fullscreenControlPosition;
var map = useMap();
var controlRef = useRef(null);
useEffect(function () {
if (!fullscreenControl) {
if (controlRef.current) {
controlRef.current.remove();
controlRef.current = null;
}
return;
}
if (!controlRef.current) {
var controlOptions = typeof fullscreenControl === "object" ? fullscreenControl : {};
var fullscreen = L.control.fullscreen(__assign({ position: fullscreenControlPosition || "topleft", forceSeparateButton: true, forcePseudoFullscreen: false }, controlOptions));
fullscreen.addTo(map);
controlRef.current = fullscreen;
}
var handleFullscreenChange = function () {
var _a, _b, _c, _d, _e;
var isFullscreen = (_c = (_b = (_a = map).isFullscreen) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
if (controlRef.current) {
(_e = (_d = controlRef.current).togglePseudoFullscreen) === null || _e === void 0 ? void 0 : _e.call(_d, isFullscreen);
}
};
map.on("fullscreenchange", handleFullscreenChange);
return function () {
if (controlRef.current) {
controlRef.current.remove();
controlRef.current = null;
}
};
}, [map, fullscreenControl]);
return null;
};
var LazyMap = function (_a) {
var center = _a.center, bounds = _a.bounds, zoom = _a.zoom, _b = _a.zoomControl, zoomControl = _b === void 0 ? true : _b, _c = _a.fullscreenControl, fullscreenControl = _c === void 0 ? true : _c, _d = _a.fullscreenControlPosition, fullscreenControlPosition = _d === void 0 ? "topleft" : _d, _e = _a.tilesControl, tilesControl = _e === void 0 ? true : _e, _f = _a.attributionControl, attributionControl = _f === void 0 ? true : _f, _g = _a.dragging, dragging = _g === void 0 ? true : _g, _h = _a.scrollWheelZoom, scrollWheelZoom = _h === void 0 ? true : _h, _j = _a.doubleClickZoom, doubleClickZoom = _j === void 0 ? true : _j, geojson = _a.geojson, _k = _a.layerColor, layerColor = _k === void 0 ? "white" : _k, _l = _a.layerFillColor, layerFillColor = _l === void 0 ? "blue" : _l, onDblClick = _a.onDblClick, className = _a.className, style = _a.style, _m = _a.tileIndex, tileIndex = _m === void 0 ? 0 : _m, _o = _a.customTiles, customTiles = _o === void 0 ? [] : _o, children = _a.children;
var mapRef = useRef(null);
var tileOptions = __spreadArray(__spreadArray([], defaultTileOptions, true), customTiles, true);
var zoomToFeature = function (e) {
var layer = e.target;
if (mapRef.current) {
if ("getBounds" in layer && typeof layer.getBounds === "function") {
var bounds_1 = layer.getBounds();
mapRef.current.fitBounds(bounds_1);
}
else if ("getLatLng" in layer && typeof layer.getLatLng === "function") {
var latLng = layer.getLatLng();
mapRef.current.setView(latLng, mapRef.current.getZoom());
}
}
};
var handleEachFeature = function (feature, layer) {
if (feature.properties) {
var popupContent = Object.entries(feature.properties)
.map(function (_a) {
var key = _a[0], value = _a[1];
return key === "name" ? "<strong>".concat(value, "</strong>") : "<em>".concat(key, ":</em> ").concat(value);
})
.join("<br>");
layer.bindPopup(popupContent);
}
var defaultStyle = {
color: feature.properties.color || layerColor,
weight: 1,
opacity: 1,
fillOpacity: 0.3,
fillColor: feature.properties.fillColor || layerFillColor,
dashArray: "3",
};
var hoverStyle = {
fillOpacity: 0.7,
};
layer.setStyle(defaultStyle);
layer.on({
click: zoomToFeature,
mouseover: function (e) {
layer.setStyle(hoverStyle);
},
mouseout: function () {
layer.setStyle(defaultStyle);
},
});
};
return (_jsx(MapContainer, { center: center, bounds: bounds, zoom: zoom, zoomControl: zoomControl, attributionControl: attributionControl, dragging: dragging, scrollWheelZoom: scrollWheelZoom, doubleClickZoom: doubleClickZoom, className: className, style: style, ref: function (ref) {
if (ref) {
mapRef.current = ref;
}
}, children: _jsxs(_Fragment, { children: [tilesControl ? (_jsx(LayersControl, { position: "topright", children: tileOptions &&
tileOptions.map(function (tile, index) { return (_jsx(BaseLayer, { name: tile.name, checked: index === tileIndex, children: _jsx(TileLayer, __assign({ url: tile.url, attribution: tile.attribution }, (tile.subdomains && { subdomains: tile.subdomains }))) }, index)); }) })) : (_jsx(TileLayer, __assign({ url: tileOptions[tileIndex].url, attribution: tileOptions[tileIndex].attribution }, (tileOptions[tileIndex].subdomains && {
subdomains: tileOptions[tileIndex].subdomains,
})))), _jsx(FullscreenControlHandler, { fullscreenControl: fullscreenControl, fullscreenControlPosition: fullscreenControlPosition }), _jsx(ClickHandler, { onDblClick: onDblClick, dragging: dragging }), geojson && _jsx(GeoJSON, { data: geojson, onEachFeature: handleEachFeature }), children] }) }));
};
export default LazyMap;
//# sourceMappingURL=LazyMap.js.map