@progress/kendo-react-map
Version:
KendoReact Map package
338 lines (337 loc) • 11.4 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as a from "react";
import g from "prop-types";
import { InstanceObserver as h, Map as b } from "@progress/kendo-charts";
import { create as y } from "./events/map-event-builder.mjs";
import m from "./store/store.mjs";
import { optionsReducer as M, observersReducer as T } from "./store/reducer.mjs";
import { MapContext as L } from "./MapContext.mjs";
import { MapTooltip as O } from "./tooltip/MapTooltip.mjs";
import { validatePackage as k, getLicenseMessage as w, IconsContext as S, WatermarkOverlay as D } from "@progress/kendo-react-common";
import { packageMetadata as u } from "./package-metadata.mjs";
import { toDomEvent as x } from "./events/dom-event.mjs";
import { mapMarkerTargetIcon as A, mapMarkerIcon as P, plusIcon as E, minusIcon as U, caretAltUpIcon as C, caretAltDownIcon as R, caretAltLeftIcon as z, caretAltRightIcon as V } from "@progress/kendo-svg-icons";
const v = {
mapMarkerTargetIcon: A,
mapMarkerIcon: P,
plusIcon: E,
minusIcon: U,
caretAltUpIcon: C,
caretAltDownIcon: R,
caretAltLeftIcon: z,
caretAltRightIcon: V
}, I = "svg", p = class p extends a.Component {
constructor(e) {
super(e), this.mapInstance = null, this._element = null, this.optionsStore = {}, this.optionsUnsubscriber = Function.prototype, this.observersStore = {}, this.showLicenseWatermark = !1, this.iconsType = I, this.svgIcons = v, this.onInit = (t) => {
this.mapInstance = t.sender;
}, this.onRender = (t) => {
this.mapInstance !== null && this.trigger("render", t);
}, this.onMapMouseLeave = (t) => {
const s = x(this, t);
this.triggerDomEvent("onMouseLeave", s) ? t.preventDefault() : this.mapInstance !== null && this.mapInstance.hideTooltip();
}, this.showLicenseWatermark = !k(u, { component: "Map" }), this.licenseMessage = w(u), this.optionsStore = m(M), this.observersStore = m(T), this.childrenObserver = new h(this, { onMouseLeave: "onChildMouseLeave" }), this.contextValue = {
optionsStore: this.optionsStore,
observersStore: this.observersStore,
childrenObserver: this.childrenObserver
}, this.mapObserver = new h(this, {
// render: 'onRender',
init: "onInit"
});
}
/**
* @hidden
*/
get element() {
return this._element;
}
/**
* @hidden
*/
componentDidMount() {
this.instantiateCoreMap(), this.optionsUnsubscriber = this.optionsStore.subscribe(this.refresh.bind(this));
}
/**
* @hidden
*/
componentWillUnmount() {
this.optionsUnsubscriber(), this.mapInstance !== null && (this.mapInstance.destroy(), this.mapInstance = null);
}
/**
* @hidden
*/
componentDidUpdate(e) {
const { dir: t, children: s, ...n } = this.props;
this.mapInstance !== null && (Object.entries(e).filter((r) => r[0] !== "dir" && r[0] !== "children").some((r) => {
const [i, c] = r;
return !(n.hasOwnProperty(i) && n[i] === c);
}) && this.refresh(), e.dir);
}
/**
* @hidden
*/
render() {
const { style: e = {}, className: t, children: s } = this.props, n = Object.assign({}, e, { position: "relative" }), o = a.createElement(
"div",
{
className: t,
style: n,
key: "mapElement"
},
/* @__PURE__ */ a.createElement(
"div",
{
ref: (r) => {
this._element = r;
},
className: "k-map",
onMouseLeave: this.onMapMouseLeave
},
s
)
);
return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(S.Consumer, null, (r) => /* @__PURE__ */ a.createElement(L.Provider, { value: this.contextValue }, /* @__PURE__ */ a.createElement(O, { key: "tooltip" }), o, this.setIcons(r))), this.showLicenseWatermark && /* @__PURE__ */ a.createElement(D, { message: this.licenseMessage }));
}
/**
* @hidden
*/
getMapOptions() {
const { center: e, controls: t, minZoom: s, maxZoom: n, minSize: o, pannable: r, wraparound: i, zoom: c, zoomable: d } = this.props;
let l = {
center: e,
controls: t,
minZoom: s,
maxZoom: n,
minSize: o,
pannable: r,
wraparound: i,
zoom: c,
zoomable: d,
icons: {
type: this.iconsType,
svgIcons: this.svgIcons
}
};
return l = Object.assign(l, this.optionsStore.getState()), l;
}
/**
* The marker layers instances.
*/
get layers() {
var e;
return (e = this.mapInstance) == null ? void 0 : e.layers;
}
/**
* Gets the extent (visible area) of the map.
*/
get extent() {
var e;
return (e = this.mapInstance) == null ? void 0 : e.extent();
}
/**
* Sets the extent (visible area) of the map.
*/
set extent(e) {
var t;
(t = this.mapInstance) == null || t.extent(e);
}
/**
* Detects the size of the container and redraws the Map.
* Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
*/
resize() {
}
/**
* Retrieves the size of the visible portion of the map.
*
* @returns The size (width and height) of the visible portion of the map.
*/
viewSize() {
var e;
return (e = this.mapInstance) == null ? void 0 : e.viewSize();
}
/**
* Returns the event coordinates relative to the map element. Offset coordinates are not synchronized to a particular location on the map.
*
* @param e The mouse event.
* @returns The event coordinates relative to the map element.
*/
eventOffset(e) {
var t;
return (t = this.mapInstance) == null ? void 0 : t.eventOffset(e);
}
/**
* Retrieves projected (layer) coordinates that correspond to this mouse event.
* Layer coordinates are absolute and change only when the zoom level is changed.
*
* @param e The mouse event.
* @returns The projected (layer) coordinates that correspond to this event.
*/
eventToLayer(e) {
var t;
return (t = this.mapInstance) == null ? void 0 : t.eventToLayer(e);
}
/**
* Retrieves the geographic location that correspond to this mouse event.
*
* @param e The mouse event.
* @returns The geographic location that correspond to this mouse event.
*/
eventToLocation(e) {
var t;
return (t = this.mapInstance) == null ? void 0 : t.eventToLocation(e);
}
/**
* Retrieves relative (view) coordinates that correspond to this mouse event.
* Layer elements positioned on these coordinates will appear under the mouse cursor.
* View coordinates are no longer valid after a map reset.
*
* @param e The mouse event.
* @returns The relative (view) coordinates that correspond to this mouse event.
*/
eventToView(e) {
var t;
return (t = this.mapInstance) == null ? void 0 : t.eventToView(e);
}
/**
* Transforms layer (projected) coordinates to geographical location.
*
* @param point The layer (projected) coordinates. An array argument is assumed to be in x, y order.
* @param zoom Optional. Assumed zoom level. Defaults to the current zoom level.
* @returns The geographic location that corresponds to the layer coordinates.
*/
layerToLocation(e, t) {
var s;
return (s = this.mapInstance) == null ? void 0 : s.layerToLocation(e, t);
}
/**
* Returns the layer (projected) coordinates that correspond to a geographical location.
*
* @param location The geographic location. An array argument is assumed to be in [Latitude, Longitude] order.
* @param zoom Optional. Assumed zoom level. Defaults to the current zoom level.
* @returns The layer (projected) coordinates.
*/
locationToLayer(e, t) {
var s;
return (s = this.mapInstance) == null ? void 0 : s.locationToLayer(e, t);
}
/**
* Returns the view (relative) coordinates that correspond to a geographical location.
*
* @param location The geographic location. An array argument is assumed to be in [Latitude, Longitude] order.
* @returns The view coordinates that correspond to a geographical location.
*/
locationToView(e) {
var t;
return (t = this.mapInstance) == null ? void 0 : t.locationToView(e);
}
/**
* Returns the geographical location that correspond to the view (relative) coordinates.
*
* @param point The view coordinates. An array argument is assumed to be in x, y order.
* @param zoom Optional. Assumed zoom level. Defaults to the current zoom level.
* @returns The geographic location that corresponds to the view coordinates.
*/
viewToLocation(e, t) {
var s;
return (s = this.mapInstance) == null ? void 0 : s.viewToLocation(e, t);
}
/**
* Load markers in the Map. This method will clear the current markers and show the new ones.
*
* @param newMarkers An array of markers.
*/
loadMarkers(e) {
const t = this.mapInstance.markers;
t && t._load(e);
}
/**
* @hidden
*/
refresh() {
if (this.mapInstance !== null) {
const e = this.getMapOptions();
this.props.onRefresh ? this.props.onRefresh.call(void 0, e, this.mapInstance) : this.mapInstance.setOptions(e);
}
}
/**
* @hidden
*/
instantiateCoreMap() {
const e = this.getMapOptions();
this.mapInstance = new b(
this.element,
e,
{},
{
// rtl: this.getDirection(dir),
observer: this.mapObserver,
sender: this
}
);
}
/* Triggers public dom event handlers */
/**
* @hidden
*/
trigger(e, t) {
const s = e === "click" ? "mapClick" : e, n = y(s, t, this), o = "on" + s.charAt(0).toUpperCase() + s.slice(1), r = this.observersStore.getState();
let i = !1;
for (let c = 0; c < r.length; c++)
r[c].trigger(s, t) && (i = !0);
return i === !1 && n && this.props.hasOwnProperty(o) ? (this.props[o].call(void 0, n), n.isDefaultPrevented && n.isDefaultPrevented()) : i;
}
/* Used by (event)InstanceObserver to check the wrapper for supported events */
/**
* @hidden
*/
requiresHandlers(e) {
for (let t = 0; t < e.length; t++) {
const s = e[t], n = "on" + s.charAt(0).toUpperCase() + s.slice(1);
if (this.props.hasOwnProperty(n))
return !0;
}
return !1;
}
/**
* @hidden
*/
triggerDomEvent(e, t) {
const s = this.observersStore.getState();
let n = !1;
for (let o = 0; o < s.length; o++)
s[o].trigger(e, t) && (n = !0);
return n;
}
setIcons(e) {
const { type: t, icons: s = {} } = e, n = { ...v }, o = {
mapMarkerTargetIcon: s.mapMarkerTargetIcon,
mapMarkerIcon: s.mapMarkerIcon,
plusIcon: s.plusIcon,
minusIcon: s.minusIcon,
caretAltUpIcon: s.caretAltUpIcon,
caretAltDownIcon: s.caretAltDownIcon,
caretAltLeftIcon: s.caretAltLeftIcon,
caretAltRightIcon: s.caretAltRightIcon
};
let r;
for (r in o)
if (o[r]) {
const i = o[r];
i && typeof i != "string" && (n[r] = i);
}
return this.svgIcons = n, this.iconsType = t || I, null;
}
};
p.propTypes = {
dir: g.string
}, p.defaultProps = {};
let f = p;
export {
f as Map
};