@smitch/fluid
Version:
A Next/React ui-component libray.
110 lines (109 loc) • 7.11 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 { MapContainer, TileLayer, LayersControl, useMap, GeoJSON } from 'react-leaflet';
import { FullscreenControl } from 'react-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 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.tilesControl, tilesControl = _d === void 0 ? true : _d, _e = _a.attributionControl, attributionControl = _e === void 0 ? true : _e, _f = _a.dragging, dragging = _f === void 0 ? true : _f, _g = _a.scrollWheelZoom, scrollWheelZoom = _g === void 0 ? true : _g, _h = _a.doubleClickZoom, doubleClickZoom = _h === void 0 ? true : _h, geojson = _a.geojson, _j = _a.layerColor, layerColor = _j === void 0 ? 'white' : _j, _k = _a.layerFillColor, layerFillColor = _k === void 0 ? 'blue' : _k, onDblClick = _a.onDblClick, className = _a.className, style = _a.style, _l = _a.tileIndex, tileIndex = _l === void 0 ? 0 : _l, _m = _a.customTiles, customTiles = _m === void 0 ? [] : _m, 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,
})))), fullscreenControl ? (_jsxs(_Fragment, { children: [_jsx("style", { children: "\n .fullscreen-icon {\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAAAUklEQVR4AWOgGhgF/8HwPIrYeYgoIU0OKGIOxGm6jyJ2n5Cm8wwOQEUGKGIGQBEHoAwB0AA0FwEbSAgOBBwWmggHBOVBTjhyKU9GhBMslcAoAABPu2Hh6JIyeQAAAABJRU5ErkJggg==);\n }\n .leaflet-retina .fullscreen-icon {\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAAnklEQVR4Ae2WVQEDMRAFn4RIi8OVtBIiIQ7KzO3dlN+8z4MJbEDGGPPXTA+SukQevTlKlCq6RFFSor7RXFR1qkehawTRo9uqIOaoPyTqQ0Wporh76GJdFg+zqbS4odm8s6nAkVQ1Tc+kqQqkano5pKpdFTVhTG8EwyKLwPLmF+xHbkH8psofEx918PFHOX85+YbrFn+B5K/Ef4wxxswAnU97CHDaZQMAAAAASUVORK5CYII=);\n background-size: 26px 26px;\n }\n .leaflet-container:fullscreen {\n width: 100% !important;\n height: 100% !important;\n z-index: 99999;\n }\n .leaflet-pseudo-fullscreen {\n position: fixed !important;\n width: 100% !important;\n height: 100% !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999;\n }\n " }), _jsx(FullscreenControl, { position: 'topleft' })] })) : null, _jsx(ClickHandler, { onDblClick: onDblClick, dragging: dragging }), geojson && (_jsx(GeoJSON, { data: geojson, onEachFeature: handleEachFeature })), children] }) }));
};
export default LazyMap;