react-three-map 0.0.0 → 0.0.2

package/dist/es/main.js26.mjs

@@ -0,0 +1,8 @@
+function e(r, t) {
+  if (!r)
+    throw new Error(t);
+}
+export {
+  e as default
+};
+//# sourceMappingURL=main.js26.mjs.map

package/dist/es/main.js26.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js26.mjs","sources":["../../node_modules/react-map-gl/dist/esm/utils/assert.js"],"sourcesContent":["export default function assert(condition, message) {\n    if (!condition) {\n        throw new Error(message);\n    }\n}\n//# sourceMappingURL=assert.js.map"],"names":["assert","condition","message"],"mappings":"AAAe,SAASA,EAAOC,GAAWC,GAAS;AAC/C,MAAI,CAACD;AACD,UAAM,IAAI,MAAMC,CAAO;AAE/B;","x_google_ignoreList":[0]}

package/dist/es/main.js27.mjs

@@ -0,0 +1,41 @@
+function a(n) {
+  const t = n.clone();
+  return t.pixelsToGLUnits = n.pixelsToGLUnits, t;
+}
+function c(n) {
+  return {
+    longitude: n.center.lng,
+    latitude: n.center.lat,
+    zoom: n.zoom,
+    pitch: n.pitch,
+    bearing: n.bearing,
+    padding: n.padding
+  };
+}
+function d(n, t) {
+  const i = t.viewState || t;
+  let e = !1;
+  if ("longitude" in i && "latitude" in i) {
+    const o = n.center;
+    n.center = new o.constructor(i.longitude, i.latitude), e = e || o !== n.center;
+  }
+  if ("zoom" in i) {
+    const o = n.zoom;
+    n.zoom = i.zoom, e = e || o !== n.zoom;
+  }
+  if ("bearing" in i) {
+    const o = n.bearing;
+    n.bearing = i.bearing, e = e || o !== n.bearing;
+  }
+  if ("pitch" in i) {
+    const o = n.pitch;
+    n.pitch = i.pitch, e = e || o !== n.pitch;
+  }
+  return i.padding && !n.isPaddingEqual(i.padding) && (e = !0, n.padding = i.padding), e;
+}
+export {
+  d as applyViewStateToTransform,
+  a as cloneTransform,
+  c as transformToViewState
+};
+//# sourceMappingURL=main.js27.mjs.map

package/dist/es/main.js27.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js27.mjs","sources":["../../node_modules/react-map-gl/dist/esm/utils/transform.js"],"sourcesContent":["/**\n * Make a copy of a transform\n * @param tr\n */\nexport function cloneTransform(tr) {\n    const newTransform = tr.clone();\n    // Work around mapbox bug - this value is not assigned in clone(), only in resize()\n    newTransform.pixelsToGLUnits = tr.pixelsToGLUnits;\n    return newTransform;\n}\n/**\n * Capture a transform's current state\n * @param transform\n * @returns descriptor of the view state\n */\nexport function transformToViewState(tr) {\n    return {\n        longitude: tr.center.lng,\n        latitude: tr.center.lat,\n        zoom: tr.zoom,\n        pitch: tr.pitch,\n        bearing: tr.bearing,\n        padding: tr.padding\n    };\n}\n/* eslint-disable complexity */\n/**\n * Mutate a transform to match the given view state\n * @param transform\n * @param viewState\n * @returns true if the transform has changed\n */\nexport function applyViewStateToTransform(tr, props) {\n    const v = props.viewState || props;\n    let changed = false;\n    if ('longitude' in v && 'latitude' in v) {\n        const center = tr.center;\n        // @ts-ignore\n        tr.center = new center.constructor(v.longitude, v.latitude);\n        changed = changed || center !== tr.center;\n    }\n    if ('zoom' in v) {\n        const zoom = tr.zoom;\n        tr.zoom = v.zoom;\n        changed = changed || zoom !== tr.zoom;\n    }\n    if ('bearing' in v) {\n        const bearing = tr.bearing;\n        tr.bearing = v.bearing;\n        changed = changed || bearing !== tr.bearing;\n    }\n    if ('pitch' in v) {\n        const pitch = tr.pitch;\n        tr.pitch = v.pitch;\n        changed = changed || pitch !== tr.pitch;\n    }\n    if (v.padding && !tr.isPaddingEqual(v.padding)) {\n        changed = true;\n        tr.padding = v.padding;\n    }\n    return changed;\n}\n//# sourceMappingURL=transform.js.map"],"names":["cloneTransform","tr","newTransform","transformToViewState","applyViewStateToTransform","props","v","changed","center","zoom","bearing","pitch"],"mappings":"AAIO,SAASA,EAAeC,GAAI;AAC/B,QAAMC,IAAeD,EAAG;AAExB,SAAAC,EAAa,kBAAkBD,EAAG,iBAC3BC;AACX;AAMO,SAASC,EAAqBF,GAAI;AACrC,SAAO;AAAA,IACH,WAAWA,EAAG,OAAO;AAAA,IACrB,UAAUA,EAAG,OAAO;AAAA,IACpB,MAAMA,EAAG;AAAA,IACT,OAAOA,EAAG;AAAA,IACV,SAASA,EAAG;AAAA,IACZ,SAASA,EAAG;AAAA,EACpB;AACA;AAQO,SAASG,EAA0BH,GAAII,GAAO;AACjD,QAAMC,IAAID,EAAM,aAAaA;AAC7B,MAAIE,IAAU;AACd,MAAI,eAAeD,KAAK,cAAcA,GAAG;AACrC,UAAME,IAASP,EAAG;AAElB,IAAAA,EAAG,SAAS,IAAIO,EAAO,YAAYF,EAAE,WAAWA,EAAE,QAAQ,GAC1DC,IAAUA,KAAWC,MAAWP,EAAG;AAAA;AAEvC,MAAI,UAAUK,GAAG;AACb,UAAMG,IAAOR,EAAG;AAChB,IAAAA,EAAG,OAAOK,EAAE,MACZC,IAAUA,KAAWE,MAASR,EAAG;AAAA;AAErC,MAAI,aAAaK,GAAG;AAChB,UAAMI,IAAUT,EAAG;AACnB,IAAAA,EAAG,UAAUK,EAAE,SACfC,IAAUA,KAAWG,MAAYT,EAAG;AAAA;AAExC,MAAI,WAAWK,GAAG;AACd,UAAMK,IAAQV,EAAG;AACjB,IAAAA,EAAG,QAAQK,EAAE,OACbC,IAAUA,KAAWI,MAAUV,EAAG;AAAA;AAEtC,SAAIK,EAAE,WAAW,CAACL,EAAG,eAAeK,EAAE,OAAO,MACzCC,IAAU,IACVN,EAAG,UAAUK,EAAE,UAEZC;AACX;","x_google_ignoreList":[0]}

package/dist/es/main.js28.mjs

@@ -0,0 +1,26 @@
+const a = ["type", "source", "source-layer", "minzoom", "maxzoom", "filter", "layout"];
+function c(r) {
+  if (!r)
+    return null;
+  if (typeof r == "string" || ("toJS" in r && (r = r.toJS()), !r.layers))
+    return r;
+  const t = {};
+  for (const e of r.layers)
+    t[e.id] = e;
+  const f = r.layers.map((e) => {
+    let n = null;
+    "interactive" in e && (n = Object.assign({}, e), delete n.interactive);
+    const o = t[e.ref];
+    if (o) {
+      n = n || Object.assign({}, e), delete n.ref;
+      for (const i of a)
+        i in o && (n[i] = o[i]);
+    }
+    return n || e;
+  });
+  return { ...r, layers: f };
+}
+export {
+  c as normalizeStyle
+};
+//# sourceMappingURL=main.js28.mjs.map

package/dist/es/main.js28.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js28.mjs","sources":["../../node_modules/react-map-gl/dist/esm/utils/style-utils.js"],"sourcesContent":["const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];\n// Prepare a map style object for diffing\n// If immutable - convert to plain object\n// Work around some issues in older styles that would fail Mapbox's diffing\nexport function normalizeStyle(style) {\n    if (!style) {\n        return null;\n    }\n    if (typeof style === 'string') {\n        return style;\n    }\n    if ('toJS' in style) {\n        style = style.toJS();\n    }\n    if (!style.layers) {\n        return style;\n    }\n    const layerIndex = {};\n    for (const layer of style.layers) {\n        layerIndex[layer.id] = layer;\n    }\n    const layers = style.layers.map(layer => {\n        let normalizedLayer = null;\n        if ('interactive' in layer) {\n            normalizedLayer = Object.assign({}, layer);\n            // Breaks style diffing :(\n            // @ts-ignore legacy field not typed\n            delete normalizedLayer.interactive;\n        }\n        // Style diffing doesn't work with refs so expand them out manually before diffing.\n        // @ts-ignore legacy field not typed\n        const layerRef = layerIndex[layer.ref];\n        if (layerRef) {\n            normalizedLayer = normalizedLayer || Object.assign({}, layer);\n            // @ts-ignore\n            delete normalizedLayer.ref;\n            // https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/deref.js\n            for (const propName of refProps) {\n                if (propName in layerRef) {\n                    normalizedLayer[propName] = layerRef[propName];\n                }\n            }\n        }\n        return normalizedLayer || layer;\n    });\n    // Do not mutate the style object provided by the user\n    return { ...style, layers };\n}\n//# sourceMappingURL=style-utils.js.map"],"names":["refProps","normalizeStyle","style","layerIndex","layer","layers","normalizedLayer","layerRef","propName"],"mappings":"AAAA,MAAMA,IAAW,CAAC,QAAQ,UAAU,gBAAgB,WAAW,WAAW,UAAU,QAAQ;AAIrF,SAASC,EAAeC,GAAO;AAClC,MAAI,CAACA;AACD,WAAO;AAQX,MANI,OAAOA,KAAU,aAGjB,UAAUA,MACVA,IAAQA,EAAM,SAEd,CAACA,EAAM;AACP,WAAOA;AAEX,QAAMC,IAAa,CAAA;AACnB,aAAWC,KAASF,EAAM;AACtB,IAAAC,EAAWC,EAAM,EAAE,IAAIA;AAE3B,QAAMC,IAASH,EAAM,OAAO,IAAI,CAAAE,MAAS;AACrC,QAAIE,IAAkB;AACtB,IAAI,iBAAiBF,MACjBE,IAAkB,OAAO,OAAO,CAAE,GAAEF,CAAK,GAGzC,OAAOE,EAAgB;AAI3B,UAAMC,IAAWJ,EAAWC,EAAM,GAAG;AACrC,QAAIG,GAAU;AACV,MAAAD,IAAkBA,KAAmB,OAAO,OAAO,CAAE,GAAEF,CAAK,GAE5D,OAAOE,EAAgB;AAEvB,iBAAWE,KAAYR;AACnB,QAAIQ,KAAYD,MACZD,EAAgBE,CAAQ,IAAID,EAASC,CAAQ;AAAA;AAIzD,WAAOF,KAAmBF;AAAA,EAClC,CAAK;AAED,SAAO,EAAE,GAAGF,GAAO,QAAAG;AACvB;","x_google_ignoreList":[0]}

package/dist/es/main.js3.mjs

@@ -0,0 +1,21 @@
+import * as t from "react";
+import p from "./main.js8.mjs";
+import "./main.js9.mjs";
+import "./main.js10.mjs";
+import "./main.js11.mjs";
+import "./main.js12.mjs";
+import "./main.js13.mjs";
+import "./main.js14.mjs";
+import "./main.js15.mjs";
+import { useMap as m } from "./main.js16.mjs";
+function b() {
+  return m();
+}
+const i = import("maplibre-gl");
+t.forwardRef(function(r, o) {
+  return p(r, o, i);
+});
+export {
+  b as useMap
+};
+//# sourceMappingURL=main.js3.mjs.map

package/dist/es/main.js3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js3.mjs","sources":["../../node_modules/react-map-gl/dist/esm/exports-maplibre.js"],"sourcesContent":["import * as React from 'react';\nimport { default as _Map } from './components/map';\nimport { default as _Marker } from './components/marker';\nimport { default as _Popup } from './components/popup';\nimport { default as _AttributionControl } from './components/attribution-control';\nimport { default as _FullscreenControl } from './components/fullscreen-control';\nimport { default as _GeolocateControl } from './components/geolocate-control';\nimport { default as _NavigationControl } from './components/navigation-control';\nimport { default as _ScaleControl } from './components/scale-control';\nimport { useMap as _useMap } from './components/use-map';\nexport function useMap() {\n    return _useMap();\n}\nconst mapLib = import('maplibre-gl');\nexport const Map = (() => {\n    return React.forwardRef(function Map(props, ref) {\n        return _Map(props, ref, mapLib);\n    });\n})();\nexport const Marker = _Marker;\nexport const Popup = _Popup;\nexport const AttributionControl = _AttributionControl;\nexport const FullscreenControl = _FullscreenControl;\nexport const NavigationControl = _NavigationControl;\nexport const GeolocateControl = _GeolocateControl;\nexport const ScaleControl = _ScaleControl;\nexport { default as Source } from './components/source';\nexport { default as Layer } from './components/layer';\nexport { default as useControl } from './components/use-control';\nexport { MapProvider } from './components/use-map';\nexport default Map;\n// Types\nexport * from './types/public';\n//# sourceMappingURL=exports-maplibre.js.map"],"names":["useMap","_useMap","mapLib","React","props","ref","_Map"],"mappings":";;;;;;;;;;AAUO,SAASA,IAAS;AACrB,SAAOC,EAAO;AAClB;AACA,MAAMC,IAAS,OAAO,aAAa;AAExBC,EAAM,WAAW,SAAaC,GAAOC,GAAK;AAC7C,SAAOC,EAAKF,GAAOC,GAAKH,CAAM;AACtC,CAAK;","x_google_ignoreList":[0]}

package/dist/es/main.js4.mjs

@@ -0,0 +1,11 @@
+import { MercatorCoordinate as m } from "maplibre-gl";
+import { Quaternion as u, Euler as l, Vector3 as s, Matrix4 as p } from "three";
+const o = new u(), w = new l(), r = new s(), n = new s();
+function x({ longitude: c, latitude: a, altitude: i }) {
+  const t = m.fromLngLat([c, a], i), e = t.meterInMercatorCoordinateUnits();
+  return r.set(t.x, t.y, t.z || 0), n.set(e, -e, e), o.setFromEuler(w.set(-Math.PI * 0.5, 0, 0)), new p().compose(r, o, n);
+}
+export {
+  x as coordsToMatrix
+};
+//# sourceMappingURL=main.js4.mjs.map

package/dist/es/main.js4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/coords-to-matrix.ts"],"sourcesContent":["import { MercatorCoordinate } from \"maplibre-gl\";\nimport { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix ({ longitude, latitude, altitude }: {\n  longitude: number, latitude: number, altitude: number\n}) {\n  const center = MercatorCoordinate.fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));  \n  return new Matrix4().compose(pos, quat, scale);\n}\n"],"names":["quat","Quaternion","euler","Euler","pos","Vector3","scale","coordsToMatrix","longitude","latitude","altitude","center","MercatorCoordinate","scaleUnit","Matrix4"],"mappings":";;AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID;AAGX,SAASE,EAAgB,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,KAEpD;AACD,QAAMC,IAASC,EAAmB,WAAW,CAACJ,GAAWC,CAAQ,GAAGC,CAAQ,GACtEG,IAAYF,EAAO;AACzB,SAAAP,EAAI,IAAIO,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCL,EAAM,IAAIO,GAAW,CAACA,GAAWA,CAAS,GACrCb,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzC,IAAIY,EAAQ,EAAE,QAAQV,GAAKJ,GAAMM,CAAK;AAC/C;"}

package/dist/es/main.js5.mjs

@@ -0,0 +1,53 @@
+import { createRoot as g } from "@react-three/fiber";
+import { createEvents as h } from "./main.js17.mjs";
+import { useFunction as c } from "./main.js18.mjs";
+import { useState as v } from "react";
+function C(e, t) {
+  const [a, m] = v(!1), s = c((o, f) => {
+    const i = o.getCanvas(), n = g(i);
+    n.configure({
+      frameloop: "never",
+      dpr: window.devicePixelRatio,
+      shadows: !0,
+      events: h(),
+      ...t,
+      gl: {
+        context: f,
+        depth: !0,
+        autoClear: !1,
+        antialias: !0,
+        ...t == null ? void 0 : t.gl
+      },
+      onCreated: (u) => {
+        e.current = {
+          state: u,
+          map: o,
+          root: n
+        }, u.gl.forceContextLoss = () => {
+        };
+      },
+      camera: {
+        matrixAutoUpdate: !1
+      },
+      size: {
+        width: i.clientWidth,
+        height: i.clientHeight,
+        top: 0,
+        left: 0,
+        ...t == null ? void 0 : t.size
+      }
+    }), e.current = {
+      map: o,
+      root: n
+    }, setTimeout(() => m(!0));
+  }), l = c(() => {
+    setTimeout(() => {
+      e.current && e.current.root.unmount();
+    });
+  });
+  return { onAdd: s, onRemove: l, mounted: a };
+}
+export {
+  C as useOnAdd
+};
+//# sourceMappingURL=main.js5.mjs.map

package/dist/es/main.js5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js5.mjs","sources":["../../src/canvas/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { MapInstance } from \"react-map-gl\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useState } from \"react\";\n\nexport function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {\n\n  const [mounted, setMounted] = useState(false);\n\n  const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{\n   \n    const canvas = map.getCanvas();\n    const root = createRoot(canvas);\n    root.configure({\n      frameloop: \"never\",\n      dpr: window.devicePixelRatio,\n      shadows: true,\n      events: createEvents(),\n      ...renderProps,\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        ref.current = {\n          state,\n          map,\n          root,\n        }\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n      },\n      camera: {\n        matrixAutoUpdate: false,\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        ...renderProps?.size,\n      },\n    });\n\n    ref.current = {\n      map,\n      root,\n    }\n\n    setTimeout(()=>setMounted(true));\n    \n  })\n\n  const onRemove = useFunction(()=>{\n    setTimeout(()=>{\n      if(!ref.current) return;\n      ref.current.root.unmount();\n    })\n  })\n\n  return {onAdd, onRemove, mounted};\n}"],"names":["useOnAdd","ref","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onRemove"],"mappings":";;;;AAOgB,SAAAA,EAAUC,GAAeC,GAA6C;AAEpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA4B;AAEjE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,WAAW;AAAA,MACX,KAAK,OAAO;AAAA,MACZ,SAAS;AAAA,MACT,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,IAAI;AAAA,QACF,SAASO;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAGP,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAACY,MAAU;AACpB,QAAAb,EAAI,UAAU;AAAA,UACZ,OAAAa;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAGIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,MACpB;AAAA,MACA,MAAM;AAAA,QACJ,OAAOJ,EAAO;AAAA,QACd,QAAQA,EAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAGR,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,IAAA,CACD,GAEDD,EAAI,UAAU;AAAA,MACZ,KAAAO;AAAA,MACA,MAAAG;AAAA,IAAA,GAGS,WAAA,MAAIP,EAAW,EAAI,CAAC;AAAA,EAAA,CAEhC,GAEKW,IAAWR,EAAY,MAAI;AAC/B,eAAW,MAAI;AACb,MAAIN,EAAI,WACJA,EAAA,QAAQ,KAAK;IAAQ,CAC1B;AAAA,EAAA,CACF;AAEM,SAAA,EAAC,OAAAK,GAAO,UAAAS,GAAU,SAAAZ;AAC3B;"}

package/dist/es/main.js6.mjs

@@ -0,0 +1,16 @@
+import { useFunction as u } from "./main.js18.mjs";
+import { useMap as s } from "./main.js3.mjs";
+function l(a, r) {
+  const e = s();
+  return u((m, c) => {
+    var n;
+    if (!e.current || !((n = r.current) != null && n.state))
+      return;
+    const t = r.current.state.camera, o = r.current.state.gl, i = r.current.state.advance;
+    t.projectionMatrix.fromArray(c).multiply(a), t.projectionMatrixInverse.copy(t.projectionMatrix).invert(), o.resetState(), i(Date.now() * 1e-3, !0), e.current.triggerRepaint();
+  });
+}
+export {
+  l as useRender
+};
+//# sourceMappingURL=main.js6.mjs.map

package/dist/es/main.js6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js6.mjs","sources":["../../src/canvas/use-render.ts"],"sourcesContent":["import { Matrix4 } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useMap } from \"react-map-gl/maplibre\";\n\nexport function useRender(\n  m4: Matrix4, ref: StateRef\n  ) {\n\n  const map = useMap()\n\n  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[])=>{\n    if(!map.current) return;\n    if(!ref.current?.state) return;\n    const camera = ref.current.state.camera;\n    const gl = ref.current.state.gl;\n    const advance = ref.current.state.advance;\n    camera.projectionMatrix.fromArray(matrix).multiply(m4);\n    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    map.current.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":["useRender","m4","ref","map","useMap","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAKgB,SAAAA,EACdC,GAAaC,GACX;AAEF,QAAMC,IAAMC;AAeL,SAbQC,EAAY,CAACC,GAA6BC,MAAmB;;AAEvE,QADA,CAACJ,EAAI,WACL,GAACK,IAAAN,EAAI,YAAJ,QAAAM,EAAa;AAAO;AAClB,UAAAC,IAASP,EAAI,QAAQ,MAAM,QAC3BQ,IAAKR,EAAI,QAAQ,MAAM,IACvBS,IAAUT,EAAI,QAAQ,MAAM;AAClC,IAAAO,EAAO,iBAAiB,UAAUF,CAAM,EAAE,SAASN,CAAE,GACrDQ,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAChCR,EAAI,QAAQ;EAAe,CAC5B;AAIH;"}

package/dist/es/main.js7.mjs

@@ -0,0 +1,62 @@
+import { useContext as m, useRef as L, useState as g, useMemo as x, useEffect as h } from "react";
+import { MapContext as b } from "./main.js8.mjs";
+import d from "./main.js26.mjs";
+import { deepEqual as c } from "./main.js24.mjs";
+function k(t, e, a, o) {
+  if (d(a.id === o.id, "layer id changed"), d(a.type === o.type, "layer type changed"), a.type === "custom" || o.type === "custom")
+    return;
+  const {
+    layout: r = {},
+    paint: f = {},
+    // @ts-expect-error filter is not defined on some layer types
+    filter: y,
+    minzoom: u,
+    maxzoom: l,
+    beforeId: s
+  } = a;
+  if (s !== o.beforeId && t.moveLayer(e, s), r !== o.layout) {
+    const i = o.layout || {};
+    for (const n in r)
+      c(r[n], i[n]) || t.setLayoutProperty(e, n, r[n]);
+    for (const n in i)
+      r.hasOwnProperty(n) || t.setLayoutProperty(e, n, void 0);
+  }
+  if (f !== o.paint) {
+    const i = o.paint || {};
+    for (const n in f)
+      c(f[n], i[n]) || t.setPaintProperty(e, n, f[n]);
+    for (const n in i)
+      f.hasOwnProperty(n) || t.setPaintProperty(e, n, void 0);
+  }
+  c(y, o.filter) || t.setFilter(e, y), (u !== o.minzoom || l !== o.maxzoom) && t.setLayerZoomRange(e, u, l);
+}
+function z(t, e, a) {
+  if (t.style && t.style._loaded && (!("source" in a) || t.getSource(a.source))) {
+    const o = { ...a, id: e };
+    delete o.beforeId, t.addLayer(o, a.beforeId);
+  }
+}
+let I = 0;
+function S(t) {
+  const e = m(b).map.getMap(), a = L(t), [, o] = g(0), r = x(() => t.id || `jsx-layer-${I++}`, []);
+  if (h(() => {
+    if (e) {
+      const y = () => o((u) => u + 1);
+      return e.on("styledata", y), y(), () => {
+        e.off("styledata", y), e.style && e.style._loaded && e.getLayer(r) && e.removeLayer(r);
+      };
+    }
+  }, [e]), e && e.style && e.getLayer(r))
+    try {
+      k(e, r, t, a.current);
+    } catch (y) {
+      console.warn(y);
+    }
+  else
+    z(e, r, t);
+  return a.current = t, null;
+}
+export {
+  S as default
+};
+//# sourceMappingURL=main.js7.mjs.map

package/dist/es/main.js7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js7.mjs","sources":["../../node_modules/react-map-gl/dist/esm/components/layer.js"],"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/* eslint-disable complexity, max-statements */\nfunction updateLayer(map, id, props, prevProps) {\n    assert(props.id === prevProps.id, 'layer id changed');\n    assert(props.type === prevProps.type, 'layer type changed');\n    if (props.type === 'custom' || prevProps.type === 'custom') {\n        return;\n    }\n    const { layout = {}, paint = {}, \n    // @ts-expect-error filter is not defined on some layer types\n    filter, minzoom, maxzoom, beforeId } = props;\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    // @ts-expect-error filter is not defined on 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}\nfunction createLayer(map, id, props) {\n    // @ts-ignore\n    if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {\n        const options = { ...props, id };\n        delete options.beforeId;\n        // @ts-ignore\n        map.addLayer(options, props.beforeId);\n    }\n}\n/* eslint-enable complexity, max-statements */\nlet layerCounter = 0;\nfunction Layer(props) {\n    const map = useContext(MapContext).map.getMap();\n    const propsRef = useRef(props);\n    const [, setStyleLoaded] = useState(0);\n    const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);\n    useEffect(() => {\n        if (map) {\n            const forceUpdate = () => setStyleLoaded(version => version + 1);\n            map.on('styledata', forceUpdate);\n            forceUpdate();\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    // @ts-ignore\n    const layer = map && map.style && map.getLayer(id);\n    if (layer) {\n        try {\n            updateLayer(map, id, props, propsRef.current);\n        }\n        catch (error) {\n            console.warn(error); // eslint-disable-line\n        }\n    }\n    else {\n        createLayer(map, id, props);\n    }\n    // Store last rendered props\n    propsRef.current = props;\n    return null;\n}\nexport default Layer;\n//# sourceMappingURL=layer.js.map"],"names":["updateLayer","map","id","props","prevProps","assert","layout","paint","filter","minzoom","maxzoom","beforeId","prevLayout","key","deepEqual","prevPaint","createLayer","options","layerCounter","Layer","useContext","MapContext","propsRef","useRef","setStyleLoaded","useState","useMemo","useEffect","forceUpdate","version","error"],"mappings":";;;;AAKA,SAASA,EAAYC,GAAKC,GAAIC,GAAOC,GAAW;AAG5C,MAFAC,EAAOF,EAAM,OAAOC,EAAU,IAAI,kBAAkB,GACpDC,EAAOF,EAAM,SAASC,EAAU,MAAM,oBAAoB,GACtDD,EAAM,SAAS,YAAYC,EAAU,SAAS;AAC9C;AAEJ,QAAM;AAAA,IAAE,QAAAE,IAAS;IAAI,OAAAC,IAAQ,CAAE;AAAA;AAAA,IAE/B,QAAAC;AAAA,IAAQ,SAAAC;AAAA,IAAS,SAAAC;AAAA,IAAS,UAAAC;AAAA,EAAQ,IAAKR;AAIvC,MAHIQ,MAAaP,EAAU,YACvBH,EAAI,UAAUC,GAAIS,CAAQ,GAE1BL,MAAWF,EAAU,QAAQ;AAC7B,UAAMQ,IAAaR,EAAU,UAAU;AACvC,eAAWS,KAAOP;AACd,MAAKQ,EAAUR,EAAOO,CAAG,GAAGD,EAAWC,CAAG,CAAC,KACvCZ,EAAI,kBAAkBC,GAAIW,GAAKP,EAAOO,CAAG,CAAC;AAGlD,eAAWA,KAAOD;AACd,MAAKN,EAAO,eAAeO,CAAG,KAC1BZ,EAAI,kBAAkBC,GAAIW,GAAK,MAAS;AAAA;AAIpD,MAAIN,MAAUH,EAAU,OAAO;AAC3B,UAAMW,IAAYX,EAAU,SAAS;AACrC,eAAWS,KAAON;AACd,MAAKO,EAAUP,EAAMM,CAAG,GAAGE,EAAUF,CAAG,CAAC,KACrCZ,EAAI,iBAAiBC,GAAIW,GAAKN,EAAMM,CAAG,CAAC;AAGhD,eAAWA,KAAOE;AACd,MAAKR,EAAM,eAAeM,CAAG,KACzBZ,EAAI,iBAAiBC,GAAIW,GAAK,MAAS;AAAA;AAKnD,EAAKC,EAAUN,GAAQJ,EAAU,MAAM,KACnCH,EAAI,UAAUC,GAAIM,CAAM,IAExBC,MAAYL,EAAU,WAAWM,MAAYN,EAAU,YACvDH,EAAI,kBAAkBC,GAAIO,GAASC,CAAO;AAElD;AACA,SAASM,EAAYf,GAAKC,GAAIC,GAAO;AAEjC,MAAIF,EAAI,SAASA,EAAI,MAAM,YAAY,EAAE,YAAYE,MAAUF,EAAI,UAAUE,EAAM,MAAM,IAAI;AACzF,UAAMc,IAAU,EAAE,GAAGd,GAAO,IAAAD,EAAE;AAC9B,WAAOe,EAAQ,UAEfhB,EAAI,SAASgB,GAASd,EAAM,QAAQ;AAAA;AAE5C;AAEA,IAAIe,IAAe;AACnB,SAASC,EAAMhB,GAAO;AAClB,QAAMF,IAAMmB,EAAWC,CAAU,EAAE,IAAI,OAAM,GACvCC,IAAWC,EAAOpB,CAAK,GACvB,GAAGqB,CAAc,IAAIC,EAAS,CAAC,GAC/BvB,IAAKwB,EAAQ,MAAMvB,EAAM,MAAM,aAAae,OAAkB,CAAA,CAAE;AAkBtE,MAjBAS,EAAU,MAAM;AACZ,QAAI1B,GAAK;AACL,YAAM2B,IAAc,MAAMJ,EAAe,CAAAK,MAAWA,IAAU,CAAC;AAC/D,aAAA5B,EAAI,GAAG,aAAa2B,CAAW,GAC/BA,KACO,MAAM;AACT,QAAA3B,EAAI,IAAI,aAAa2B,CAAW,GAE5B3B,EAAI,SAASA,EAAI,MAAM,WAAWA,EAAI,SAASC,CAAE,KACjDD,EAAI,YAAYC,CAAE;AAAA,MAEtC;AAAA;AAAA,EAGA,GAAO,CAACD,CAAG,CAAC,GAEMA,KAAOA,EAAI,SAASA,EAAI,SAASC,CAAE;AAE7C,QAAI;AACA,MAAAF,EAAYC,GAAKC,GAAIC,GAAOmB,EAAS,OAAO;AAAA,IAC/C,SACMQ,GAAP;AACI,cAAQ,KAAKA,CAAK;AAAA,IACrB;AAAA;AAGD,IAAAd,EAAYf,GAAKC,GAAIC,CAAK;AAG9B,SAAAmB,EAAS,UAAUnB,GACZ;AACX;","x_google_ignoreList":[0]}

package/dist/es/main.js8.mjs

@@ -0,0 +1,58 @@
+import * as l from "react";
+import { useContext as b, useState as E, useRef as c, useEffect as x, useImperativeHandle as y, useMemo as w } from "react";
+import { MountedMapsContext as L } from "./main.js16.mjs";
+import m from "./main.js19.mjs";
+import I from "./main.js20.mjs";
+import C from "./main.js21.mjs";
+import g from "./main.js22.mjs";
+const R = l.createContext(null);
+function A(e, f, d) {
+  const o = b(L), [i, p] = E(null), s = c(), { current: a } = c({ mapLib: null, map: null });
+  x(() => {
+    const v = e.mapLib;
+    let u = !0, n;
+    return Promise.resolve(v || d).then((r) => {
+      if (!u)
+        return;
+      if (!r)
+        throw new Error("Invalid mapLib");
+      const t = "Map" in r ? r : r.default;
+      if (!t.Map)
+        throw new Error("Invalid mapLib");
+      if (g(t, e), !t.supported || t.supported(e))
+        e.reuseMaps && (n = m.reuse(e, s.current)), n || (n = new m(t.Map, e, s.current)), a.map = I(n), a.mapLib = t, p(n), o == null || o.onMapMount(a.map, e.id);
+      else
+        throw new Error("Map is not supported by this browser");
+    }).catch((r) => {
+      const { onError: t } = e;
+      t ? t({
+        type: "error",
+        target: null,
+        originalEvent: null,
+        error: r
+      }) : console.error(r);
+    }), () => {
+      u = !1, n && (o == null || o.onMapUnmount(e.id), e.reuseMaps ? n.recycle() : n.destroy());
+    };
+  }, []), C(() => {
+    i && i.setProps(e);
+  }), y(f, () => a.map, [i]);
+  const M = w(() => ({
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    ...e.style
+  }), [e.style]), h = {
+    height: "100%"
+  };
+  return l.createElement("div", { id: e.id, ref: s, style: M }, i && l.createElement(
+    R.Provider,
+    { value: a },
+    l.createElement("div", { "mapboxgl-children": "", style: h }, e.children)
+  ));
+}
+export {
+  R as MapContext,
+  A as default
+};
+//# sourceMappingURL=main.js8.mjs.map

package/dist/es/main.js8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js8.mjs","sources":["../../node_modules/react-map-gl/dist/esm/components/map.js"],"sourcesContent":["import * as React from 'react';\nimport { useState, useRef, useEffect, useContext, useMemo, useImperativeHandle } from 'react';\nimport { MountedMapsContext } from './use-map';\nimport Mapbox from '../mapbox/mapbox';\nimport createRef from '../mapbox/create-ref';\nimport useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';\nimport setGlobals from '../utils/set-globals';\nexport const MapContext = React.createContext(null);\nexport default function Map(props, ref, defaultLib) {\n    const mountedMapsContext = useContext(MountedMapsContext);\n    const [mapInstance, setMapInstance] = useState(null);\n    const containerRef = useRef();\n    const { current: contextValue } = useRef({ mapLib: null, map: null });\n    useEffect(() => {\n        const mapLib = props.mapLib;\n        let isMounted = true;\n        let mapbox;\n        Promise.resolve(mapLib || defaultLib)\n            .then((module) => {\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            // workerUrl & workerClass may change the result of supported()\n            // https://github.com/visgl/react-map-gl/discussions/2027\n            setGlobals(mapboxgl, props);\n            if (!mapboxgl.supported || mapboxgl.supported(props)) {\n                if (props.reuseMaps) {\n                    mapbox = Mapbox.reuse(props, containerRef.current);\n                }\n                if (!mapbox) {\n                    mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);\n                }\n                contextValue.map = createRef(mapbox);\n                contextValue.mapLib = mapboxgl;\n                setMapInstance(mapbox);\n                mountedMapsContext === null || mountedMapsContext === void 0 ? void 0 : mountedMapsContext.onMapMount(contextValue.map, props.id);\n            }\n            else {\n                throw new Error('Map is not supported by this browser');\n            }\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            }\n            else {\n                console.error(error); // eslint-disable-line\n            }\n        });\n        return () => {\n            isMounted = false;\n            if (mapbox) {\n                mountedMapsContext === null || mountedMapsContext === void 0 ? void 0 : mountedMapsContext.onMapUnmount(props.id);\n                if (props.reuseMaps) {\n                    mapbox.recycle();\n                }\n                else {\n                    mapbox.destroy();\n                }\n            }\n        };\n    }, []);\n    useIsomorphicLayoutEffect(() => {\n        if (mapInstance) {\n            mapInstance.setProps(props);\n        }\n    });\n    useImperativeHandle(ref, () => contextValue.map, [mapInstance]);\n    const style = useMemo(() => ({\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n        ...props.style\n    }), [props.style]);\n    const CHILD_CONTAINER_STYLE = {\n        height: '100%'\n    };\n    return (React.createElement(\"div\", { id: props.id, ref: containerRef, style: style }, mapInstance && (React.createElement(MapContext.Provider, { value: contextValue },\n        React.createElement(\"div\", { \"mapboxgl-children\": \"\", style: CHILD_CONTAINER_STYLE }, props.children)))));\n}\n//# sourceMappingURL=map.js.map"],"names":["MapContext","React","Map","props","ref","defaultLib","mountedMapsContext","useContext","MountedMapsContext","mapInstance","setMapInstance","useState","containerRef","useRef","contextValue","useEffect","mapLib","isMounted","mapbox","module","mapboxgl","setGlobals","Mapbox","createRef","error","onError","useIsomorphicLayoutEffect","useImperativeHandle","style","useMemo","CHILD_CONTAINER_STYLE"],"mappings":";;;;;;;AAOY,MAACA,IAAaC,EAAM,cAAc,IAAI;AACnC,SAASC,EAAIC,GAAOC,GAAKC,GAAY;AAChD,QAAMC,IAAqBC,EAAWC,CAAkB,GAClD,CAACC,GAAaC,CAAc,IAAIC,EAAS,IAAI,GAC7CC,IAAeC,KACf,EAAE,SAASC,EAAY,IAAKD,EAAO,EAAE,QAAQ,MAAM,KAAK,KAAI,CAAE;AACpE,EAAAE,EAAU,MAAM;AACZ,UAAMC,IAASb,EAAM;AACrB,QAAIc,IAAY,IACZC;AACJ,mBAAQ,QAAQF,KAAUX,CAAU,EAC/B,KAAK,CAACc,MAAW;AAClB,UAAI,CAACF;AACD;AAEJ,UAAI,CAACE;AACD,cAAM,IAAI,MAAM,gBAAgB;AAEpC,YAAMC,IAAW,SAASD,IAASA,IAASA,EAAO;AACnD,UAAI,CAACC,EAAS;AACV,cAAM,IAAI,MAAM,gBAAgB;AAKpC,UADAC,EAAWD,GAAUjB,CAAK,GACtB,CAACiB,EAAS,aAAaA,EAAS,UAAUjB,CAAK;AAC/C,QAAIA,EAAM,cACNe,IAASI,EAAO,MAAMnB,GAAOS,EAAa,OAAO,IAEhDM,MACDA,IAAS,IAAII,EAAOF,EAAS,KAAKjB,GAAOS,EAAa,OAAO,IAEjEE,EAAa,MAAMS,EAAUL,CAAM,GACnCJ,EAAa,SAASM,GACtBV,EAAeQ,CAAM,GACrBZ,KAAuB,QAAiDA,EAAmB,WAAWQ,EAAa,KAAKX,EAAM,EAAE;AAAA;AAGhI,cAAM,IAAI,MAAM,sCAAsC;AAAA,IAEtE,CAAS,EACI,MAAM,CAAAqB,MAAS;AAChB,YAAM,EAAE,SAAAC,EAAS,IAAGtB;AACpB,MAAIsB,IACAA,EAAQ;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,OAAAD;AAAA,MACpB,CAAiB,IAGD,QAAQ,MAAMA,CAAK;AAAA,IAEnC,CAAS,GACM,MAAM;AACT,MAAAP,IAAY,IACRC,MACAZ,KAAuB,QAAiDA,EAAmB,aAAaH,EAAM,EAAE,GAC5GA,EAAM,YACNe,EAAO,QAAO,IAGdA,EAAO,QAAO;AAAA,IAGlC;AAAA,EACK,GAAE,CAAE,CAAA,GACLQ,EAA0B,MAAM;AAC5B,IAAIjB,KACAA,EAAY,SAASN,CAAK;AAAA,EAEtC,CAAK,GACDwB,EAAoBvB,GAAK,MAAMU,EAAa,KAAK,CAACL,CAAW,CAAC;AAC9D,QAAMmB,IAAQC,EAAQ,OAAO;AAAA,IACzB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG1B,EAAM;AAAA,EACZ,IAAG,CAACA,EAAM,KAAK,CAAC,GACX2B,IAAwB;AAAA,IAC1B,QAAQ;AAAA,EAChB;AACI,SAAQ7B,EAAM,cAAc,OAAO,EAAE,IAAIE,EAAM,IAAI,KAAKS,GAAc,OAAOgB,EAAO,GAAEnB,KAAgBR,EAAM;AAAA,IAAcD,EAAW;AAAA,IAAU,EAAE,OAAOc,EAAc;AAAA,IAClKb,EAAM,cAAc,OAAO,EAAE,qBAAqB,IAAI,OAAO6B,EAAuB,GAAE3B,EAAM,QAAQ;AAAA,EAAC,CAAE;AAC/G;","x_google_ignoreList":[0]}

package/dist/es/main.js9.mjs

@@ -0,0 +1,49 @@
+import * as k from "react";
+import { memo as A, forwardRef as P, useContext as C, useRef as D, useMemo as M, useEffect as h, useImperativeHandle as y } from "react";
+import { createPortal as w } from "react-dom";
+import { applyReactStyle as x } from "./main.js23.mjs";
+import { MapContext as O } from "./main.js8.mjs";
+import { arePointsEqual as S } from "./main.js24.mjs";
+function q(o, E) {
+  const { map: R, mapLib: b } = C(O), i = D({ props: o });
+  i.current.props = o;
+  const t = M(() => {
+    let L = !1;
+    k.Children.forEach(o.children, (a) => {
+      a && (L = !0);
+    });
+    const _ = {
+      ...o,
+      element: L ? document.createElement("div") : null
+    }, l = new b.Marker(_);
+    return l.setLngLat([o.longitude, o.latitude]), l.getElement().addEventListener("click", (a) => {
+      var n, e;
+      (e = (n = i.current.props).onClick) === null || e === void 0 || e.call(n, {
+        type: "click",
+        target: l,
+        originalEvent: a
+      });
+    }), l.on("dragstart", (a) => {
+      var n, e;
+      const r = a;
+      r.lngLat = t.getLngLat(), (e = (n = i.current.props).onDragStart) === null || e === void 0 || e.call(n, r);
+    }), l.on("drag", (a) => {
+      var n, e;
+      const r = a;
+      r.lngLat = t.getLngLat(), (e = (n = i.current.props).onDrag) === null || e === void 0 || e.call(n, r);
+    }), l.on("dragend", (a) => {
+      var n, e;
+      const r = a;
+      r.lngLat = t.getLngLat(), (e = (n = i.current.props).onDragEnd) === null || e === void 0 || e.call(n, r);
+    }), l;
+  }, []);
+  h(() => (t.addTo(R.getMap()), () => {
+    t.remove();
+  }), []);
+  const { longitude: c, latitude: s, offset: g, style: m, draggable: u = !1, popup: d = null, rotation: f = 0, rotationAlignment: v = "auto", pitchAlignment: p = "auto" } = o;
+  return h(() => {
+    x(t.getElement(), m);
+  }, [m]), y(E, () => t, []), (t.getLngLat().lng !== c || t.getLngLat().lat !== s) && t.setLngLat([c, s]), g && !S(t.getOffset(), g) && t.setOffset(g), t.isDraggable() !== u && t.setDraggable(u), t.getRotation() !== f && t.setRotation(f), t.getRotationAlignment() !== v && t.setRotationAlignment(v), t.getPitchAlignment() !== p && t.setPitchAlignment(p), t.getPopup() !== d && t.setPopup(d), w(o.children, t.getElement());
+}
+A(P(q));
+//# sourceMappingURL=main.js9.mjs.map

package/dist/es/main.js9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js9.mjs","sources":["../../node_modules/react-map-gl/dist/esm/components/marker.js"],"sourcesContent":["/* global document */\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo } from 'react';\nimport { applyReactStyle } from '../utils/apply-react-style';\nimport { MapContext } from './map';\nimport { arePointsEqual } from '../utils/deep-equal';\n/* eslint-disable complexity,max-statements */\nfunction Marker(props, ref) {\n    const { map, mapLib } = useContext(MapContext);\n    const thisRef = useRef({ props });\n    thisRef.current.props = props;\n    const marker = 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') : null\n        };\n        const mk = new mapLib.Marker(options);\n        mk.setLngLat([props.longitude, props.latitude]);\n        mk.getElement().addEventListener('click', (e) => {\n            var _a, _b;\n            (_b = (_a = thisRef.current.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, {\n                type: 'click',\n                target: mk,\n                originalEvent: e\n            });\n        });\n        mk.on('dragstart', e => {\n            var _a, _b;\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            (_b = (_a = thisRef.current.props).onDragStart) === null || _b === void 0 ? void 0 : _b.call(_a, evt);\n        });\n        mk.on('drag', e => {\n            var _a, _b;\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            (_b = (_a = thisRef.current.props).onDrag) === null || _b === void 0 ? void 0 : _b.call(_a, evt);\n        });\n        mk.on('dragend', e => {\n            var _a, _b;\n            const evt = e;\n            evt.lngLat = marker.getLngLat();\n            (_b = (_a = thisRef.current.props).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, evt);\n        });\n        return mk;\n    }, []);\n    useEffect(() => {\n        marker.addTo(map.getMap());\n        return () => {\n            marker.remove();\n        };\n    }, []);\n    const { longitude, latitude, offset, style, draggable = false, popup = null, rotation = 0, rotationAlignment = 'auto', pitchAlignment = 'auto' } = props;\n    useEffect(() => {\n        applyReactStyle(marker.getElement(), style);\n    }, [style]);\n    useImperativeHandle(ref, () => marker, []);\n    if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {\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    return createPortal(props.children, marker.getElement());\n}\nexport default memo(forwardRef(Marker));\n//# sourceMappingURL=marker.js.map"],"names":["Marker","props","ref","map","mapLib","useContext","MapContext","thisRef","useRef","marker","useMemo","hasChildren","React","el","options","mk","e","_a","_b","evt","useEffect","longitude","latitude","offset","style","draggable","popup","rotation","rotationAlignment","pitchAlignment","applyReactStyle","useImperativeHandle","arePointsEqual","createPortal","memo","forwardRef"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/es/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "react-three-map",
-  "version": "0.0.0",
-  "files": ["dist"],
-  "main": "./dist/my-lib.umd.js",
-  "module": "./dist/my-lib.es.js",
-  "exports": {
-    ".": {
-      "import": "./dist/my-lib.es.js",
-      "require": "./dist/my-lib.umd.js"
-    }
-  },
+  "version": "0.0.2",
+  "description": "Use react-three-fiber inside MapLibre and Mapbox",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "types": "src/index.ts",
   "sideEffects": false,
+  "repository": "https://github.com/RodrigoHamuy/react-three-map",
   "homepage": "https://github.com/RodrigoHamuy/react-three-map",
   "bugs": {
     "url": "https://github.com/RodrigoHamuy/react-three-map/issues"
@@ -19,11 +15,14 @@
   "author": "RodrigoHamuy",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "prebuild": "tsc",
+    "build": "cross-env LIB_MODE=1 vite build",
+    "postbuild": "cross-env LIB_MODE=2 vite build",
     "lint": "eslint src --ext ts,tsx --fix",
     "preview": "vite preview",
     "ts": "tsc -w",
-    "stories": "yarn ladle serve"
+    "stories": "yarn ladle serve",
+    "build:stories": "yarn ladle build"
   },
   "dependencies": {
     "@react-three/fiber": "^8.13.0",
@@ -36,17 +35,19 @@
   "devDependencies": {
     "@ladle/react": "^2.13.0",
     "@react-three/drei": "^9.74.5",
+    "@types/node": "^20.3.1",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/three": "^0.152.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "@vitejs/plugin-react": "^4.0.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "three-stdlib": "^2.23.8",
-    "typescript": "^5.0.2",
+    "typescript": "~5.0.2",
     "vite": "^4.3.9"
   }
 }

package/src/canvas/canvas.tsx

@@ -0,0 +1,49 @@
+import { RenderProps, extend } from "@react-three/fiber";
+import { PropsWithChildren, memo, useEffect, useId, useMemo, useRef } from "react";
+import { Layer } from "react-map-gl/maplibre";
+import * as THREE from "three";
+import { coordsToMatrix } from "./coords-to-matrix";
+import { StateRef } from "./state-ref";
+import { useOnAdd } from "./use-on-add";
+import { useRender } from "./use-render";
+
+extend(THREE);
+
+export interface CanvasProps extends RenderProps<HTMLCanvasElement>, PropsWithChildren {
+  longitude: number,
+  latitude: number,
+  altitude?: number
+}
+
+/** react`-three-fiber` canvas inside `MapLibre` */
+export const Canvas = memo<CanvasProps>(({
+  longitude, latitude, altitude = 0,
+  children, ...renderProps
+})=>{
+  const id = useId();
+  
+  const ref : StateRef = useRef();
+
+  const m4 = useMemo(()=>coordsToMatrix({
+    latitude, longitude, altitude
+  }), [latitude, longitude, altitude])
+
+  const {onAdd, onRemove, mounted} = useOnAdd(ref, renderProps);
+
+  const render = useRender(m4, ref);
+
+  useEffect(()=>{
+    if(!mounted) return;
+    if(!ref.current) return;
+    ref.current.root.render(<>{children}</>);
+  }, [ref, mounted, children])
+
+  return <Layer
+    id={id}
+    type="custom"
+    renderingMode="3d"
+    onAdd={onAdd}
+    onRemove={onRemove}
+    render={render}
+  />
+})

package/src/canvas/coords-to-matrix.ts

@@ -0,0 +1,19 @@
+import { MercatorCoordinate } from "maplibre-gl";
+import { Euler, Matrix4, Quaternion, Vector3 } from "three";
+
+const quat = new Quaternion();
+const euler = new Euler();
+const pos = new Vector3();
+const scale = new Vector3();
+
+/** calculate Matrix4 from coordinates */
+export function coordsToMatrix ({ longitude, latitude, altitude }: {
+  longitude: number, latitude: number, altitude: number
+}) {
+  const center = MercatorCoordinate.fromLngLat([longitude, latitude], altitude);
+  const scaleUnit = center.meterInMercatorCoordinateUnits();
+  pos.set(center.x, center.y, center.z || 0);
+  scale.set(scaleUnit, -scaleUnit, scaleUnit);
+  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));  
+  return new Matrix4().compose(pos, quat, scale);
+}