@abolhasanashori/react-neshan-map
Version:
Unofficial React wrapper for neshan-mapbox-sdk
665 lines (651 loc) • 23.8 kB
JavaScript
/**
* @abolhasanashori/react-neshan-map v0.5.3
*
* @license MIT
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
;
var react = require('react');
var mapboxGl = require('@neshan-maps-platform/mapbox-gl');
var jsxRuntime = require('react/jsx-runtime');
require('@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css');
var reactDom = require('react-dom');
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __pow = Math.pow;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
function createNeshanContext(map) {
return { map };
}
function useNeshanContext() {
const context = react.use(MapContext);
if (context === null)
throw new Error(
"No context provided: useNeshanContext() can only be used in a descendant of <MapContainer>"
);
return context;
}
var MapContext = react.createContext(
null
);
function createElementHook(createElement, updateElement) {
if (updateElement === void 0) {
return function useImmutableNeshanElement(props, context) {
var _a;
const elementRef = react.useRef(void 0);
(_a = elementRef.current) != null ? _a : elementRef.current = createElement(props, context);
return elementRef;
};
}
return function useMutableNeshanElement(props, context) {
var _a;
const elementRef = react.useRef(void 0);
(_a = elementRef.current) != null ? _a : elementRef.current = createElement(props, context);
const propsRef = react.useRef(props);
const { instance } = elementRef.current;
react.useEffect(
function updateElementProps() {
if (propsRef.current !== props) {
updateElement(instance, props, propsRef.current);
propsRef.current = props;
}
},
[instance, props]
);
return elementRef;
};
}
function createMapElement(instance, context) {
return Object.freeze({
instance,
context
});
}
// src/ref.ts
function createElementRef(useElement, useLifeCycle) {
return function useElementRef(props, setOpen) {
const context = useNeshanContext();
const elementRef = useElement(props, context);
useLifeCycle(elementRef.current, context, props, setOpen);
return elementRef;
};
}
function createContainerComponent(useElement) {
function ContainerComponent(props) {
const { children, ref } = props;
const { instance, context } = useElement(props).current;
const [mounted, setMounted] = react.useState(false);
react.useImperativeHandle(ref, () => instance);
react.useEffect(() => {
setMounted(true);
return () => {
setMounted(false);
};
}, []);
const content = mounted ? children : null;
return instance instanceof mapboxGl.Marker ? /* @__PURE__ */ jsxRuntime.jsx(
MapContext,
{
value: __spreadProps(__spreadValues({}, context), {
marker: instance
}),
children: content
}
) : content;
}
return ContainerComponent;
}
// src/util.ts
function generateId() {
return (Math.floor(Math.random() * __pow(10, 13)) + Date.now()).toString(36).substring(2);
}
function pickResult(obj, properties) {
const propertyNames = !Array.isArray(properties) ? [properties] : properties;
const picked = {};
const remain = __spreadValues({}, obj);
propertyNames.forEach((prop) => {
if (prop in obj) {
picked[prop] = obj[prop];
delete remain[prop];
}
});
return [picked, remain];
}
function removeUndefined(obj) {
const result = {};
Object.keys(obj).forEach((key) => {
const value = obj[key];
if (value !== void 0) {
result[key] = value;
}
});
return result;
}
// src/layer.ts
var Layer = class {
constructor(layer, source, options = {}) {
var _a, _b, _c;
this._layerId = (_b = (_a = options.layerId) != null ? _a : layer.id) != null ? _b : generateId();
this._sourceId = (_c = options.sourceId) != null ? _c : generateId();
this._source = source;
this._layer = __spreadValues({ id: this._layerId }, layer);
}
addTo(map) {
this._map = map;
return this._init();
}
getSource() {
return this._source;
}
getSourceId() {
return this._sourceId;
}
getLayer() {
return this._layer;
}
getLayerId() {
return this._layerId;
}
remove() {
const map = this._map;
if (!map) return this;
map.removeLayer(this._layerId);
map.removeSource(this._sourceId);
return this;
}
reset() {
return this.remove()._init();
}
_init() {
const map = this._map;
if (!map) return this;
map.addSource(this._sourceId, this._source);
map.addLayer(this._layer);
return this;
}
_setSource(source) {
this._source = source;
return this;
}
_setLayer(layer) {
this._layer = layer;
return this;
}
};
function useLayerLifeCycle(element, context) {
react.useEffect(
function addLayer() {
const { instance } = element;
const { map } = context;
instance.addTo(map);
return function removeLayer() {
instance.remove();
};
},
[element, context]
);
}
var layer_default = Layer;
// src/generic.ts
function createLayerComponent(createElement, updateElement) {
const useElement = createElementHook(createElement, updateElement);
const useLayer = createElementRef(useElement, useLayerLifeCycle);
return createContainerComponent(useLayer);
}
function Map(props) {
const _a = props, {
children,
style,
id,
className,
center,
zoom,
minZoom,
maxZoom,
fullscreen,
ref
} = _a, options = __objRest(_a, [
"children",
"style",
"id",
"className",
"center",
"zoom",
"minZoom",
"maxZoom",
"fullscreen",
"ref"
]);
const propsRef = react.useRef(props);
const containerProps = react.useMemo(() => ({ className, id, style }), []);
const [context, setContext] = react.useState(null);
const [loaded, setLoaded] = react.useState(false);
react.useImperativeHandle(
ref,
() => {
var _a2;
return (_a2 = context == null ? void 0 : context.map) != null ? _a2 : null;
},
[context]
);
react.useEffect(() => {
const map = context == null ? void 0 : context.map;
if (!map) return;
if (props.center !== void 0 && props.center !== propsRef.current.center) {
map.setCenter(props.center);
}
if (props.zoom !== void 0 && props.zoom !== propsRef.current.zoom) {
map.setZoom(props.zoom);
}
}, [context == null ? void 0 : context.map, props]);
const mapRef = react.useCallback(function createMap(container) {
if (!container || context) return;
const map = new mapboxGl.Map(__spreadProps(__spreadValues({}, options), {
center,
zoom: zoom != null ? zoom : 0,
minZoom: !minZoom || minZoom < 2 ? 2 : minZoom,
maxZoom: !maxZoom || maxZoom > 17 ? 17 : maxZoom,
container
}));
if (center !== void 0) {
map.setCenter(center);
}
if (zoom !== void 0) {
map.setZoom(zoom);
}
if (fullscreen) {
map.addControl(new mapboxGl.FullscreenControl());
}
map.once("load", () => {
setLoaded(true);
});
setContext(createNeshanContext(map));
}, []);
const contents = loaded && context ? /* @__PURE__ */ jsxRuntime.jsx(MapContext, { value: context, children }) : null;
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, containerProps), { ref: mapRef, children: contents }));
}
var Map_default = Map;
var Marker2 = createLayerComponent(
function createMarker(props, context) {
const _a = props, { lngLat } = _a, other = __objRest(_a, ["lngLat"]);
const marker = new mapboxGl.Marker(other);
marker.setLngLat(lngLat);
return createMapElement(marker, context);
},
function updateMarker(marker, props, prevProps) {
if (props.lngLat !== prevProps.lngLat) {
marker.setLngLat(props.lngLat);
}
if (props.draggable !== void 0 && props.draggable !== prevProps.draggable) {
marker.setDraggable(props.draggable);
}
if (props.rotation !== void 0 && props.rotation !== prevProps.rotation) {
marker.setRotation(props.rotation);
}
if (props.rotationAlignment !== void 0 && props.rotationAlignment !== prevProps.rotationAlignment) {
marker.setRotationAlignment(props.rotationAlignment);
}
if (props.offset !== void 0 && props.offset !== prevProps.offset) {
marker.setOffset(props.offset);
}
if (props.occludedOpacity !== void 0 && props.occludedOpacity !== prevProps.occludedOpacity) {
marker.setOccludedOpacity(props.occludedOpacity);
}
if (props.pitchAlignment !== void 0 && props.pitchAlignment !== prevProps.pitchAlignment) {
marker.setPitchAlignment(props.pitchAlignment);
}
}
);
var Marker_default = Marker2;
function createPopupContainer(usePopup) {
function PopupContainer(props, ref) {
const [opened, setOpened] = react.useState(false);
const contentRef = react.useRef(document.createElement("div"));
const { instance: popup } = usePopup(props, setOpened).current;
react.useImperativeHandle(ref, () => popup);
react.useEffect(
function attachContent() {
popup.setDOMContent(contentRef.current);
},
[popup]
);
return reactDom.createPortal(props.children, contentRef.current);
}
return react.forwardRef(PopupContainer);
}
function createPopupComponent(createElement, useLifeCycle) {
const usePopupHook = createElementHook(createElement);
const usePopupRef = createElementRef(usePopupHook, useLifeCycle);
return createPopupContainer(usePopupRef);
}
// src/Popup/Popup.tsx
var Popup = createPopupComponent(
function createPopup(props, context) {
const popup = new mapboxGl.Popup(props);
return createMapElement(popup, context);
},
function usePopupLifeCycle(element, context, props, setOpen) {
const { lngLat, show } = props;
const { map, marker } = context;
react.useEffect(
function addPopup() {
const { instance: popup } = element;
function handleOpen() {
setOpen == null ? void 0 : setOpen(true);
}
function handleClose() {
setOpen == null ? void 0 : setOpen(false);
}
if (marker === void 0) {
if (lngLat !== void 0) {
popup.setLngLat(lngLat);
}
popup.addTo(map);
} else {
marker.setPopup(popup).togglePopup();
}
popup.on("open", handleOpen);
popup.on("close", handleClose);
return function removePopup() {
popup.off("open", handleOpen);
popup.off("close", handleClose);
marker == null ? void 0 : marker.setPopup(void 0);
popup.remove();
};
},
[marker, element, lngLat, setOpen, map, show]
);
}
);
var Popup_default = Popup;
// src/Polyline/util.ts
function isFlat(lngLats) {
return !Array.isArray(lngLats[0]) || !Array.isArray(lngLats[0][0]);
}
// src/Polyline/base.ts
function getStyles(options) {
const [
layout,
{
blur,
color,
dasharray,
gapWidth,
gradient,
offset,
opacity,
pattern,
translate,
width,
translateAnchor,
transitions
}
] = pickResult(options, [
"line-cap",
"line-join",
"line-miter-limit",
"line-round-limit",
"line-sort-key",
"visibility"
]);
const paint = removeUndefined({
"line-blur": blur,
"line-color": color,
"line-dasharray": dasharray,
"line-gap-width": gapWidth,
"line-gradient": gradient,
"line-offset": offset,
"line-opacity": opacity,
"line-pattern": pattern,
"line-translate": translate,
"line-translate-anchor": translateAnchor,
"line-width": width,
"line-blur-transition": transitions == null ? void 0 : transitions.blur,
"line-color-transition": transitions == null ? void 0 : transitions.color,
"line-dasharray-transition": transitions == null ? void 0 : transitions.dasharray,
"line-gap-width-transition": transitions == null ? void 0 : transitions.gapWidth,
"line-offset-transition": transitions == null ? void 0 : transitions.offset,
"line-opacity-transition": transitions == null ? void 0 : transitions.opacity,
"line-pattern-transition": transitions == null ? void 0 : transitions.pattern,
"line-translate-transition": transitions == null ? void 0 : transitions.translate,
"line-width-transition": transitions == null ? void 0 : transitions.width
});
return {
layout: __spreadValues({ "line-cap": "round", "line-join": "round" }, layout),
paint
};
}
var Polyline = class extends layer_default {
constructor(lngLats, options = {}) {
const _a = options, { layerId, sourceId = generateId() } = _a, styleOptions = __objRest(_a, ["layerId", "sourceId"]);
super(
__spreadValues({
type: "line",
source: sourceId
}, getStyles(styleOptions)),
{
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: isFlat(lngLats) ? { type: "LineString", coordinates: lngLats } : { type: "MultiLineString", coordinates: lngLats }
}
},
{
sourceId,
layerId
}
);
this._lngLats = lngLats;
}
getLatLngs() {
return this._lngLats;
}
setLatLngs(lngLats) {
this._lngLats = lngLats;
this._updateSource(lngLats);
return this;
}
setStyles(options) {
const styles = getStyles(options);
return this._updateLayer(styles);
}
_updateLayer(styles) {
return this._setLayer(__spreadValues(__spreadValues({}, this._layer), styles)).reset();
}
_updateSource(lngLats) {
return this._setSource(__spreadProps(__spreadValues({}, this._source), {
data: {
type: "Feature",
properties: {},
geometry: isFlat(lngLats) ? { type: "LineString", coordinates: lngLats } : { type: "MultiLineString", coordinates: lngLats }
}
})).reset();
}
};
var base_default = Polyline;
// src/Polyline/Polyline.tsx
var Polyline2 = createLayerComponent(
function createPolyline(props, context) {
const _a = props, { lngLats } = _a, other = __objRest(_a, ["lngLats"]);
const polyline = new base_default(lngLats, other);
return createMapElement(polyline, context);
},
function updatePolyline(polyline, props, prevProps) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
if (props.lngLats !== prevProps.lngLats) {
polyline.setLatLngs(props.lngLats);
}
if (props.color !== prevProps.color || props.blur !== prevProps.blur || props.dasharray !== prevProps.dasharray || props.gapWidth !== prevProps.gapWidth || props.gradient !== prevProps.gradient || props.offset !== prevProps.offset || props.opacity !== prevProps.opacity || props.pattern !== prevProps.pattern || props.translate !== prevProps.translate || props.width !== prevProps.width || props.translateAnchor !== prevProps.translateAnchor || props["line-cap"] !== prevProps["line-cap"] || props["line-join"] !== prevProps["line-join"] || props["line-miter-limit"] !== prevProps["line-miter-limit"] || props["line-round-limit"] !== prevProps["line-round-limit"] || props["line-sort-key"] !== prevProps["line-sort-key"] || props.visibility !== prevProps.visibility || ((_a = props.transitions) == null ? void 0 : _a.blur) !== ((_b = prevProps.transitions) == null ? void 0 : _b.blur) || ((_c = props.transitions) == null ? void 0 : _c.color) !== ((_d = prevProps.transitions) == null ? void 0 : _d.color) || ((_e = props.transitions) == null ? void 0 : _e.dasharray) !== ((_f = prevProps.transitions) == null ? void 0 : _f.dasharray) || ((_g = props.transitions) == null ? void 0 : _g.gapWidth) !== ((_h = prevProps.transitions) == null ? void 0 : _h.gapWidth) || ((_i = props.transitions) == null ? void 0 : _i.offset) !== ((_j = prevProps.transitions) == null ? void 0 : _j.offset) || ((_k = props.transitions) == null ? void 0 : _k.opacity) !== ((_l = prevProps.transitions) == null ? void 0 : _l.opacity) || ((_m = props.transitions) == null ? void 0 : _m.pattern) !== ((_n = prevProps.transitions) == null ? void 0 : _n.pattern) || ((_o = props.transitions) == null ? void 0 : _o.translate) !== ((_p = prevProps.transitions) == null ? void 0 : _p.translate) || ((_q = props.transitions) == null ? void 0 : _q.width) !== ((_r = prevProps.transitions) == null ? void 0 : _r.width)) {
polyline.setStyles(props);
}
}
);
var Polyline_default = Polyline2;
// src/Circle/util.ts
function isMultiPoint(LngLat) {
return Array.isArray(LngLat[0]);
}
// src/Circle/base.ts
function getStyles2(options) {
const [
layout,
{
blur,
color,
opacity,
pitchAlignment,
pitchScale,
radius,
strokeColor,
strokeOpacity,
strokeWidth,
translate,
translateAnchor,
transitions
}
] = pickResult(options, ["circle-sort-key", "visibility"]);
const paint = removeUndefined({
"circle-radius": radius,
"circle-color": color,
"circle-blur": blur,
"circle-opacity": opacity,
"circle-translate": translate,
"circle-translate-anchor": translateAnchor,
"circle-pitch-scale": pitchScale,
"circle-pitch-alignment": pitchAlignment,
"circle-stroke-width": strokeWidth,
"circle-stroke-color": strokeColor,
"circle-stroke-opacity": strokeOpacity,
"circle-radius-transition": transitions == null ? void 0 : transitions.radius,
"circle-color-transition": transitions == null ? void 0 : transitions.color,
"circle-blur-transition": transitions == null ? void 0 : transitions.blur,
"circle-opacity-transition": transitions == null ? void 0 : transitions.opacity,
"circle-translate-transition": transitions == null ? void 0 : transitions.translate,
"circle-stroke-width-transition": transitions == null ? void 0 : transitions.strokeWidth,
"circle-stroke-color-transition": transitions == null ? void 0 : transitions.strokeColor,
"circle-stroke-opacity-transition": transitions == null ? void 0 : transitions.strokeOpacity
});
return {
layout,
paint
};
}
var Circle = class extends layer_default {
constructor(lngLat, options) {
const _a = options, { layerId, sourceId = generateId() } = _a, styleOptions = __objRest(_a, ["layerId", "sourceId"]);
super(
__spreadValues({
type: "circle",
source: sourceId
}, getStyles2(styleOptions)),
{
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: isMultiPoint(lngLat) ? { type: "MultiPoint", coordinates: lngLat } : { type: "Point", coordinates: lngLat }
}
},
{
sourceId,
layerId
}
);
this._lngLat = lngLat;
}
getLatLng() {
return this._lngLat;
}
setLatLng(lngLat) {
this._lngLat = lngLat;
this._updateSource(lngLat);
return this;
}
setStyles(options) {
const styles = getStyles2(options);
return this._updateLayer(styles);
}
_updateLayer(styles) {
return this._setLayer(__spreadValues(__spreadValues({}, this._layer), styles)).reset();
}
_updateSource(lngLat) {
return this._setSource(__spreadProps(__spreadValues({}, this._source), {
data: {
type: "Feature",
properties: {},
geometry: isMultiPoint(lngLat) ? { type: "MultiPoint", coordinates: lngLat } : { type: "Point", coordinates: lngLat }
}
})).reset();
}
};
var base_default2 = Circle;
// src/Circle/Circle.tsx
var Circle2 = createLayerComponent(
function createCircle(props, context) {
const _a = props, { lngLat } = _a, other = __objRest(_a, ["lngLat"]);
const circle = new base_default2(lngLat, other);
return createMapElement(circle, context);
},
function updateCircle(circle, props, prevProps) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
if (props.lngLat !== prevProps.lngLat) {
circle.setLatLng(props.lngLat);
}
if (props.radius !== prevProps.radius || props.color !== prevProps.color || props.blur !== prevProps.blur || props.opacity !== prevProps.opacity || props.translate !== prevProps.translate || props.translateAnchor !== prevProps.translateAnchor || props.pitchScale !== prevProps.pitchScale || props.pitchAlignment !== prevProps.pitchAlignment || props.strokeWidth !== prevProps.strokeWidth || props.strokeColor !== prevProps.strokeColor || props.strokeOpacity !== prevProps.strokeOpacity || props["circle-sort-key"] !== prevProps["circle-sort-key"] || props.visibility !== prevProps.visibility || ((_a = props.transitions) == null ? void 0 : _a.radius) !== ((_b = prevProps.transitions) == null ? void 0 : _b.radius) || ((_c = props.transitions) == null ? void 0 : _c.color) !== ((_d = prevProps.transitions) == null ? void 0 : _d.color) || ((_e = props.transitions) == null ? void 0 : _e.blur) !== ((_f = prevProps.transitions) == null ? void 0 : _f.blur) || ((_g = props.transitions) == null ? void 0 : _g.opacity) !== ((_h = prevProps.transitions) == null ? void 0 : _h.opacity) || ((_i = props.transitions) == null ? void 0 : _i.translate) !== ((_j = prevProps.transitions) == null ? void 0 : _j.translate) || ((_k = props.transitions) == null ? void 0 : _k.strokeWidth) !== ((_l = prevProps.transitions) == null ? void 0 : _l.strokeWidth) || ((_m = props.transitions) == null ? void 0 : _m.strokeColor) !== ((_n = prevProps.transitions) == null ? void 0 : _n.strokeColor) || ((_o = props.transitions) == null ? void 0 : _o.strokeOpacity) !== ((_p = prevProps.transitions) == null ? void 0 : _p.strokeOpacity)) {
circle.setStyles(props);
}
}
);
var Circle_default = Circle2;
exports.Circle = Circle_default;
exports.CircleClass = base_default2;
exports.Layer = layer_default;
exports.Map = Map_default;
exports.MapContext = MapContext;
exports.Marker = Marker_default;
exports.Polyline = Polyline_default;
exports.PolylineClass = base_default;
exports.Popup = Popup_default;
exports.createContainerComponent = createContainerComponent;
exports.createElementHook = createElementHook;
exports.createElementRef = createElementRef;
exports.createLayerComponent = createLayerComponent;
exports.createMapElement = createMapElement;
exports.createNeshanContext = createNeshanContext;
exports.createPopupComponent = createPopupComponent;
exports.isFlat = isFlat;
exports.isMultiPoint = isMultiPoint;
exports.useLayerLifeCycle = useLayerLifeCycle;
exports.useNeshanContext = useNeshanContext;
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map