@local-logic/maps 0.0.14 → 0.0.15

package/dist/{index-CTk5bvm9.js → index-3kRdcdZh.js}

@@ -1,13 +1,13 @@
-import { jsx as u, Fragment as C } from "react/jsx-runtime";
-import * as j from "react";
-import { useContext as k, useRef as S, useState as b, useMemo as m, useEffect as w, cloneElement as I } from "react";
-import { b as x, d as s } from "./logo-control-NE-LlsRy.js";
-import { g as M } from "./utils-YqJg0vBb.js";
+import { jsx as u, Fragment as x } from "react/jsx-runtime";
+import * as $ from "react";
+import { useContext as k, useRef as S, useState as b, useMemo as m, useEffect as w, cloneElement as j } from "react";
+import { b as C, d as s } from "./logo-control-NE-LlsRy.js";
+import { g as I } from "./utils-DJ13veBM.js";
 function g(t, e) {
   if (!t)
     throw new Error(e);
 }
-let $ = 0;
+let M = 0;
 function z(t, e, n) {
   if (t.style && t.style._loaded) {
     const a = { ...n };
@@ -16,17 +16,17 @@ function z(t, e, n) {
   return null;
 }
 function A(t, e, n) {
-  var l, y, d;
+  var l, y, f;
   g(e.id === n.id, "source id changed"), g(e.type === n.type, "source type changed");
   let a = "", i = 0;
-  for (const f in e)
-    f !== "children" && f !== "id" && !s(n[f], e[f]) && (a = f, i++);
+  for (const d in e)
+    d !== "children" && d !== "id" && !s(n[d], e[d]) && (a = d, i++);
   if (!i)
     return;
-  const r = e.type;
-  if (r === "geojson")
+  const o = e.type;
+  if (o === "geojson")
     t.setData(e.data);
-  else if (r === "image")
+  else if (o === "image")
     t.updateImage({
       url: e.url,
       coordinates: e.coordinates
@@ -40,53 +40,53 @@ function A(t, e, n) {
         (y = t.setUrl) == null || y.call(t, e.url);
         break;
       case "tiles":
-        (d = t.setTiles) == null || d.call(t, e.tiles);
+        (f = t.setTiles) == null || f.call(t, e.tiles);
         break;
       default:
         console.warn(`Unable to update <Source> prop: ${a}`);
     }
 }
 function E(t) {
-  const e = k(x).map.getMap(), n = S(t), [, a] = b(0), i = m(() => t.id || `jsx-source-${$++}`, []);
+  const e = k(C).map.getMap(), n = S(t), [, a] = b(0), i = m(() => t.id || `jsx-source-${M++}`, []);
   w(() => {
     if (e) {
       const l = () => setTimeout(() => a((y) => y + 1), 0);
       return e.on("styledata", l), l(), () => {
         var y;
         if (e.off("styledata", l), e.style && e.style._loaded && e.getSource(i)) {
-          const d = (y = e.getStyle()) == null ? void 0 : y.layers;
-          if (d)
-            for (const f of d)
-              f.source === i && e.removeLayer(f.id);
+          const f = (y = e.getStyle()) == null ? void 0 : y.layers;
+          if (f)
+            for (const d of f)
+              d.source === i && e.removeLayer(d.id);
           e.removeSource(i);
         }
       };
     }
   }, [e]);
-  let r = e && e.style && e.getSource(i);
-  return r ? A(r, t, n.current) : r = z(e, i, t), n.current = t, r && j.Children.map(t.children, (l) => l && I(l, {
+  let o = e && e.style && e.getSource(i);
+  return o ? A(o, t, n.current) : o = z(e, i, t), n.current = t, o && $.Children.map(t.children, (l) => l && j(l, {
     source: i
   })) || null;
 }
 function F(t, e, n, a) {
   if (g(n.id === a.id, "layer id changed"), g(n.type === a.type, "layer type changed"), n.type === "custom" || a.type === "custom")
     return;
-  const { layout: i = {}, paint: r = {}, filter: l, minzoom: y, maxzoom: d, beforeId: f } = n;
-  if (f !== a.beforeId && t.moveLayer(e, f), i !== a.layout) {
+  const { layout: i = {}, paint: o = {}, filter: l, minzoom: y, maxzoom: f, beforeId: d } = n;
+  if (d !== a.beforeId && t.moveLayer(e, d), i !== a.layout) {
     const c = a.layout || {};
-    for (const o in i)
-      s(i[o], c[o]) || t.setLayoutProperty(e, o, i[o]);
-    for (const o in c)
-      i.hasOwnProperty(o) || t.setLayoutProperty(e, o, void 0);
+    for (const r in i)
+      s(i[r], c[r]) || t.setLayoutProperty(e, r, i[r]);
+    for (const r in c)
+      i.hasOwnProperty(r) || t.setLayoutProperty(e, r, void 0);
   }
-  if (r !== a.paint) {
+  if (o !== a.paint) {
     const c = a.paint || {};
-    for (const o in r)
-      s(r[o], c[o]) || t.setPaintProperty(e, o, r[o]);
-    for (const o in c)
-      r.hasOwnProperty(o) || t.setPaintProperty(e, o, void 0);
+    for (const r in o)
+      s(o[r], c[r]) || t.setPaintProperty(e, r, o[r]);
+    for (const r in c)
+      o.hasOwnProperty(r) || t.setPaintProperty(e, r, void 0);
   }
-  s(l, a.filter) || t.setFilter(e, l), (y !== a.minzoom || d !== a.maxzoom) && t.setLayerZoomRange(e, y, d);
+  s(l, a.filter) || t.setFilter(e, l), (y !== a.minzoom || f !== a.maxzoom) && t.setLayerZoomRange(e, y, f);
 }
 function R(t, e, n) {
   if (t.style && t.style._loaded && (!("source" in n) || t.getSource(n.source))) {
@@ -96,7 +96,7 @@ function R(t, e, n) {
 }
 let U = 0;
 function h(t) {
-  const e = k(x).map.getMap(), n = S(t), [, a] = b(0), i = m(() => t.id || `jsx-layer-${U++}`, []);
+  const e = k(C).map.getMap(), n = S(t), [, a] = b(0), i = m(() => t.id || `jsx-layer-${U++}`, []);
   if (w(() => {
     if (e) {
       const l = () => a((y) => y + 1);
@@ -114,7 +114,7 @@ function h(t) {
     R(e, i, t);
   return n.current = t, null;
 }
-function L(t, e) {
+function L(t, e, n) {
   switch (t) {
     case "fill":
       return {
@@ -124,7 +124,7 @@ function L(t, e) {
     case "line":
       return {
         "line-color": e,
-        "line-width": 2
+        "line-width": n === "LineString" ? 6 : 2
       };
     default:
       return {};
@@ -133,20 +133,22 @@ function L(t, e) {
 function T({ sources: t }) {
   const e = m(() => !Array.isArray(t) || t.length === 0 ? [] : t.map((n) => ({
     ...n,
-    geoJson: n.geometry ? M(n.geometry) : null
+    geoJson: n.geometry ? I(n.geometry, n.type) : null
   })), [t]);
-  return (e == null ? void 0 : e.length) === 0 ? null : /* @__PURE__ */ u(C, { children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ u("div", { children: n.geoJson && /* @__PURE__ */ u(E, { id: n.key, type: "geojson", data: n.geoJson, children: n.layer && (Array.isArray(n.layer) ? n.layer.map((a, i) => /* @__PURE__ */ u(
+  return (e == null ? void 0 : e.length) === 0 ? null : /* @__PURE__ */ u(x, { children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ u("div", { children: n.geoJson && /* @__PURE__ */ u(E, { id: n.key, type: "geojson", data: n.geoJson, children: n.layer && (Array.isArray(n.layer) ? n.layer.map((a, i) => /* @__PURE__ */ u(
     h,
     {
+      id: `${n.key}-${i}`,
       type: a.type,
-      paint: L(a.type, a.color)
+      paint: L(a.type, a.color, n.type)
     },
     `${n.key}-${i}`
   )) : /* @__PURE__ */ u(
     h,
     {
+      id: n.key,
       type: n.layer.type,
-      paint: L(n.layer.type, n.layer.color)
+      paint: L(n.layer.type, n.layer.color, n.type)
     }
   )) }, n.key) }, n.key)) });
 }

package/dist/{index-DY5pY-zk.js → index-BiSKh6cm.js}

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useEffect as a, useMemo as f } from "react";
 import { u as o, I as s } from "./index.modern-CLRs8JwI.js";
-import { u as y } from "./index-Bp1bWq9c.js";
+import { u as y } from "./index-D4zzctTs.js";
 import { c as x } from "./styles-ChFj97uV.js";
 function I({
   latitude: u,

package/dist/index-BsV7l4S5.js

@@ -0,0 +1,57 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { u as M, a as k } from "./index.modern-CLRs8JwI.js";
+import { u as I, M as O } from "./index-D4zzctTs.js";
+import { C as _, c as b, M as h } from "./index-pGewpik1.js";
+function C({
+  clusters: a,
+  colors: i,
+  clusterIcon: d,
+  onClick: t,
+  doesSuperclusterContainActiveMarker: m
+}) {
+  M();
+  const { activeMarker: r, zoom: s } = I(), f = (e) => () => {
+    e.properties.disableClick || t == null || t(e);
+  };
+  return a == null ? void 0 : a.map((e, g) => {
+    const n = e.geometry.coordinates[0], p = e.geometry.coordinates[1];
+    return /* @__PURE__ */ u(
+      k,
+      {
+        position: {
+          lat: p,
+          lng: n
+        },
+        onClick: f(e),
+        children: [
+          e.properties.cluster && /* @__PURE__ */ o(
+            _,
+            {
+              colors: i,
+              icon: d,
+              isActive: m(e.properties.cluster_id)
+            }
+          ),
+          !e.properties.cluster && /* @__PURE__ */ o(
+            "div",
+            {
+              className: b,
+              style: e.properties.defaultColor ? {} : {
+                "--background": i == null ? void 0 : i.background,
+                "--fill": i == null ? void 0 : i.fill
+              },
+              "data-is-cluster": !!e.properties.cluster,
+              "data-is-zoomed-out": s - 1 < O + 1,
+              "data-is-active": (r == null ? void 0 : r.id) === e.properties.id,
+              children: /* @__PURE__ */ o(h, { icon: e.properties.icon })
+            }
+          )
+        ]
+      },
+      `map-marker-${n}-${p}-${g}`
+    );
+  });
+}
+export {
+  C as default
+};

package/dist/{index-C36u5N_F.js → index-CJL604iU.js}

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { useEffect as a } from "react";
 import { P as c } from "./scale-control-CyJd4u6j.js";
-import { u as i } from "./index-Bp1bWq9c.js";
+import { u as i } from "./index-D4zzctTs.js";
 import { c as n } from "./styles-ChFj97uV.js";
 function l({
   latitude: p,

package/dist/{index-Bp1bWq9c.js → index-D4zzctTs.js}

@@ -10,7 +10,7 @@ const tt = it.createContext({}), R = () => at(tt), I = {
   maptiler: "600d69cb-288d-445e-9839-3dfe4d76b31a",
   mapbox: "locallogic/cmb9nz9kb011501ru8drq8fqf",
   google: "a7ff20eb973126bb"
-}, Y = 13, ut = 22, Ht = 12.5, ht = 30, pt = 60, lt = "w-full h-full relative overflow-hidden", ft = w(() => import("./index-S5SfktvB.js")), dt = w(() => import("./index-CUpaKIZP.js")), gt = w(() => import("./index-BGoTpJjt.js")), mt = w(() => import("./index-qqbvBkdn.js")), yt = ({ padding: r = 1e-3, children: t }) => {
+}, Y = 13, ut = 22, Ht = 12.5, ht = 30, pt = 60, lt = "w-full h-full relative overflow-hidden", ft = w(() => import("./index-DAov3leT.js")), dt = w(() => import("./index-DgzwPaj5.js")), gt = w(() => import("./index-DcbaLZSy.js")), mt = w(() => import("./index-qqbvBkdn.js")), yt = ({ padding: r = 1e-3, children: t }) => {
   const {
     mapProvider: e,
     center: n,
@@ -564,7 +564,7 @@ var Lt = function(t) {
     supercluster: c.current
   };
 };
-const It = w(() => import("./index-CCtDJ-mV.js")), vt = w(() => import("./index-CXTsUiSS.js")), Rt = w(() => import("./index-58w3Qwxr.js"));
+const It = w(() => import("./index-Dxhpxh8s.js")), vt = w(() => import("./index-BsV7l4S5.js")), Rt = w(() => import("./index-DLKjaFD7.js"));
 function Zt({ markers: r, onClick: t, ...e }) {
   const { mapProvider: n, activeMarker: o, center: i, bounds: a, zoom: c, setMarkerPoints: s } = R();
   ct(() => {
@@ -629,7 +629,7 @@ function Zt({ markers: r, onClick: t, ...e }) {
     }
   ) : null;
 }
-const Ct = w(() => import("./index-CXUQoF5Q.js")), Ut = w(() => import("./index-DY5pY-zk.js")), Bt = w(() => import("./index-C36u5N_F.js"));
+const Ct = w(() => import("./index-DQ-QUYzC.js")), Ut = w(() => import("./index-BiSKh6cm.js")), Bt = w(() => import("./index-CJL604iU.js"));
 function Ft({ children: r, anchor: t = "bottom", ...e }) {
   const { mapProvider: n } = R(), o = P(() => {
     switch (n == null ? void 0 : n.name) {
@@ -645,7 +645,7 @@ function Ft({ children: r, anchor: t = "bottom", ...e }) {
   }, [n]);
   return o ? /* @__PURE__ */ T(o, { ...e, anchor: t, children: r }) : null;
 }
-const zt = w(() => import("./index-CTk5bvm9.js")), Dt = w(() => import("./index-UEadmVww.js")), Nt = w(() => import("./index-DVitM43i.js"));
+const zt = w(() => import("./index-3kRdcdZh.js")), Dt = w(() => import("./index-x3wrHsPD.js")), Nt = w(() => import("./index-Yh7bUURu.js"));
 function jt(r) {
   const { mapProvider: t } = R(), e = P(() => {
     switch (t == null ? void 0 : t.name) {

package/dist/{index-S5SfktvB.js → index-DAov3leT.js}

@@ -2,7 +2,7 @@ import { jsxs as x, jsx as d } from "react/jsx-runtime";
 import { useState as y, useEffect as c } from "react";
 import { M as g, N as h, u as b } from "./logo-control-NE-LlsRy.js";
 import { b as B } from "./index-CFomI3Il.js";
-import { u as M, d as u, a as Z, m as z } from "./index-Bp1bWq9c.js";
+import { u as M, d as u, a as Z, m as z } from "./index-D4zzctTs.js";
 const L = ({ padding: i }) => {
   const { current: o } = b(), { markerPoints: n, setBounds: m, setZoom: f } = M(), [r, p] = y(void 0), s = () => {
     var e;

package/dist/index-DLKjaFD7.js

@@ -0,0 +1,56 @@
+import { jsxs as M, jsx as p } from "react/jsx-runtime";
+import { a as b } from "./scale-control-CyJd4u6j.js";
+import "react";
+import { u, M as h } from "./index-D4zzctTs.js";
+import { C as k, c as x, M as I } from "./index-pGewpik1.js";
+function N({
+  clusters: t,
+  colors: e,
+  clusterIcon: m,
+  onClick: a,
+  doesSuperclusterContainActiveMarker: s
+}) {
+  const { activeMarker: r, zoom: f } = u(), g = (i) => (o) => {
+    o.originalEvent.stopPropagation(), !i.properties.disableClick && (a == null || a(i));
+  };
+  return t == null ? void 0 : t.map((i, o) => {
+    const n = i.geometry.coordinates[0], d = i.geometry.coordinates[1];
+    return /* @__PURE__ */ M(
+      b,
+      {
+        anchor: "bottom",
+        longitude: n,
+        latitude: d,
+        onClick: g(i),
+        children: [
+          i.properties.cluster && /* @__PURE__ */ p(
+            k,
+            {
+              colors: e,
+              icon: m,
+              isActive: s(i.properties.cluster_id)
+            }
+          ),
+          !i.properties.cluster && /* @__PURE__ */ p(
+            "div",
+            {
+              className: x,
+              style: i.properties.defaultColor ? {} : {
+                "--background": e == null ? void 0 : e.background,
+                "--fill": e == null ? void 0 : e.fill
+              },
+              "data-is-cluster": !!i.properties.cluster,
+              "data-is-zoomed-out": f < h,
+              "data-is-active": (r == null ? void 0 : r.id) === i.properties.id,
+              children: /* @__PURE__ */ p(I, { icon: i.properties.icon })
+            }
+          )
+        ]
+      },
+      `map-marker-${n}-${d}-${o}`
+    );
+  });
+}
+export {
+  N as default
+};

package/dist/{index-CXUQoF5Q.js → index-DQ-QUYzC.js}

@@ -1,7 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import { useEffect as a } from "react";
 import { P as i } from "./logo-control-NE-LlsRy.js";
-import { u as c } from "./index-Bp1bWq9c.js";
+import { u as c } from "./index-D4zzctTs.js";
 import { c as n } from "./styles-ChFj97uV.js";
 function y({
   latitude: e,

package/dist/{index-BGoTpJjt.js → index-DcbaLZSy.js}

@@ -2,7 +2,7 @@ import { jsxs as M, jsx as d } from "react/jsx-runtime";
 import { useState as v, useEffect as l } from "react";
 import { M as y, N as g, u as h } from "./scale-control-CyJd4u6j.js";
 import { b as B } from "./index-CFomI3Il.js";
-import { u as b, d as u, a as Z, m as z } from "./index-Bp1bWq9c.js";
+import { u as b, d as u, a as Z, m as z } from "./index-D4zzctTs.js";
 const L = ({ padding: i }) => {
   const { current: o } = h(), { markerPoints: n, setBounds: m, setZoom: f } = b(), [r, p] = v(void 0), a = () => {
     var t;

package/dist/{index-CUpaKIZP.js → index-DgzwPaj5.js}

@@ -2,7 +2,7 @@ import { jsxs as v, jsx as T } from "react/jsx-runtime";
 import { useState as h, useEffect as M } from "react";
 import { A as y, M as L, C as f, u as P } from "./index.modern-CLRs8JwI.js";
 import { b as x } from "./index-CFomI3Il.js";
-import { u as b, d as p, a as B, m as O } from "./index-Bp1bWq9c.js";
+import { u as b, d as p, a as B, m as O } from "./index-D4zzctTs.js";
 const Z = {
   "top-left": f.LEFT_TOP,
   "top-right": f.RIGHT_TOP,

package/dist/index-Dxhpxh8s.js

@@ -0,0 +1,56 @@
+import { jsxs as M, jsx as p } from "react/jsx-runtime";
+import { a as u } from "./logo-control-NE-LlsRy.js";
+import "react";
+import { u as _, M as b } from "./index-D4zzctTs.js";
+import { C as h, c as k, M as I } from "./index-pGewpik1.js";
+function N({
+  clusters: t,
+  colors: e,
+  clusterIcon: m,
+  onClick: a,
+  doesSuperclusterContainActiveMarker: s
+}) {
+  const { activeMarker: r, zoom: f } = _(), g = (i) => (o) => {
+    o.originalEvent.stopPropagation(), !i.properties.disableClick && (a == null || a(i));
+  };
+  return t == null ? void 0 : t.map((i, o) => {
+    const n = i.geometry.coordinates[0], d = i.geometry.coordinates[1];
+    return /* @__PURE__ */ M(
+      u,
+      {
+        anchor: "bottom",
+        longitude: n,
+        latitude: d,
+        onClick: g(i),
+        children: [
+          i.properties.cluster && i.properties.cluster_id && /* @__PURE__ */ p(
+            h,
+            {
+              colors: e,
+              icon: m,
+              isActive: s(i.properties.cluster_id)
+            }
+          ),
+          !i.properties.cluster && /* @__PURE__ */ p(
+            "div",
+            {
+              className: k,
+              style: i.properties.defaultColor ? {} : {
+                "--background": e == null ? void 0 : e.background,
+                "--fill": e == null ? void 0 : e.fill
+              },
+              "data-is-cluster": !!i.properties.cluster,
+              "data-is-zoomed-out": f < b,
+              "data-is-active": (r == null ? void 0 : r.id) === i.properties.id,
+              children: /* @__PURE__ */ p(I, { icon: i.properties.icon })
+            }
+          )
+        ]
+      },
+      `map-marker-${n}-${d}-${o}`
+    );
+  });
+}
+export {
+  N as default
+};

package/dist/{index-DVitM43i.js → index-Yh7bUURu.js}

@@ -1,14 +1,14 @@
 import { jsx as u, Fragment as b } from "react/jsx-runtime";
-import * as j from "react";
-import { useContext as S, useRef as k, useState as x, useMemo as m, useEffect as C, cloneElement as I } from "react";
-import { b as w, d as s } from "./scale-control-CyJd4u6j.js";
-import { g as M } from "./utils-YqJg0vBb.js";
+import * as $ from "react";
+import { useContext as S, useRef as k, useState as C, useMemo as m, useEffect as w, cloneElement as j } from "react";
+import { b as x, d as s } from "./scale-control-CyJd4u6j.js";
+import { g as I } from "./utils-DJ13veBM.js";
 function g(t, e) {
   if (!t)
     throw new Error(e);
 }
-let U = 0;
-function $(t, e, n) {
+let M = 0;
+function U(t, e, n) {
   if (t.style && t.style._loaded) {
     const a = { ...n };
     return delete a.id, delete a.children, t.addSource(e, a), t.getSource(e);
@@ -18,8 +18,8 @@ function $(t, e, n) {
 function z(t, e, n) {
   g(e.id === n.id, "source id changed"), g(e.type === n.type, "source type changed");
   let a = "", i = 0;
-  for (const o in e)
-    o !== "children" && o !== "id" && !s(n[o], e[o]) && (a = o, i++);
+  for (const l in e)
+    l !== "children" && l !== "id" && !s(n[l], e[l]) && (a = l, i++);
   if (!i)
     return;
   const r = e.type;
@@ -29,13 +29,13 @@ function z(t, e, n) {
   }) : "setCoordinates" in t && i === 1 && a === "coordinates" ? t.setCoordinates(e.coordinates) : "setUrl" in t && a === "url" ? t.setUrl(e.url) : "setTiles" in t && a === "tiles" ? t.setTiles(e.tiles) : console.warn(`Unable to update <Source> prop: ${a}`);
 }
 function A(t) {
-  const e = S(w).map.getMap(), n = k(t), [, a] = x(0), i = m(() => t.id || `jsx-source-${U++}`, []);
-  C(() => {
+  const e = S(x).map.getMap(), n = k(t), [, a] = C(0), i = m(() => t.id || `jsx-source-${M++}`, []);
+  w(() => {
     if (e) {
-      const o = () => setTimeout(() => a((y) => y + 1), 0);
-      return e.on("styledata", o), o(), () => {
+      const l = () => setTimeout(() => a((y) => y + 1), 0);
+      return e.on("styledata", l), l(), () => {
         var y;
-        if (e.off("styledata", o), e.style && e.style._loaded && e.getSource(i)) {
+        if (e.off("styledata", l), e.style && e.style._loaded && e.getSource(i)) {
           const f = (y = e.getStyle()) == null ? void 0 : y.layers;
           if (f)
             for (const d of f)
@@ -46,29 +46,29 @@ function A(t) {
     }
   }, [e]);
   let r = e && e.style && e.getSource(i);
-  return r ? z(r, t, n.current) : r = $(e, i, t), n.current = t, r && j.Children.map(t.children, (o) => o && I(o, {
+  return r ? z(r, t, n.current) : r = U(e, i, t), n.current = t, r && $.Children.map(t.children, (l) => l && j(l, {
     source: i
   })) || null;
 }
 function E(t, e, n, a) {
   if (g(n.id === a.id, "layer id changed"), g(n.type === a.type, "layer type changed"), n.type === "custom" || a.type === "custom")
     return;
-  const { layout: i = {}, paint: r = {}, filter: o, minzoom: y, maxzoom: f, beforeId: d } = n;
+  const { layout: i = {}, paint: r = {}, filter: l, minzoom: y, maxzoom: f, beforeId: d } = n;
   if (d !== a.beforeId && t.moveLayer(e, d), i !== a.layout) {
     const c = a.layout || {};
-    for (const l in i)
-      s(i[l], c[l]) || t.setLayoutProperty(e, l, i[l]);
-    for (const l in c)
-      i.hasOwnProperty(l) || t.setLayoutProperty(e, l, void 0);
+    for (const o in i)
+      s(i[o], c[o]) || t.setLayoutProperty(e, o, i[o]);
+    for (const o in c)
+      i.hasOwnProperty(o) || t.setLayoutProperty(e, o, void 0);
   }
   if (r !== a.paint) {
     const c = a.paint || {};
-    for (const l in r)
-      s(r[l], c[l]) || t.setPaintProperty(e, l, r[l]);
-    for (const l in c)
-      r.hasOwnProperty(l) || t.setPaintProperty(e, l, void 0);
+    for (const o in r)
+      s(r[o], c[o]) || t.setPaintProperty(e, o, r[o]);
+    for (const o in c)
+      r.hasOwnProperty(o) || t.setPaintProperty(e, o, void 0);
   }
-  s(o, a.filter) || t.setFilter(e, o), (y !== a.minzoom || f !== a.maxzoom) && t.setLayerZoomRange(e, y, f);
+  s(l, a.filter) || t.setFilter(e, l), (y !== a.minzoom || f !== a.maxzoom) && t.setLayerZoomRange(e, y, f);
 }
 function F(t, e, n) {
   if (t.style && t.style._loaded && (!("source" in n) || t.getSource(n.source))) {
@@ -77,26 +77,26 @@ function F(t, e, n) {
   }
 }
 let R = 0;
-function h(t) {
-  const e = S(w).map.getMap(), n = k(t), [, a] = x(0), i = m(() => t.id || `jsx-layer-${R++}`, []);
-  if (C(() => {
+function L(t) {
+  const e = S(x).map.getMap(), n = k(t), [, a] = C(0), i = m(() => t.id || `jsx-layer-${R++}`, []);
+  if (w(() => {
     if (e) {
-      const o = () => a((y) => y + 1);
-      return e.on("styledata", o), o(), () => {
-        e.off("styledata", o), e.style && e.style._loaded && e.getLayer(i) && e.removeLayer(i);
+      const l = () => a((y) => y + 1);
+      return e.on("styledata", l), l(), () => {
+        e.off("styledata", l), e.style && e.style._loaded && e.getLayer(i) && e.removeLayer(i);
       };
     }
   }, [e]), e && e.style && e.getLayer(i))
     try {
       E(e, i, t, n.current);
-    } catch (o) {
-      console.warn(o);
+    } catch (l) {
+      console.warn(l);
     }
   else
     F(e, i, t);
   return n.current = t, null;
 }
-function L(t, e) {
+function h(t, e, n) {
   switch (t) {
     case "fill":
       return {
@@ -106,7 +106,7 @@ function L(t, e) {
     case "line":
       return {
         "line-color": e,
-        "line-width": 2
+        "line-width": n === "LineString" ? 6 : 2
       };
     default:
       return {};
@@ -115,20 +115,22 @@ function L(t, e) {
 function O({ sources: t }) {
   const e = m(() => !Array.isArray(t) || t.length === 0 ? [] : t.map((n) => ({
     ...n,
-    geoJson: n.geometry ? M(n.geometry) : null
+    geoJson: n.geometry ? I(n.geometry, n.type) : null
   })), [t]);
   return (e == null ? void 0 : e.length) === 0 ? null : /* @__PURE__ */ u(b, { children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ u("div", { children: n.geoJson && /* @__PURE__ */ u(A, { id: n.key, type: "geojson", data: n.geoJson, children: n.layer && (Array.isArray(n.layer) ? n.layer.map((a, i) => /* @__PURE__ */ u(
-    h,
+    L,
     {
+      id: `${n.key}-${i}`,
       type: a.type,
-      paint: L(a.type, a.color)
+      paint: h(a.type, a.color, n.type)
     },
     `${n.key}-${i}`
   )) : /* @__PURE__ */ u(
-    h,
+    L,
     {
+      id: n.key,
       type: n.layer.type,
-      paint: L(n.layer.type, n.layer.color)
+      paint: h(n.layer.type, n.layer.color, n.type)
     }
   )) }, n.key) }, n.key)) });
 }