react-bkoi-gl 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +9 -0
- package/dist/index.cjs +137 -111
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +370 -0
- package/dist/index.d.ts +370 -2
- package/dist/index.js +1434 -2
- package/dist/index.js.map +1 -1
- package/dist/styles/react-bkoi-gl.css +1 -1
- package/package.json +62 -30
- package/dist/components/attribution-control.d.ts +0 -9
- package/dist/components/attribution-control.js +0 -20
- package/dist/components/attribution-control.js.map +0 -1
- package/dist/components/fullscreen-control.d.ts +0 -12
- package/dist/components/fullscreen-control.js +0 -21
- package/dist/components/fullscreen-control.js.map +0 -1
- package/dist/components/geolocate-control.d.ts +0 -21
- package/dist/components/geolocate-control.js +0 -46
- package/dist/components/geolocate-control.js.map +0 -1
- package/dist/components/layer.d.ts +0 -18
- package/dist/components/layer.js +0 -98
- package/dist/components/layer.js.map +0 -1
- package/dist/components/logo-control.d.ts +0 -9
- package/dist/components/logo-control.js +0 -28
- package/dist/components/logo-control.js.map +0 -1
- package/dist/components/map.d.ts +0 -27
- package/dist/components/map.js +0 -108
- package/dist/components/map.js.map +0 -1
- package/dist/components/marker.d.ts +0 -18
- package/dist/components/marker.js +0 -105
- package/dist/components/marker.js.map +0 -1
- package/dist/components/navigation-control.d.ts +0 -9
- package/dist/components/navigation-control.js +0 -19
- package/dist/components/navigation-control.js.map +0 -1
- package/dist/components/popup.d.ts +0 -15
- package/dist/components/popup.js +0 -68
- package/dist/components/popup.js.map +0 -1
- package/dist/components/scale-control.d.ts +0 -11
- package/dist/components/scale-control.js +0 -31
- package/dist/components/scale-control.js.map +0 -1
- package/dist/components/source.d.ts +0 -6
- package/dist/components/source.js +0 -95
- package/dist/components/source.js.map +0 -1
- package/dist/components/terrain-control.d.ts +0 -10
- package/dist/components/terrain-control.js +0 -19
- package/dist/components/terrain-control.js.map +0 -1
- package/dist/components/use-control.d.ts +0 -9
- package/dist/components/use-control.js +0 -30
- package/dist/components/use-control.js.map +0 -1
- package/dist/components/use-map.d.ts +0 -19
- package/dist/components/use-map.js +0 -54
- package/dist/components/use-map.js.map +0 -1
- package/dist/exports-maplibre-gl.d.ts +0 -33
- package/dist/exports-maplibre-gl.js +0 -21
- package/dist/exports-maplibre-gl.js.map +0 -1
- package/dist/maplibre/create-ref.d.ts +0 -9
- package/dist/maplibre/create-ref.js +0 -30
- package/dist/maplibre/create-ref.js.map +0 -1
- package/dist/maplibre/maplibre.d.ts +0 -81
- package/dist/maplibre/maplibre.js +0 -387
- package/dist/maplibre/maplibre.js.map +0 -1
- package/dist/styles.d.js +0 -2
- package/dist/styles.d.js.map +0 -1
- package/dist/tsconfig.build.tsbuildinfo +0 -1
- package/dist/types/common.d.ts +0 -20
- package/dist/types/common.js +0 -2
- package/dist/types/common.js.map +0 -1
- package/dist/types/events.d.ts +0 -80
- package/dist/types/events.js +0 -2
- package/dist/types/events.js.map +0 -1
- package/dist/types/internal.d.ts +0 -14
- package/dist/types/internal.js +0 -2
- package/dist/types/internal.js.map +0 -1
- package/dist/types/lib.d.ts +0 -40
- package/dist/types/lib.js +0 -2
- package/dist/types/lib.js.map +0 -1
- package/dist/types/style-spec.d.ts +0 -1
- package/dist/types/style-spec.js +0 -2
- package/dist/types/style-spec.js.map +0 -1
- package/dist/utils/apply-react-style.d.ts +0 -2
- package/dist/utils/apply-react-style.js +0 -16
- package/dist/utils/apply-react-style.js.map +0 -1
- package/dist/utils/assert.d.ts +0 -1
- package/dist/utils/assert.js +0 -6
- package/dist/utils/assert.js.map +0 -1
- package/dist/utils/compare-class-names.d.ts +0 -2
- package/dist/utils/compare-class-names.js +0 -23
- package/dist/utils/compare-class-names.js.map +0 -1
- package/dist/utils/deep-equal.d.ts +0 -15
- package/dist/utils/deep-equal.js +0 -46
- package/dist/utils/deep-equal.js.map +0 -1
- package/dist/utils/set-globals.d.ts +0 -20
- package/dist/utils/set-globals.js +0 -31
- package/dist/utils/set-globals.js.map +0 -1
- package/dist/utils/style-utils.d.ts +0 -3
- package/dist/utils/style-utils.js +0 -42
- package/dist/utils/style-utils.js.map +0 -1
- package/dist/utils/transform.d.ts +0 -18
- package/dist/utils/transform.js +0 -33
- package/dist/utils/transform.js.map +0 -1
- package/dist/utils/use-isomorphic-layout-effect.d.ts +0 -3
- package/dist/utils/use-isomorphic-layout-effect.js +0 -4
- package/dist/utils/use-isomorphic-layout-effect.js.map +0 -1
- package/src/components/attribution-control.ts +0 -56
- package/src/components/fullscreen-control.ts +0 -40
- package/src/components/geolocate-control.ts +0 -96
- package/src/components/layer.ts +0 -141
- package/src/components/logo-control.ts +0 -44
- package/src/components/map.tsx +0 -166
- package/src/components/marker.ts +0 -155
- package/src/components/navigation-control.ts +0 -28
- package/src/components/popup.ts +0 -113
- package/src/components/scale-control.ts +0 -44
- package/src/components/source.ts +0 -159
- package/src/components/terrain-control.ts +0 -29
- package/src/components/use-control.ts +0 -68
- package/src/components/use-map.tsx +0 -71
- package/src/exports-maplibre-gl.ts +0 -37
- package/src/index.ts +0 -3
- package/src/maplibre/create-ref.ts +0 -70
- package/src/maplibre/maplibre.ts +0 -624
- package/src/styles.d.ts +0 -4
- package/src/types/common.ts +0 -34
- package/src/types/events.ts +0 -133
- package/src/types/internal.ts +0 -26
- package/src/types/lib.ts +0 -84
- package/src/types/style-spec.ts +0 -34
- package/src/utils/apply-react-style.ts +0 -24
- package/src/utils/assert.ts +0 -5
- package/src/utils/compare-class-names.ts +0 -29
- package/src/utils/deep-equal.ts +0 -61
- package/src/utils/set-globals.ts +0 -51
- package/src/utils/style-utils.ts +0 -68
- package/src/utils/transform.ts +0 -58
- package/src/utils/use-isomorphic-layout-effect.ts +0 -8
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { useEffect, memo } from "react";
|
|
2
|
-
import { applyReactStyle } from "../utils/apply-react-style.js";
|
|
3
|
-
import { useControl } from "./use-control.js";
|
|
4
|
-
function _FullscreenControl(props) {
|
|
5
|
-
const ctrl = useControl(_ref => {
|
|
6
|
-
let {
|
|
7
|
-
mapLib
|
|
8
|
-
} = _ref;
|
|
9
|
-
return new mapLib.FullscreenControl({
|
|
10
|
-
container: props.containerId && document.getElementById(props.containerId)
|
|
11
|
-
});
|
|
12
|
-
}, {
|
|
13
|
-
position: props.position
|
|
14
|
-
});
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
applyReactStyle(ctrl._controlContainer, props.style);
|
|
17
|
-
}, [props.style]);
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
export const FullscreenControl = memo(_FullscreenControl);
|
|
21
|
-
//# sourceMappingURL=fullscreen-control.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fullscreen-control.js","names":["useEffect","memo","applyReactStyle","useControl","_FullscreenControl","props","ctrl","_ref","mapLib","FullscreenControl","container","containerId","document","getElementById","position","_controlContainer","style"],"sources":["../../src/components/fullscreen-control.ts"],"sourcesContent":["/* global document */\nimport * as React from \"react\";\nimport { useEffect, memo } from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\nimport { useControl } from \"./use-control\";\n\nimport type { ControlPosition, FullscreenControlOptions } from \"../types/lib\";\n\nexport type FullscreenControlProps = Omit<\n FullscreenControlOptions,\n \"container\"\n> & {\n /** Id of the DOM element which should be made full screen. By default, the map container\n * element will be made full screen. */\n containerId?: string;\n /** Placement of the control relative to the map. */\n position?: ControlPosition;\n /** CSS style override, applied to the control's container */\n style?: React.CSSProperties;\n};\n\nfunction _FullscreenControl(props: FullscreenControlProps) {\n const ctrl = useControl(\n ({ mapLib }) =>\n new mapLib.FullscreenControl({\n container:\n props.containerId && document.getElementById(props.containerId),\n }),\n { position: props.position },\n );\n\n useEffect(() => {\n applyReactStyle(ctrl._controlContainer, props.style);\n }, [props.style]);\n\n return null;\n}\n\nexport const FullscreenControl: React.FC<FullscreenControlProps> =\n memo(_FullscreenControl);\n"],"mappings":"AAEA,SAASA,SAAS,EAAEC,IAAI,QAAQ,OAAO;AAAC,SAC/BC,eAAe;AAAA,SACfC,UAAU;AAiBnB,SAASC,kBAAkBA,CAACC,KAA6B,EAAE;EACzD,MAAMC,IAAI,GAAGH,UAAU,CACrBI,IAAA;IAAA,IAAC;MAAEC;IAAO,CAAC,GAAAD,IAAA;IAAA,OACT,IAAIC,MAAM,CAACC,iBAAiB,CAAC;MAC3BC,SAAS,EACPL,KAAK,CAACM,WAAW,IAAIC,QAAQ,CAACC,cAAc,CAACR,KAAK,CAACM,WAAW;IAClE,CAAC,CAAC;EAAA,GACJ;IAAEG,QAAQ,EAAET,KAAK,CAACS;EAAS,CAC7B,CAAC;EAEDd,SAAS,CAAC,MAAM;IACdE,eAAe,CAACI,IAAI,CAACS,iBAAiB,EAAEV,KAAK,CAACW,KAAK,CAAC;EACtD,CAAC,EAAE,CAACX,KAAK,CAACW,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,OAAO,MAAMP,iBAAmD,GAC9DR,IAAI,CAACG,kBAAkB,CAAC","ignoreList":[]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { ControlPosition, GeolocateControlOptions } from "../types/lib";
|
|
3
|
-
import type { GeolocateEvent, GeolocateResultEvent, GeolocateErrorEvent } from "../types/events";
|
|
4
|
-
export type GeolocateControlProps = GeolocateControlOptions & {
|
|
5
|
-
/** Placement of the control relative to the map. */
|
|
6
|
-
position?: ControlPosition;
|
|
7
|
-
/** CSS style override, applied to the control's container */
|
|
8
|
-
style?: React.CSSProperties;
|
|
9
|
-
/** Called on each Geolocation API position update that returned as success. */
|
|
10
|
-
onGeolocate?: (e: GeolocateResultEvent) => void;
|
|
11
|
-
/** Called on each Geolocation API position update that returned as an error. */
|
|
12
|
-
onError?: (e: GeolocateErrorEvent) => void;
|
|
13
|
-
/** Called on each Geolocation API position update that returned as success but user position
|
|
14
|
-
* is out of map `maxBounds`. */
|
|
15
|
-
onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
|
|
16
|
-
/** Called when the GeolocateControl changes to the active lock state. */
|
|
17
|
-
onTrackUserLocationStart?: (e: GeolocateEvent) => void;
|
|
18
|
-
/** Called when the GeolocateControl changes to the background state. */
|
|
19
|
-
onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
|
|
20
|
-
};
|
|
21
|
-
export declare const GeolocateControl: React.FC<GeolocateControlProps>;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { useImperativeHandle, useRef, useEffect, forwardRef, memo } from "react";
|
|
2
|
-
import { applyReactStyle } from "../utils/apply-react-style.js";
|
|
3
|
-
import { useControl } from "./use-control.js";
|
|
4
|
-
function _GeolocateControl(props, ref) {
|
|
5
|
-
const thisRef = useRef({
|
|
6
|
-
props
|
|
7
|
-
});
|
|
8
|
-
const ctrl = useControl(_ref => {
|
|
9
|
-
let {
|
|
10
|
-
mapLib
|
|
11
|
-
} = _ref;
|
|
12
|
-
const gc = new mapLib.GeolocateControl(props);
|
|
13
|
-
const setupUI = gc._setupUI;
|
|
14
|
-
gc._setupUI = () => {
|
|
15
|
-
if (!gc._container.hasChildNodes()) {
|
|
16
|
-
setupUI();
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
gc.on("geolocate", e => {
|
|
20
|
-
thisRef.current.props.onGeolocate?.(e);
|
|
21
|
-
});
|
|
22
|
-
gc.on("error", e => {
|
|
23
|
-
thisRef.current.props.onError?.(e);
|
|
24
|
-
});
|
|
25
|
-
gc.on("outofmaxbounds", e => {
|
|
26
|
-
thisRef.current.props.onOutOfMaxBounds?.(e);
|
|
27
|
-
});
|
|
28
|
-
gc.on("trackuserlocationstart", e => {
|
|
29
|
-
thisRef.current.props.onTrackUserLocationStart?.(e);
|
|
30
|
-
});
|
|
31
|
-
gc.on("trackuserlocationend", e => {
|
|
32
|
-
thisRef.current.props.onTrackUserLocationEnd?.(e);
|
|
33
|
-
});
|
|
34
|
-
return gc;
|
|
35
|
-
}, {
|
|
36
|
-
position: props.position
|
|
37
|
-
});
|
|
38
|
-
thisRef.current.props = props;
|
|
39
|
-
useImperativeHandle(ref, () => ctrl, []);
|
|
40
|
-
useEffect(() => {
|
|
41
|
-
applyReactStyle(ctrl._container, props.style);
|
|
42
|
-
}, [props.style]);
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
export const GeolocateControl = memo(forwardRef(_GeolocateControl));
|
|
46
|
-
//# sourceMappingURL=geolocate-control.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"geolocate-control.js","names":["useImperativeHandle","useRef","useEffect","forwardRef","memo","applyReactStyle","useControl","_GeolocateControl","props","ref","thisRef","ctrl","_ref","mapLib","gc","GeolocateControl","setupUI","_setupUI","_container","hasChildNodes","on","e","current","onGeolocate","onError","onOutOfMaxBounds","onTrackUserLocationStart","onTrackUserLocationEnd","position","style"],"sources":["../../src/components/geolocate-control.ts"],"sourcesContent":["import * as React from \"react\";\nimport {\n useImperativeHandle,\n useRef,\n useEffect,\n forwardRef,\n memo,\n} from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\nimport { useControl } from \"./use-control\";\n\nimport type {\n ControlPosition,\n GeolocateControl as GeolocateControlInstance,\n GeolocateControlOptions,\n} from \"../types/lib\";\nimport type {\n GeolocateEvent,\n GeolocateResultEvent,\n GeolocateErrorEvent,\n} from \"../types/events\";\n\nexport type GeolocateControlProps = GeolocateControlOptions & {\n /** Placement of the control relative to the map. */\n position?: ControlPosition;\n /** CSS style override, applied to the control's container */\n style?: React.CSSProperties;\n\n /** Called on each Geolocation API position update that returned as success. */\n onGeolocate?: (e: GeolocateResultEvent) => void;\n /** Called on each Geolocation API position update that returned as an error. */\n onError?: (e: GeolocateErrorEvent) => void;\n /** Called on each Geolocation API position update that returned as success but user position\n * is out of map `maxBounds`. */\n onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;\n /** Called when the GeolocateControl changes to the active lock state. */\n onTrackUserLocationStart?: (e: GeolocateEvent) => void;\n /** Called when the GeolocateControl changes to the background state. */\n onTrackUserLocationEnd?: (e: GeolocateEvent) => void;\n};\n\nfunction _GeolocateControl(\n props: GeolocateControlProps,\n ref: React.Ref<GeolocateControlInstance>,\n) {\n const thisRef = useRef({ props });\n\n const ctrl = useControl(\n ({ mapLib }) => {\n const gc = new mapLib.GeolocateControl(props);\n\n // Hack: fix GeolocateControl reuse\n // When using React strict mode, the component is mounted twice.\n // GeolocateControl's UI creation is asynchronous. Removing and adding it back causes the UI to be initialized twice.\n const setupUI = gc._setupUI;\n gc._setupUI = () => {\n if (!gc._container.hasChildNodes()) {\n setupUI();\n }\n };\n\n gc.on(\"geolocate\", (e) => {\n thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent);\n });\n gc.on(\"error\", (e) => {\n thisRef.current.props.onError?.(e as GeolocateErrorEvent);\n });\n gc.on(\"outofmaxbounds\", (e) => {\n thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent);\n });\n gc.on(\"trackuserlocationstart\", (e) => {\n thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent);\n });\n gc.on(\"trackuserlocationend\", (e) => {\n thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent);\n });\n\n return gc;\n },\n { position: props.position },\n );\n\n thisRef.current.props = props;\n\n useImperativeHandle(ref, () => ctrl, []);\n\n useEffect(() => {\n applyReactStyle(ctrl._container, props.style);\n }, [props.style]);\n\n return null;\n}\n\nexport const GeolocateControl: React.FC<GeolocateControlProps> = memo(\n forwardRef(_GeolocateControl),\n);\n"],"mappings":"AACA,SACEA,mBAAmB,EACnBC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,IAAI,QACC,OAAO;AAAC,SACNC,eAAe;AAAA,SACfC,UAAU;AAgCnB,SAASC,iBAAiBA,CACxBC,KAA4B,EAC5BC,GAAwC,EACxC;EACA,MAAMC,OAAO,GAAGT,MAAM,CAAC;IAAEO;EAAM,CAAC,CAAC;EAEjC,MAAMG,IAAI,GAAGL,UAAU,CACrBM,IAAA,IAAgB;IAAA,IAAf;MAAEC;IAAO,CAAC,GAAAD,IAAA;IACT,MAAME,EAAE,GAAG,IAAID,MAAM,CAACE,gBAAgB,CAACP,KAAK,CAAC;IAK7C,MAAMQ,OAAO,GAAGF,EAAE,CAACG,QAAQ;IAC3BH,EAAE,CAACG,QAAQ,GAAG,MAAM;MAClB,IAAI,CAACH,EAAE,CAACI,UAAU,CAACC,aAAa,CAAC,CAAC,EAAE;QAClCH,OAAO,CAAC,CAAC;MACX;IACF,CAAC;IAEDF,EAAE,CAACM,EAAE,CAAC,WAAW,EAAGC,CAAC,IAAK;MACxBX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACe,WAAW,GAAGF,CAAyB,CAAC;IAChE,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,OAAO,EAAGC,CAAC,IAAK;MACpBX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACgB,OAAO,GAAGH,CAAwB,CAAC;IAC3D,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,gBAAgB,EAAGC,CAAC,IAAK;MAC7BX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACiB,gBAAgB,GAAGJ,CAAyB,CAAC;IACrE,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,wBAAwB,EAAGC,CAAC,IAAK;MACrCX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACkB,wBAAwB,GAAGL,CAAmB,CAAC;IACvE,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,sBAAsB,EAAGC,CAAC,IAAK;MACnCX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACmB,sBAAsB,GAAGN,CAAmB,CAAC;IACrE,CAAC,CAAC;IAEF,OAAOP,EAAE;EACX,CAAC,EACD;IAAEc,QAAQ,EAAEpB,KAAK,CAACoB;EAAS,CAC7B,CAAC;EAEDlB,OAAO,CAACY,OAAO,CAACd,KAAK,GAAGA,KAAK;EAE7BR,mBAAmB,CAACS,GAAG,EAAE,MAAME,IAAI,EAAE,EAAE,CAAC;EAExCT,SAAS,CAAC,MAAM;IACdG,eAAe,CAACM,IAAI,CAACO,UAAU,EAAEV,KAAK,CAACqB,KAAK,CAAC;EAC/C,CAAC,EAAE,CAACrB,KAAK,CAACqB,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,OAAO,MAAMd,gBAAiD,GAAGX,IAAI,CACnED,UAAU,CAACI,iBAAiB,CAC9B,CAAC","ignoreList":[]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { CustomLayerInterface } from "../types/lib";
|
|
2
|
-
import type { LayerSpecification } from "../types/style-spec";
|
|
3
|
-
type OptionalId<T> = T extends {
|
|
4
|
-
id: string;
|
|
5
|
-
} ? Omit<T, "id"> & {
|
|
6
|
-
id?: string;
|
|
7
|
-
} : T;
|
|
8
|
-
type OptionalSource<T> = T extends {
|
|
9
|
-
source: string;
|
|
10
|
-
} ? Omit<T, "source"> & {
|
|
11
|
-
source?: string;
|
|
12
|
-
} : T;
|
|
13
|
-
export type LayerProps = (OptionalSource<OptionalId<LayerSpecification>> | CustomLayerInterface) & {
|
|
14
|
-
/** If set, the layer will be inserted before the specified layer */
|
|
15
|
-
beforeId?: string;
|
|
16
|
-
};
|
|
17
|
-
export declare function Layer(props: LayerProps): any;
|
|
18
|
-
export {};
|
package/dist/components/layer.js
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { useContext, useEffect, useMemo, useState, useRef } from "react";
|
|
2
|
-
import { MapContext } from "./map.js";
|
|
3
|
-
import assert from "../utils/assert.js";
|
|
4
|
-
import { deepEqual } from "../utils/deep-equal.js";
|
|
5
|
-
function updateLayer(map, id, props, prevProps) {
|
|
6
|
-
assert(props.id === prevProps.id, "layer id changed");
|
|
7
|
-
assert(props.type === prevProps.type, "layer type changed");
|
|
8
|
-
if (props.type === "custom" || prevProps.type === "custom") {
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
const {
|
|
12
|
-
layout = {},
|
|
13
|
-
paint = {},
|
|
14
|
-
filter,
|
|
15
|
-
minzoom,
|
|
16
|
-
maxzoom,
|
|
17
|
-
beforeId
|
|
18
|
-
} = props;
|
|
19
|
-
if (beforeId !== prevProps.beforeId) {
|
|
20
|
-
map.moveLayer(id, beforeId);
|
|
21
|
-
}
|
|
22
|
-
if (layout !== prevProps.layout) {
|
|
23
|
-
const prevLayout = prevProps.layout || {};
|
|
24
|
-
for (const key in layout) {
|
|
25
|
-
if (!deepEqual(layout[key], prevLayout[key])) {
|
|
26
|
-
map.setLayoutProperty(id, key, layout[key]);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
for (const key in prevLayout) {
|
|
30
|
-
if (!layout.hasOwnProperty(key)) {
|
|
31
|
-
map.setLayoutProperty(id, key, undefined);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
if (paint !== prevProps.paint) {
|
|
36
|
-
const prevPaint = prevProps.paint || {};
|
|
37
|
-
for (const key in paint) {
|
|
38
|
-
if (!deepEqual(paint[key], prevPaint[key])) {
|
|
39
|
-
map.setPaintProperty(id, key, paint[key]);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
for (const key in prevPaint) {
|
|
43
|
-
if (!paint.hasOwnProperty(key)) {
|
|
44
|
-
map.setPaintProperty(id, key, undefined);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
if (!deepEqual(filter, prevProps.filter)) {
|
|
49
|
-
map.setFilter(id, filter);
|
|
50
|
-
}
|
|
51
|
-
if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
|
|
52
|
-
map.setLayerZoomRange(id, minzoom, maxzoom);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
function createLayer(map, id, props) {
|
|
56
|
-
if (map.style && map.style._loaded && (!("source" in props) || map.getSource(props.source))) {
|
|
57
|
-
const options = {
|
|
58
|
-
...props,
|
|
59
|
-
id
|
|
60
|
-
};
|
|
61
|
-
delete options.beforeId;
|
|
62
|
-
map.addLayer(options, props.beforeId);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
let layerCounter = 0;
|
|
66
|
-
export function Layer(props) {
|
|
67
|
-
const map = useContext(MapContext).map.getMap();
|
|
68
|
-
const propsRef = useRef(props);
|
|
69
|
-
const [, setStyleLoaded] = useState(0);
|
|
70
|
-
const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);
|
|
71
|
-
useEffect(() => {
|
|
72
|
-
if (map) {
|
|
73
|
-
const forceUpdate = () => setStyleLoaded(version => version + 1);
|
|
74
|
-
map.on("styledata", forceUpdate);
|
|
75
|
-
forceUpdate();
|
|
76
|
-
return () => {
|
|
77
|
-
map.off("styledata", forceUpdate);
|
|
78
|
-
if (map.style && map.style._loaded && map.getLayer(id)) {
|
|
79
|
-
map.removeLayer(id);
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
}
|
|
83
|
-
return undefined;
|
|
84
|
-
}, [map]);
|
|
85
|
-
const layer = map && map.style && map.getLayer(id);
|
|
86
|
-
if (layer) {
|
|
87
|
-
try {
|
|
88
|
-
updateLayer(map, id, props, propsRef.current);
|
|
89
|
-
} catch (error) {
|
|
90
|
-
console.warn(error);
|
|
91
|
-
}
|
|
92
|
-
} else {
|
|
93
|
-
createLayer(map, id, props);
|
|
94
|
-
}
|
|
95
|
-
propsRef.current = props;
|
|
96
|
-
return null;
|
|
97
|
-
}
|
|
98
|
-
//# sourceMappingURL=layer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"layer.js","names":["useContext","useEffect","useMemo","useState","useRef","MapContext","assert","deepEqual","updateLayer","map","id","props","prevProps","type","layout","paint","filter","minzoom","maxzoom","beforeId","moveLayer","prevLayout","key","setLayoutProperty","hasOwnProperty","undefined","prevPaint","setPaintProperty","setFilter","setLayerZoomRange","createLayer","style","_loaded","getSource","source","options","addLayer","layerCounter","Layer","getMap","propsRef","setStyleLoaded","forceUpdate","version","on","off","getLayer","removeLayer","layer","current","error","console","warn"],"sources":["../../src/components/layer.ts"],"sourcesContent":["import { useContext, useEffect, useMemo, useState, useRef } from \"react\";\nimport { MapContext } from \"./map\";\nimport assert from \"../utils/assert\";\nimport { deepEqual } from \"../utils/deep-equal\";\n\nimport type { Map as MapInstance, CustomLayerInterface } from \"../types/lib\";\nimport type { LayerSpecification } from \"../types/style-spec\";\n\n// Omiting property from a union type, see\n// https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230\ntype OptionalId<T> = T extends { id: string }\n ? Omit<T, \"id\"> & { id?: string }\n : T;\ntype OptionalSource<T> = T extends { source: string }\n ? Omit<T, \"source\"> & { source?: string }\n : T;\n\nexport type LayerProps = (\n | OptionalSource<OptionalId<LayerSpecification>>\n | CustomLayerInterface\n) & {\n /** If set, the layer will be inserted before the specified layer */\n beforeId?: string;\n};\n\n/* eslint-disable complexity, max-statements */\nfunction updateLayer(\n map: MapInstance,\n id: string,\n props: LayerProps,\n prevProps: LayerProps,\n) {\n assert(props.id === prevProps.id, \"layer id changed\");\n assert(props.type === prevProps.type, \"layer type changed\");\n\n if (props.type === \"custom\" || prevProps.type === \"custom\") {\n return;\n }\n\n // @ts-ignore filter does not exist in some Layer types\n const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = props;\n\n if (beforeId !== prevProps.beforeId) {\n map.moveLayer(id, beforeId);\n }\n if (layout !== prevProps.layout) {\n const prevLayout = prevProps.layout || {};\n for (const key in layout) {\n if (!deepEqual(layout[key], prevLayout[key])) {\n map.setLayoutProperty(id, key, layout[key]);\n }\n }\n for (const key in prevLayout) {\n if (!layout.hasOwnProperty(key)) {\n map.setLayoutProperty(id, key, undefined);\n }\n }\n }\n if (paint !== prevProps.paint) {\n const prevPaint = prevProps.paint || {};\n for (const key in paint) {\n if (!deepEqual(paint[key], prevPaint[key])) {\n map.setPaintProperty(id, key, paint[key]);\n }\n }\n for (const key in prevPaint) {\n if (!paint.hasOwnProperty(key)) {\n map.setPaintProperty(id, key, undefined);\n }\n }\n }\n\n // @ts-ignore filter does not exist in some Layer types\n if (!deepEqual(filter, prevProps.filter)) {\n map.setFilter(id, filter);\n }\n if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {\n map.setLayerZoomRange(id, minzoom, maxzoom);\n }\n}\n\nfunction createLayer(map: MapInstance, id: string, props: LayerProps) {\n // @ts-ignore\n if (\n map.style &&\n map.style._loaded &&\n (!(\"source\" in props) || map.getSource(props.source))\n ) {\n const options: LayerProps = { ...props, id };\n delete options.beforeId;\n\n // @ts-ignore\n map.addLayer(options, props.beforeId);\n }\n}\n\n/* eslint-enable complexity, max-statements */\n\nlet layerCounter = 0;\n\nexport function Layer(props: LayerProps) {\n const map = useContext(MapContext).map.getMap();\n const propsRef = useRef(props);\n const [, setStyleLoaded] = useState(0);\n\n const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);\n\n useEffect(() => {\n if (map) {\n const forceUpdate = () => setStyleLoaded((version) => version + 1);\n map.on(\"styledata\", forceUpdate);\n forceUpdate();\n\n return () => {\n map.off(\"styledata\", forceUpdate);\n // @ts-ignore\n if (map.style && map.style._loaded && map.getLayer(id)) {\n map.removeLayer(id);\n }\n };\n }\n return undefined;\n }, [map]);\n\n // @ts-ignore\n const layer = map && map.style && map.getLayer(id);\n if (layer) {\n try {\n updateLayer(map, id, props, propsRef.current);\n } catch (error) {\n console.warn(error); // eslint-disable-line\n }\n } else {\n createLayer(map, id, props);\n }\n\n // Store last rendered props\n propsRef.current = props;\n\n return null;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { ControlPosition, LogoControlOptions } from "../types/lib";
|
|
3
|
-
export type LogoControlProps = LogoControlOptions & {
|
|
4
|
-
/** Placement of the control relative to the map. */
|
|
5
|
-
position?: ControlPosition;
|
|
6
|
-
/** CSS style override, applied to the control's container */
|
|
7
|
-
style?: React.CSSProperties;
|
|
8
|
-
};
|
|
9
|
-
export declare const LogoControl: React.FC<LogoControlProps>;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { useEffect, memo } from "react";
|
|
2
|
-
import { applyReactStyle } from "../utils/apply-react-style.js";
|
|
3
|
-
import { useControl } from "./use-control.js";
|
|
4
|
-
function _LogoControl(props) {
|
|
5
|
-
const ctrl = useControl(_ref => {
|
|
6
|
-
let {
|
|
7
|
-
mapLib
|
|
8
|
-
} = _ref;
|
|
9
|
-
return new mapLib.LogoControl(props);
|
|
10
|
-
}, {
|
|
11
|
-
position: props.position
|
|
12
|
-
});
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
applyReactStyle(ctrl._container, props.style);
|
|
15
|
-
const logoElement = ctrl._container?.querySelector(".maplibregl-ctrl-logo");
|
|
16
|
-
if (logoElement) {
|
|
17
|
-
logoElement.href = "https://barikoi.com/";
|
|
18
|
-
logoElement.setAttribute("aria-label", "Barikoi logo");
|
|
19
|
-
logoElement.target = "_blank";
|
|
20
|
-
logoElement.rel = "noopener nofollow";
|
|
21
|
-
logoElement.style.cursor = "pointer";
|
|
22
|
-
logoElement.replaceWith(logoElement.cloneNode(true));
|
|
23
|
-
}
|
|
24
|
-
}, [props.style, ctrl._container]);
|
|
25
|
-
return null;
|
|
26
|
-
}
|
|
27
|
-
export const LogoControl = memo(_LogoControl);
|
|
28
|
-
//# sourceMappingURL=logo-control.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"logo-control.js","names":["useEffect","memo","applyReactStyle","useControl","_LogoControl","props","ctrl","_ref","mapLib","LogoControl","position","_container","style","logoElement","querySelector","href","setAttribute","target","rel","cursor","replaceWith","cloneNode"],"sources":["../../src/components/logo-control.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport * as React from \"react\";\nimport { useEffect, memo } from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\nimport { useControl } from \"./use-control\";\n\nimport type { ControlPosition, LogoControlOptions } from \"../types/lib\";\n\nexport type LogoControlProps = LogoControlOptions & {\n /** Placement of the control relative to the map. */\n position?: ControlPosition;\n /** CSS style override, applied to the control's container */\n style?: React.CSSProperties;\n};\n\nfunction _LogoControl(props: LogoControlProps) {\n const ctrl = useControl(({ mapLib }) => new mapLib.LogoControl(props), {\n position: props.position,\n });\n\n useEffect(() => {\n applyReactStyle(ctrl._container, props.style);\n\n // Update the DOM structure and attributes directly\n const logoElement = ctrl._container?.querySelector(\n \".maplibregl-ctrl-logo\",\n ) as HTMLAnchorElement | null;\n if (logoElement) {\n // Update the link attributes\n logoElement.href = \"https://barikoi.com/\";\n logoElement.setAttribute(\"aria-label\", \"Barikoi logo\");\n logoElement.target = \"_blank\";\n logoElement.rel = \"noopener nofollow\";\n logoElement.style.cursor = \"pointer\";\n\n // Remove any existing click handlers\n logoElement.replaceWith(logoElement.cloneNode(true));\n }\n }, [props.style, ctrl._container]);\n\n return null;\n}\n\nexport const LogoControl: React.FC<LogoControlProps> = memo(_LogoControl);\n"],"mappings":"AAEA,SAASA,SAAS,EAAEC,IAAI,QAAQ,OAAO;AAAC,SAC/BC,eAAe;AAAA,SACfC,UAAU;AAWnB,SAASC,YAAYA,CAACC,KAAuB,EAAE;EAC7C,MAAMC,IAAI,GAAGH,UAAU,CAACI,IAAA;IAAA,IAAC;MAAEC;IAAO,CAAC,GAAAD,IAAA;IAAA,OAAK,IAAIC,MAAM,CAACC,WAAW,CAACJ,KAAK,CAAC;EAAA,GAAE;IACrEK,QAAQ,EAAEL,KAAK,CAACK;EAClB,CAAC,CAAC;EAEFV,SAAS,CAAC,MAAM;IACdE,eAAe,CAACI,IAAI,CAACK,UAAU,EAAEN,KAAK,CAACO,KAAK,CAAC;IAG7C,MAAMC,WAAW,GAAGP,IAAI,CAACK,UAAU,EAAEG,aAAa,CAChD,uBACF,CAA6B;IAC7B,IAAID,WAAW,EAAE;MAEfA,WAAW,CAACE,IAAI,GAAG,sBAAsB;MACzCF,WAAW,CAACG,YAAY,CAAC,YAAY,EAAE,cAAc,CAAC;MACtDH,WAAW,CAACI,MAAM,GAAG,QAAQ;MAC7BJ,WAAW,CAACK,GAAG,GAAG,mBAAmB;MACrCL,WAAW,CAACD,KAAK,CAACO,MAAM,GAAG,SAAS;MAGpCN,WAAW,CAACO,WAAW,CAACP,WAAW,CAACQ,SAAS,CAAC,IAAI,CAAC,CAAC;IACtD;EACF,CAAC,EAAE,CAAChB,KAAK,CAACO,KAAK,EAAEN,IAAI,CAACK,UAAU,CAAC,CAAC;EAElC,OAAO,IAAI;AACb;AAEA,OAAO,MAAMF,WAAuC,GAAGR,IAAI,CAACG,YAAY,CAAC","ignoreList":[]}
|
package/dist/components/map.d.ts
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { MaplibreProps } from "../maplibre/maplibre";
|
|
3
|
-
import { MapRef } from "../maplibre/create-ref";
|
|
4
|
-
import type { CSSProperties } from "react";
|
|
5
|
-
import { GlobalSettings } from "../utils/set-globals";
|
|
6
|
-
import type { MapLib, MapOptions } from "../types/lib";
|
|
7
|
-
export type MapContextValue = {
|
|
8
|
-
mapLib: MapLib;
|
|
9
|
-
map: MapRef;
|
|
10
|
-
};
|
|
11
|
-
export declare const MapContext: React.Context<MapContextValue>;
|
|
12
|
-
type MapInitOptions = Omit<MapOptions, "style" | "container" | "bounds" | "fitBoundsOptions" | "center">;
|
|
13
|
-
export type MapProps = MapInitOptions & MaplibreProps & GlobalSettings & {
|
|
14
|
-
mapLib?: MapLib | Promise<MapLib>;
|
|
15
|
-
reuseMaps?: boolean;
|
|
16
|
-
/** Map container id */
|
|
17
|
-
id?: string;
|
|
18
|
-
/** Map container CSS style */
|
|
19
|
-
style?: CSSProperties;
|
|
20
|
-
children?: React.ReactNode;
|
|
21
|
-
/** Show Barikoi logo (default: true) */
|
|
22
|
-
showBarikoiLogo?: boolean;
|
|
23
|
-
/** Show Attribution (default: true) */
|
|
24
|
-
showAttribution?: boolean;
|
|
25
|
-
} & React.RefAttributes<MapRef>;
|
|
26
|
-
export declare const Map: React.FC<MapProps>;
|
|
27
|
-
export {};
|
package/dist/components/map.js
DELETED
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useState, useRef, useEffect, useContext, useMemo, useImperativeHandle } from "react";
|
|
3
|
-
import { MountedMapsContext } from "./use-map.js";
|
|
4
|
-
import Maplibre from "../maplibre/maplibre.js";
|
|
5
|
-
import createRef from "../maplibre/create-ref.js";
|
|
6
|
-
import useIsomorphicLayoutEffect from "../utils/use-isomorphic-layout-effect.js";
|
|
7
|
-
import setGlobals from "../utils/set-globals.js";
|
|
8
|
-
import { LogoControl } from "./logo-control.js";
|
|
9
|
-
import { AttributionControl } from "./attribution-control.js";
|
|
10
|
-
export const MapContext = React.createContext(null);
|
|
11
|
-
function _Map(props, ref) {
|
|
12
|
-
const mountedMapsContext = useContext(MountedMapsContext);
|
|
13
|
-
const [mapInstance, setMapInstance] = useState(null);
|
|
14
|
-
const containerRef = useRef();
|
|
15
|
-
const {
|
|
16
|
-
current: contextValue
|
|
17
|
-
} = useRef({
|
|
18
|
-
mapLib: null,
|
|
19
|
-
map: null
|
|
20
|
-
});
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
const mapLib = props.mapLib;
|
|
23
|
-
let isMounted = true;
|
|
24
|
-
let maplibre;
|
|
25
|
-
Promise.resolve(mapLib || import("maplibre-gl")).then(module => {
|
|
26
|
-
if (!isMounted) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
if (!module) {
|
|
30
|
-
throw new Error("Invalid mapLib");
|
|
31
|
-
}
|
|
32
|
-
const mapboxgl = "Map" in module ? module : module.default;
|
|
33
|
-
if (!mapboxgl.Map) {
|
|
34
|
-
throw new Error("Invalid mapLib");
|
|
35
|
-
}
|
|
36
|
-
setGlobals(mapboxgl, props);
|
|
37
|
-
if (props.reuseMaps) {
|
|
38
|
-
maplibre = Maplibre.reuse(props, containerRef.current);
|
|
39
|
-
}
|
|
40
|
-
if (!maplibre) {
|
|
41
|
-
maplibre = new Maplibre(mapboxgl.Map, {
|
|
42
|
-
...props,
|
|
43
|
-
attributionControl: false
|
|
44
|
-
}, containerRef.current);
|
|
45
|
-
}
|
|
46
|
-
contextValue.map = createRef(maplibre);
|
|
47
|
-
contextValue.mapLib = mapboxgl;
|
|
48
|
-
setMapInstance(maplibre);
|
|
49
|
-
mountedMapsContext?.onMapMount(contextValue.map, props.id);
|
|
50
|
-
}).catch(error => {
|
|
51
|
-
const {
|
|
52
|
-
onError
|
|
53
|
-
} = props;
|
|
54
|
-
if (onError) {
|
|
55
|
-
onError({
|
|
56
|
-
type: "error",
|
|
57
|
-
target: null,
|
|
58
|
-
originalEvent: null,
|
|
59
|
-
error
|
|
60
|
-
});
|
|
61
|
-
} else {
|
|
62
|
-
console.error(error);
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
return () => {
|
|
66
|
-
isMounted = false;
|
|
67
|
-
if (maplibre) {
|
|
68
|
-
mountedMapsContext?.onMapUnmount(props.id);
|
|
69
|
-
if (props.reuseMaps) {
|
|
70
|
-
maplibre.recycle();
|
|
71
|
-
} else {
|
|
72
|
-
maplibre.destroy();
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
}, []);
|
|
77
|
-
useIsomorphicLayoutEffect(() => {
|
|
78
|
-
if (mapInstance) {
|
|
79
|
-
mapInstance.setProps(props);
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
useImperativeHandle(ref, () => contextValue.map, [mapInstance]);
|
|
83
|
-
const style = useMemo(() => ({
|
|
84
|
-
position: "relative",
|
|
85
|
-
width: "100%",
|
|
86
|
-
height: "100%",
|
|
87
|
-
...props.style
|
|
88
|
-
}), [props.style]);
|
|
89
|
-
const CHILD_CONTAINER_STYLE = {
|
|
90
|
-
height: "100%"
|
|
91
|
-
};
|
|
92
|
-
return React.createElement("div", {
|
|
93
|
-
id: props.id,
|
|
94
|
-
ref: containerRef,
|
|
95
|
-
style: style
|
|
96
|
-
}, mapInstance && React.createElement(MapContext.Provider, {
|
|
97
|
-
value: contextValue
|
|
98
|
-
}, React.createElement("div", {
|
|
99
|
-
"mapboxgl-children": "",
|
|
100
|
-
style: CHILD_CONTAINER_STYLE
|
|
101
|
-
}, React.createElement(LogoControl, {
|
|
102
|
-
position: "bottom-left"
|
|
103
|
-
}), React.createElement(AttributionControl, {
|
|
104
|
-
position: "bottom-right"
|
|
105
|
-
}), props.children)));
|
|
106
|
-
}
|
|
107
|
-
export const Map = React.forwardRef(_Map);
|
|
108
|
-
//# sourceMappingURL=map.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"map.js","names":["React","useState","useRef","useEffect","useContext","useMemo","useImperativeHandle","MountedMapsContext","Maplibre","createRef","useIsomorphicLayoutEffect","setGlobals","LogoControl","AttributionControl","MapContext","createContext","_Map","props","ref","mountedMapsContext","mapInstance","setMapInstance","containerRef","current","contextValue","mapLib","map","isMounted","maplibre","Promise","resolve","then","module","Error","mapboxgl","default","Map","reuseMaps","reuse","attributionControl","onMapMount","id","catch","error","onError","type","target","originalEvent","console","onMapUnmount","recycle","destroy","setProps","style","position","width","height","CHILD_CONTAINER_STYLE","createElement","Provider","value","children","forwardRef"],"sources":["../../src/components/map.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable react/no-unknown-property */\nimport * as React from \"react\";\nimport {\n useState,\n useRef,\n useEffect,\n useContext,\n useMemo,\n useImperativeHandle,\n} from \"react\";\n\nimport { MountedMapsContext } from \"./use-map\";\nimport Maplibre, { MaplibreProps } from \"../maplibre/maplibre\";\nimport createRef, { MapRef } from \"../maplibre/create-ref\";\n\nimport type { CSSProperties } from \"react\";\nimport useIsomorphicLayoutEffect from \"../utils/use-isomorphic-layout-effect\";\nimport setGlobals, { GlobalSettings } from \"../utils/set-globals\";\nimport type { MapLib, MapOptions } from \"../types/lib\";\nimport { LogoControl } from \"./logo-control\";\nimport { AttributionControl } from \"./attribution-control\";\n\nexport type MapContextValue = {\n mapLib: MapLib;\n map: MapRef;\n};\n\nexport const MapContext = React.createContext<MapContextValue>(null);\n\ntype MapInitOptions = Omit<\n MapOptions,\n \"style\" | \"container\" | \"bounds\" | \"fitBoundsOptions\" | \"center\"\n>;\n\nexport type MapProps = MapInitOptions &\n MaplibreProps &\n GlobalSettings & {\n mapLib?: MapLib | Promise<MapLib>;\n reuseMaps?: boolean;\n /** Map container id */\n id?: string;\n /** Map container CSS style */\n style?: CSSProperties;\n children?: React.ReactNode;\n /** Show Barikoi logo (default: true) */\n showBarikoiLogo?: boolean;\n /** Show Attribution (default: true) */\n showAttribution?: boolean;\n } & React.RefAttributes<MapRef>;\n\nfunction _Map(props: MapProps, ref: React.Ref<MapRef>) {\n const mountedMapsContext = useContext(MountedMapsContext);\n const [mapInstance, setMapInstance] = useState<Maplibre>(null);\n const containerRef = useRef();\n\n const { current: contextValue } = useRef<MapContextValue>({\n mapLib: null,\n map: null,\n });\n\n useEffect(() => {\n const mapLib = props.mapLib;\n let isMounted = true;\n let maplibre: Maplibre;\n\n Promise.resolve(mapLib || import(\"maplibre-gl\"))\n .then((module: MapLib | { default: MapLib }) => {\n if (!isMounted) {\n return;\n }\n if (!module) {\n throw new Error(\"Invalid mapLib\");\n }\n const mapboxgl = \"Map\" in module ? module : module.default;\n if (!mapboxgl.Map) {\n throw new Error(\"Invalid mapLib\");\n }\n\n setGlobals(mapboxgl, props);\n if (props.reuseMaps) {\n maplibre = Maplibre.reuse(props, containerRef.current);\n }\n if (!maplibre) {\n maplibre = new Maplibre(\n mapboxgl.Map,\n {\n ...props,\n // @ts-ignore\n attributionControl: false,\n },\n containerRef.current,\n );\n }\n contextValue.map = createRef(maplibre);\n contextValue.mapLib = mapboxgl;\n\n setMapInstance(maplibre);\n mountedMapsContext?.onMapMount(contextValue.map, props.id);\n })\n .catch((error) => {\n const { onError } = props;\n if (onError) {\n onError({\n type: \"error\",\n target: null,\n originalEvent: null,\n error,\n });\n } else {\n console.error(error); // eslint-disable-line\n }\n });\n\n return () => {\n isMounted = false;\n if (maplibre) {\n mountedMapsContext?.onMapUnmount(props.id);\n if (props.reuseMaps) {\n maplibre.recycle();\n } else {\n maplibre.destroy();\n }\n }\n };\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (mapInstance) {\n mapInstance.setProps(props);\n }\n });\n\n useImperativeHandle(ref, () => contextValue.map, [mapInstance]);\n\n const style: CSSProperties = useMemo(\n () => ({\n position: \"relative\",\n width: \"100%\",\n height: \"100%\",\n ...props.style,\n }),\n [props.style],\n );\n\n const CHILD_CONTAINER_STYLE = {\n height: \"100%\",\n };\n\n return (\n <div id={props.id} ref={containerRef} style={style}>\n {mapInstance && (\n <MapContext.Provider value={contextValue}>\n <div mapboxgl-children=\"\" style={CHILD_CONTAINER_STYLE}>\n {/* Automatically include Barikoi Logo and Attribution controls */}\n <LogoControl position=\"bottom-left\" />\n <AttributionControl position=\"bottom-right\" />\n {props.children}\n </div>\n </MapContext.Provider>\n )}\n </div>\n );\n}\n\nexport const Map: React.FC<MapProps> = React.forwardRef(_Map);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { Popup as PopupInstance, MarkerOptions } from "../types/lib";
|
|
3
|
-
import type { MarkerEvent, MarkerDragEvent } from "../types/events";
|
|
4
|
-
export type MarkerProps = MarkerOptions & {
|
|
5
|
-
/** Longitude of the anchor location */
|
|
6
|
-
longitude: number;
|
|
7
|
-
/** Latitude of the anchor location */
|
|
8
|
-
latitude: number;
|
|
9
|
-
popup?: PopupInstance;
|
|
10
|
-
/** CSS style override, applied to the control's container */
|
|
11
|
-
style?: React.CSSProperties;
|
|
12
|
-
onClick?: (e: MarkerEvent<MouseEvent>) => void;
|
|
13
|
-
onDragStart?: (e: MarkerDragEvent) => void;
|
|
14
|
-
onDrag?: (e: MarkerDragEvent) => void;
|
|
15
|
-
onDragEnd?: (e: MarkerDragEvent) => void;
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
};
|
|
18
|
-
export declare const Marker: React.FC<MarkerProps>;
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { createPortal } from "react-dom";
|
|
3
|
-
import { useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo } from "react";
|
|
4
|
-
import { applyReactStyle } from "../utils/apply-react-style.js";
|
|
5
|
-
import { MapContext } from "./map.js";
|
|
6
|
-
import { arePointsEqual } from "../utils/deep-equal.js";
|
|
7
|
-
import { compareClassNames } from "../utils/compare-class-names.js";
|
|
8
|
-
export const Marker = memo(forwardRef((props, ref) => {
|
|
9
|
-
const {
|
|
10
|
-
map,
|
|
11
|
-
mapLib
|
|
12
|
-
} = useContext(MapContext);
|
|
13
|
-
const thisRef = useRef({
|
|
14
|
-
props
|
|
15
|
-
});
|
|
16
|
-
const marker = useMemo(() => {
|
|
17
|
-
let hasChildren = false;
|
|
18
|
-
React.Children.forEach(props.children, el => {
|
|
19
|
-
if (el) {
|
|
20
|
-
hasChildren = true;
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
const options = {
|
|
24
|
-
...props,
|
|
25
|
-
element: hasChildren ? document.createElement("div") : undefined
|
|
26
|
-
};
|
|
27
|
-
const mk = new mapLib.Marker(options);
|
|
28
|
-
mk.setLngLat([props.longitude, props.latitude]);
|
|
29
|
-
mk.getElement().addEventListener("click", e => {
|
|
30
|
-
thisRef.current.props.onClick?.({
|
|
31
|
-
type: "click",
|
|
32
|
-
target: mk,
|
|
33
|
-
originalEvent: e
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
mk.on("dragstart", e => {
|
|
37
|
-
const evt = e;
|
|
38
|
-
evt.lngLat = marker.getLngLat();
|
|
39
|
-
thisRef.current.props.onDragStart?.(evt);
|
|
40
|
-
});
|
|
41
|
-
mk.on("drag", e => {
|
|
42
|
-
const evt = e;
|
|
43
|
-
evt.lngLat = marker.getLngLat();
|
|
44
|
-
thisRef.current.props.onDrag?.(evt);
|
|
45
|
-
});
|
|
46
|
-
mk.on("dragend", e => {
|
|
47
|
-
const evt = e;
|
|
48
|
-
evt.lngLat = marker.getLngLat();
|
|
49
|
-
thisRef.current.props.onDragEnd?.(evt);
|
|
50
|
-
});
|
|
51
|
-
return mk;
|
|
52
|
-
}, []);
|
|
53
|
-
useEffect(() => {
|
|
54
|
-
marker.addTo(map.getMap());
|
|
55
|
-
return () => {
|
|
56
|
-
marker.remove();
|
|
57
|
-
};
|
|
58
|
-
}, []);
|
|
59
|
-
const {
|
|
60
|
-
longitude,
|
|
61
|
-
latitude,
|
|
62
|
-
offset,
|
|
63
|
-
style,
|
|
64
|
-
draggable = false,
|
|
65
|
-
popup = null,
|
|
66
|
-
rotation = 0,
|
|
67
|
-
rotationAlignment = "auto",
|
|
68
|
-
pitchAlignment = "auto"
|
|
69
|
-
} = props;
|
|
70
|
-
useEffect(() => {
|
|
71
|
-
applyReactStyle(marker.getElement(), style);
|
|
72
|
-
}, [style]);
|
|
73
|
-
useImperativeHandle(ref, () => marker, []);
|
|
74
|
-
const oldProps = thisRef.current.props;
|
|
75
|
-
if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
|
|
76
|
-
marker.setLngLat([longitude, latitude]);
|
|
77
|
-
}
|
|
78
|
-
if (offset && !arePointsEqual(marker.getOffset(), offset)) {
|
|
79
|
-
marker.setOffset(offset);
|
|
80
|
-
}
|
|
81
|
-
if (marker.isDraggable() !== draggable) {
|
|
82
|
-
marker.setDraggable(draggable);
|
|
83
|
-
}
|
|
84
|
-
if (marker.getRotation() !== rotation) {
|
|
85
|
-
marker.setRotation(rotation);
|
|
86
|
-
}
|
|
87
|
-
if (marker.getRotationAlignment() !== rotationAlignment) {
|
|
88
|
-
marker.setRotationAlignment(rotationAlignment);
|
|
89
|
-
}
|
|
90
|
-
if (marker.getPitchAlignment() !== pitchAlignment) {
|
|
91
|
-
marker.setPitchAlignment(pitchAlignment);
|
|
92
|
-
}
|
|
93
|
-
if (marker.getPopup() !== popup) {
|
|
94
|
-
marker.setPopup(popup);
|
|
95
|
-
}
|
|
96
|
-
const classNameDiff = compareClassNames(oldProps.className, props.className);
|
|
97
|
-
if (classNameDiff) {
|
|
98
|
-
for (const c of classNameDiff) {
|
|
99
|
-
marker.toggleClassName(c);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
thisRef.current.props = props;
|
|
103
|
-
return createPortal(props.children, marker.getElement());
|
|
104
|
-
}));
|
|
105
|
-
//# sourceMappingURL=marker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"marker.js","names":["React","createPortal","useImperativeHandle","useEffect","useMemo","useRef","useContext","forwardRef","memo","applyReactStyle","MapContext","arePointsEqual","compareClassNames","Marker","props","ref","map","mapLib","thisRef","marker","hasChildren","Children","forEach","children","el","options","element","document","createElement","undefined","mk","setLngLat","longitude","latitude","getElement","addEventListener","e","current","onClick","type","target","originalEvent","on","evt","lngLat","getLngLat","onDragStart","onDrag","onDragEnd","addTo","getMap","remove","offset","style","draggable","popup","rotation","rotationAlignment","pitchAlignment","oldProps","lng","lat","getOffset","setOffset","isDraggable","setDraggable","getRotation","setRotation","getRotationAlignment","setRotationAlignment","getPitchAlignment","setPitchAlignment","getPopup","setPopup","classNameDiff","className","c","toggleClassName"],"sources":["../../src/components/marker.ts"],"sourcesContent":["/* global document */\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n useImperativeHandle,\n useEffect,\n useMemo,\n useRef,\n useContext,\n forwardRef,\n memo,\n} from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\n\nimport type {\n Popup as PopupInstance,\n Marker as MarkerInstance,\n MarkerOptions,\n} from \"../types/lib\";\nimport type { MarkerEvent, MarkerDragEvent } from \"../types/events\";\n\nimport { MapContext } from \"./map\";\nimport { arePointsEqual } from \"../utils/deep-equal\";\nimport { compareClassNames } from \"../utils/compare-class-names\";\n\nexport type MarkerProps = MarkerOptions & {\n /** Longitude of the anchor location */\n longitude: number;\n /** Latitude of the anchor location */\n latitude: number;\n\n popup?: PopupInstance;\n\n /** CSS style override, applied to the control's container */\n style?: React.CSSProperties;\n onClick?: (e: MarkerEvent<MouseEvent>) => void;\n onDragStart?: (e: MarkerDragEvent) => void;\n onDrag?: (e: MarkerDragEvent) => void;\n onDragEnd?: (e: MarkerDragEvent) => void;\n children?: React.ReactNode;\n};\n\n/* eslint-disable complexity,max-statements */\nexport const Marker: React.FC<MarkerProps> = memo(\n forwardRef((props: MarkerProps, ref: React.Ref<MarkerInstance>) => {\n const { map, mapLib } = useContext(MapContext);\n const thisRef = useRef({ props });\n\n const marker: MarkerInstance = useMemo(() => {\n let hasChildren = false;\n React.Children.forEach(props.children, (el) => {\n if (el) {\n hasChildren = true;\n }\n });\n const options = {\n ...props,\n element: hasChildren ? document.createElement(\"div\") : undefined,\n };\n\n const mk = new mapLib.Marker(options);\n mk.setLngLat([props.longitude, props.latitude]);\n\n mk.getElement().addEventListener(\"click\", (e: MouseEvent) => {\n thisRef.current.props.onClick?.({\n type: \"click\",\n target: mk,\n originalEvent: e,\n });\n });\n\n mk.on(\"dragstart\", (e) => {\n const evt = e as MarkerDragEvent;\n evt.lngLat = marker.getLngLat();\n thisRef.current.props.onDragStart?.(evt);\n });\n mk.on(\"drag\", (e) => {\n const evt = e as MarkerDragEvent;\n evt.lngLat = marker.getLngLat();\n thisRef.current.props.onDrag?.(evt);\n });\n mk.on(\"dragend\", (e) => {\n const evt = e as MarkerDragEvent;\n evt.lngLat = marker.getLngLat();\n thisRef.current.props.onDragEnd?.(evt);\n });\n\n return mk;\n }, []);\n\n useEffect(() => {\n marker.addTo(map.getMap());\n\n return () => {\n marker.remove();\n };\n }, []);\n\n const {\n longitude,\n latitude,\n offset,\n style,\n draggable = false,\n popup = null,\n rotation = 0,\n rotationAlignment = \"auto\",\n pitchAlignment = \"auto\",\n } = props;\n\n useEffect(() => {\n applyReactStyle(marker.getElement(), style);\n }, [style]);\n\n useImperativeHandle(ref, () => marker, []);\n\n const oldProps = thisRef.current.props;\n if (\n marker.getLngLat().lng !== longitude ||\n marker.getLngLat().lat !== latitude\n ) {\n marker.setLngLat([longitude, latitude]);\n }\n if (offset && !arePointsEqual(marker.getOffset(), offset)) {\n marker.setOffset(offset);\n }\n if (marker.isDraggable() !== draggable) {\n marker.setDraggable(draggable);\n }\n if (marker.getRotation() !== rotation) {\n marker.setRotation(rotation);\n }\n if (marker.getRotationAlignment() !== rotationAlignment) {\n marker.setRotationAlignment(rotationAlignment);\n }\n if (marker.getPitchAlignment() !== pitchAlignment) {\n marker.setPitchAlignment(pitchAlignment);\n }\n if (marker.getPopup() !== popup) {\n marker.setPopup(popup);\n }\n const classNameDiff = compareClassNames(\n oldProps.className,\n props.className,\n );\n if (classNameDiff) {\n for (const c of classNameDiff) {\n marker.toggleClassName(c);\n }\n }\n\n thisRef.current.props = props;\n return createPortal(props.children, marker.getElement());\n }),\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { ControlPosition, NavigationControlOptions } from "../types/lib";
|
|
3
|
-
export type NavigationControlProps = NavigationControlOptions & {
|
|
4
|
-
/** Placement of the control relative to the map. */
|
|
5
|
-
position?: ControlPosition;
|
|
6
|
-
/** CSS style override, applied to the control's container */
|
|
7
|
-
style?: React.CSSProperties;
|
|
8
|
-
};
|
|
9
|
-
export declare const NavigationControl: React.FC<NavigationControlProps>;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useEffect, memo } from "react";
|
|
2
|
-
import { applyReactStyle } from "../utils/apply-react-style.js";
|
|
3
|
-
import { useControl } from "./use-control.js";
|
|
4
|
-
function _NavigationControl(props) {
|
|
5
|
-
const ctrl = useControl(_ref => {
|
|
6
|
-
let {
|
|
7
|
-
mapLib
|
|
8
|
-
} = _ref;
|
|
9
|
-
return new mapLib.NavigationControl(props);
|
|
10
|
-
}, {
|
|
11
|
-
position: props.position
|
|
12
|
-
});
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
applyReactStyle(ctrl._container, props.style);
|
|
15
|
-
}, [props.style]);
|
|
16
|
-
return null;
|
|
17
|
-
}
|
|
18
|
-
export const NavigationControl = memo(_NavigationControl);
|
|
19
|
-
//# sourceMappingURL=navigation-control.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-control.js","names":["useEffect","memo","applyReactStyle","useControl","_NavigationControl","props","ctrl","_ref","mapLib","NavigationControl","position","_container","style"],"sources":["../../src/components/navigation-control.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useEffect, memo } from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\nimport { useControl } from \"./use-control\";\n\nimport type { ControlPosition, NavigationControlOptions } from \"../types/lib\";\n\nexport type NavigationControlProps = NavigationControlOptions & {\n /** Placement of the control relative to the map. */\n position?: ControlPosition;\n /** CSS style override, applied to the control's container */\n style?: React.CSSProperties;\n};\n\nfunction _NavigationControl(props: NavigationControlProps) {\n const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {\n position: props.position,\n });\n\n useEffect(() => {\n applyReactStyle(ctrl._container, props.style);\n }, [props.style]);\n\n return null;\n}\n\nexport const NavigationControl: React.FC<NavigationControlProps> =\n memo(_NavigationControl);\n"],"mappings":"AACA,SAASA,SAAS,EAAEC,IAAI,QAAQ,OAAO;AAAC,SAC/BC,eAAe;AAAA,SACfC,UAAU;AAWnB,SAASC,kBAAkBA,CAACC,KAA6B,EAAE;EACzD,MAAMC,IAAI,GAAGH,UAAU,CAACI,IAAA;IAAA,IAAC;MAAEC;IAAO,CAAC,GAAAD,IAAA;IAAA,OAAK,IAAIC,MAAM,CAACC,iBAAiB,CAACJ,KAAK,CAAC;EAAA,GAAE;IAC3EK,QAAQ,EAAEL,KAAK,CAACK;EAClB,CAAC,CAAC;EAEFV,SAAS,CAAC,MAAM;IACdE,eAAe,CAACI,IAAI,CAACK,UAAU,EAAEN,KAAK,CAACO,KAAK,CAAC;EAC/C,CAAC,EAAE,CAACP,KAAK,CAACO,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,OAAO,MAAMH,iBAAmD,GAC9DR,IAAI,CAACG,kBAAkB,CAAC","ignoreList":[]}
|