@geowiki/map 0.16.9-dev.26 → 0.16.9-dev.28

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.
Files changed (3) hide show
  1. package/dist/index.js +116 -107
  2. package/dist/index.mjs +116 -107
  3. package/package.json +7 -7
package/dist/index.js CHANGED
@@ -19975,42 +19975,42 @@ var import_jsx_runtime81 = require("react/jsx-runtime");
19975
19975
  var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapControls, sourceData, show_popup, popup }, ref) => {
19976
19976
  const mapContainer = ref;
19977
19977
  const mapRef = (0, import_react66.useRef)(null);
19978
- const map = mapRef.current;
19978
+ const [isMapReady, setIsMapReady] = (0, import_react66.useState)(false);
19979
19979
  const changeMapProjection = () => {
19980
19980
  var _a;
19981
19981
  if (!mapRef.current) return;
19982
- const map2 = mapRef.current;
19983
- const currentProjection = (_a = map2.getProjection()) == null ? void 0 : _a.type;
19982
+ const map = mapRef.current;
19983
+ const currentProjection = (_a = map.getProjection()) == null ? void 0 : _a.type;
19984
19984
  const newProjection = currentProjection === "mercator" ? "globe" : "mercator";
19985
- map2.setProjection({
19985
+ map.setProjection({
19986
19986
  type: newProjection
19987
19987
  });
19988
19988
  };
19989
19989
  const zoomIn = () => {
19990
19990
  if (!mapRef.current) return;
19991
- const map2 = mapRef.current;
19992
- map2.zoomIn();
19993
- return map2.getBounds();
19991
+ const map = mapRef.current;
19992
+ map.zoomIn();
19993
+ return map.getBounds();
19994
19994
  };
19995
19995
  const zoomOut = () => {
19996
19996
  if (!mapRef.current) return;
19997
- const map2 = mapRef.current;
19998
- map2.zoomOut();
19999
- return map2.getBounds();
19997
+ const map = mapRef.current;
19998
+ map.zoomOut();
19999
+ return map.getBounds();
20000
20000
  };
20001
20001
  function getLayersByPattern(pattern) {
20002
20002
  if (!mapRef.current) return;
20003
- const map2 = mapRef.current;
20004
- return map2 == null ? void 0 : map2.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
20003
+ const map = mapRef.current;
20004
+ return map == null ? void 0 : map.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
20005
20005
  }
20006
20006
  const handleToggle = (layerId) => {
20007
20007
  if (!mapRef.current) return;
20008
- const map2 = mapRef.current;
20008
+ const map = mapRef.current;
20009
20009
  const layers = getLayersByPattern(new RegExp(layerId));
20010
20010
  layers == null ? void 0 : layers.forEach((id) => {
20011
- const visibility = map2 == null ? void 0 : map2.getLayoutProperty(id, "visibility");
20011
+ const visibility = map == null ? void 0 : map.getLayoutProperty(id, "visibility");
20012
20012
  const newVisibility = visibility === "none" ? "visible" : "none";
20013
- map2 == null ? void 0 : map2.setLayoutProperty(id, "visibility", newVisibility);
20013
+ map == null ? void 0 : map.setLayoutProperty(id, "visibility", newVisibility);
20014
20014
  });
20015
20015
  };
20016
20016
  const buildControls = (controls) => {
@@ -20145,64 +20145,70 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20145
20145
  return img;
20146
20146
  });
20147
20147
  const updatePinImage = (source) => __async(null, null, function* () {
20148
+ const map = mapRef.current;
20149
+ if (!map) return;
20148
20150
  const img = yield loadSvgImage(source.style.pin_color);
20149
20151
  const imgName = `${source.name}-pin`;
20150
- if (map == null ? void 0 : map.hasImage(imgName)) map == null ? void 0 : map.removeImage(imgName);
20151
- map == null ? void 0 : map.addImage(imgName, img);
20152
+ if (map.hasImage(imgName)) map.removeImage(imgName);
20153
+ map.addImage(imgName, img);
20152
20154
  });
20153
20155
  const updateClusterColors = (source) => {
20156
+ const map = mapRef.current;
20157
+ if (!map) return;
20154
20158
  const layerId = `${source.name}-cluster-circles`;
20155
- if (!(map == null ? void 0 : map.getLayer(layerId))) return;
20156
- const current = map == null ? void 0 : map.getPaintProperty(layerId, "circle-color");
20159
+ if (!map.getLayer(layerId)) return;
20160
+ const current = map.getPaintProperty(layerId, "circle-color");
20157
20161
  if (current !== source.style.cluster_color) {
20158
- map == null ? void 0 : map.setPaintProperty(layerId, "circle-color", source.style.cluster_color);
20159
- map == null ? void 0 : map.setPaintProperty(layerId, "circle-stroke-color", source.style.cluster_stroke_color);
20162
+ map.setPaintProperty(layerId, "circle-color", source.style.cluster_color);
20163
+ map.setPaintProperty(layerId, "circle-stroke-color", source.style.cluster_stroke_color);
20160
20164
  }
20161
20165
  };
20162
20166
  const loadBaseLayers = () => {
20163
- if (baseLayers && (baseLayers == null ? void 0 : baseLayers.length) > 0) {
20164
- const base_layers = buildBaseLayers(baseLayers);
20165
- base_layers == null ? void 0 : base_layers.forEach((layer) => {
20166
- if (!(map == null ? void 0 : map.getLayer(layer.name))) {
20167
- if (!(map == null ? void 0 : map.getSource(layer == null ? void 0 : layer.name))) {
20168
- if ((layer == null ? void 0 : layer.layer_type) == "satellite") {
20169
- map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
20170
- type: layer == null ? void 0 : layer.type,
20171
- tiles: [layer == null ? void 0 : layer.url],
20172
- tileSize: layer == null ? void 0 : layer.tileSize
20173
- });
20174
- map == null ? void 0 : map.addLayer({ id: layer == null ? void 0 : layer.name, type: layer == null ? void 0 : layer.type, source: layer == null ? void 0 : layer.name });
20175
- } else
20176
- map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
20177
- type: layer == null ? void 0 : layer.type,
20178
- url: layer == null ? void 0 : layer.url,
20179
- tileSize: layer == null ? void 0 : layer.tileSize
20180
- });
20181
- if ((layer == null ? void 0 : layer.layer_type) == "terrainSource")
20182
- map == null ? void 0 : map.setTerrain({
20183
- source: "terrainSource",
20184
- exaggeration: 1
20185
- });
20186
- if ((layer == null ? void 0 : layer.layer_type) == "hillshade")
20187
- map == null ? void 0 : map.addLayer({
20188
- id: layer == null ? void 0 : layer.name,
20189
- type: layer == null ? void 0 : layer.layer_type,
20190
- source: layer == null ? void 0 : layer.name,
20191
- paint: { "hillshade-shadow-color": "#473B24" },
20192
- layout: { visibility: "visible" }
20193
- });
20194
- }
20167
+ const map = mapRef.current;
20168
+ if (!map || !baseLayers || baseLayers.length === 0) return;
20169
+ const base_layers = buildBaseLayers(baseLayers);
20170
+ base_layers == null ? void 0 : base_layers.forEach((layer) => {
20171
+ if (!map.getLayer(layer.name)) {
20172
+ if (!map.getSource(layer == null ? void 0 : layer.name)) {
20173
+ if ((layer == null ? void 0 : layer.layer_type) == "satellite") {
20174
+ map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
20175
+ type: layer == null ? void 0 : layer.type,
20176
+ tiles: [layer == null ? void 0 : layer.url],
20177
+ tileSize: layer == null ? void 0 : layer.tileSize
20178
+ });
20179
+ map == null ? void 0 : map.addLayer({ id: layer == null ? void 0 : layer.name, type: layer == null ? void 0 : layer.type, source: layer == null ? void 0 : layer.name });
20180
+ } else
20181
+ map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
20182
+ type: layer == null ? void 0 : layer.type,
20183
+ url: layer == null ? void 0 : layer.url,
20184
+ tileSize: layer == null ? void 0 : layer.tileSize
20185
+ });
20186
+ if ((layer == null ? void 0 : layer.layer_type) == "terrainSource")
20187
+ map == null ? void 0 : map.setTerrain({
20188
+ source: "terrainSource",
20189
+ exaggeration: 1
20190
+ });
20191
+ if ((layer == null ? void 0 : layer.layer_type) == "hillshade")
20192
+ map == null ? void 0 : map.addLayer({
20193
+ id: layer == null ? void 0 : layer.name,
20194
+ type: layer == null ? void 0 : layer.layer_type,
20195
+ source: layer == null ? void 0 : layer.name,
20196
+ paint: { "hillshade-shadow-color": "#473B24" },
20197
+ layout: { visibility: "visible" }
20198
+ });
20195
20199
  }
20196
- });
20197
- }
20200
+ }
20201
+ });
20198
20202
  };
20199
- const loadSourceData = () => {
20200
- if ((sourceData == null ? void 0 : sourceData.length) == 0) return;
20201
- sourceData == null ? void 0 : sourceData.forEach((source) => __async(null, null, function* () {
20202
- const existing_data = map == null ? void 0 : map.getSource(source.name);
20203
+ const loadSourceData = () => __async(null, null, function* () {
20204
+ var _a, _b, _c, _d;
20205
+ const map = mapRef.current;
20206
+ if (!map || (sourceData == null ? void 0 : sourceData.length) == 0) return;
20207
+ for (const source of sourceData) {
20208
+ const existing_data = map.getSource(source.name);
20203
20209
  if (!existing_data) {
20204
20210
  if (source.is_cluster) {
20205
- map == null ? void 0 : map.addSource(source.name, {
20211
+ map.addSource(source.name, {
20206
20212
  type: source.type,
20207
20213
  data: source.data,
20208
20214
  cluster: true,
@@ -20210,12 +20216,9 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20210
20216
  clusterRadius: 50
20211
20217
  });
20212
20218
  } else
20213
- map == null ? void 0 : map.addSource(source.name, {
20219
+ map.addSource(source.name, {
20214
20220
  type: source.type,
20215
20221
  data: source.data
20216
- // cluster: true,
20217
- // clusterMaxZoom: 10,
20218
- // clusterRadius: 50,
20219
20222
  });
20220
20223
  if (source.show_cluster_count) {
20221
20224
  map == null ? void 0 : map.addLayer({
@@ -20224,11 +20227,11 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20224
20227
  source: source.name,
20225
20228
  filter: ["has", "point_count"],
20226
20229
  paint: {
20227
- "circle-color": source.style.cluster_color,
20230
+ "circle-color": (_a = source.style) == null ? void 0 : _a.cluster_color,
20228
20231
  "circle-opacity": 1,
20229
20232
  "circle-radius": 20,
20230
20233
  "circle-stroke-width": 4,
20231
- "circle-stroke-color": source.style.cluster_stroke_color
20234
+ "circle-stroke-color": (_b = source.style) == null ? void 0 : _b.cluster_stroke_color
20232
20235
  }
20233
20236
  });
20234
20237
  map == null ? void 0 : map.addLayer({
@@ -20266,26 +20269,19 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20266
20269
  id: `${source.name}-cluster-circles`,
20267
20270
  type: "circle",
20268
20271
  source: source.name,
20269
- //filter: [">", ["get", "count"], 1],
20270
20272
  filter: ["!=", ["get", "count"], null],
20271
20273
  paint: {
20272
- "circle-color": source.style.cluster_color,
20274
+ "circle-color": (_c = source.style) == null ? void 0 : _c.cluster_color,
20273
20275
  "circle-opacity": 1,
20274
20276
  "circle-radius": 20,
20275
20277
  "circle-stroke-width": 4,
20276
- "circle-stroke-color": source.style.cluster_stroke_color
20277
- // "circle-radius": [
20278
- // "step",
20279
- // ["get", "count"],
20280
- // 20, 100, 30, 750, 40
20281
- // ]
20278
+ "circle-stroke-color": (_d = source.style) == null ? void 0 : _d.cluster_stroke_color
20282
20279
  }
20283
20280
  });
20284
20281
  map == null ? void 0 : map.addLayer({
20285
20282
  id: `${source.name}-cluster-count`,
20286
20283
  type: "symbol",
20287
20284
  source: source.name,
20288
- //filter: [">", ["get", "count"], 1],
20289
20285
  filter: ["!=", ["get", "count"], null],
20290
20286
  layout: {
20291
20287
  "text-field": "{count}",
@@ -20304,7 +20300,6 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20304
20300
  id: source.name + "-pins",
20305
20301
  type: "symbol",
20306
20302
  source: source.name,
20307
- // filter: ["!", ["has", "count"]],
20308
20303
  filter: ["==", ["get", "count"], null],
20309
20304
  layout: {
20310
20305
  "icon-image": `${source.name}-pin`,
@@ -20319,13 +20314,12 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20319
20314
  updateClusterColors(source);
20320
20315
  updatePinImage(source);
20321
20316
  }
20322
- }));
20323
- };
20317
+ }
20318
+ });
20324
20319
  (0, import_react66.useEffect)(() => {
20325
20320
  if (typeof mapContainer === "function") return;
20326
20321
  if (!(mapContainer == null ? void 0 : mapContainer.current)) return;
20327
- if (!sourceData) return;
20328
- const map2 = new import_maplibre_gl.default.Map({
20322
+ const map = new import_maplibre_gl.default.Map({
20329
20323
  container: mapContainer == null ? void 0 : mapContainer.current,
20330
20324
  style: {
20331
20325
  version: 8,
@@ -20353,20 +20347,22 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20353
20347
  renderWorldCopies: false,
20354
20348
  canvasContextAttributes: { antialias: true }
20355
20349
  });
20356
- mapRef.current = map2;
20357
- map2.scrollZoom.disable();
20358
- mapRef.current.getContainer().addEventListener("mouseenter", () => map2.scrollZoom.enable());
20359
- mapRef.current.getContainer().addEventListener("mouseleave", () => map2.scrollZoom.disable());
20360
- map2.on("load", () => __async(null, null, function* () {
20350
+ mapRef.current = map;
20351
+ map.scrollZoom.disable();
20352
+ mapRef.current.getContainer().addEventListener("mouseenter", () => map.scrollZoom.enable());
20353
+ mapRef.current.getContainer().addEventListener("mouseleave", () => map.scrollZoom.disable());
20354
+ map.on("load", () => __async(null, null, function* () {
20361
20355
  changeMapProjection();
20356
+ setIsMapReady(true);
20362
20357
  }));
20363
20358
  return () => {
20364
- map2.remove();
20359
+ map.remove();
20365
20360
  mapRef.current = null;
20366
20361
  };
20367
20362
  }, []);
20368
20363
  (0, import_react66.useEffect)(() => {
20369
- if (!map) return;
20364
+ const map = mapRef.current;
20365
+ if (!map || !isMapReady) return;
20370
20366
  const init = () => {
20371
20367
  loadBaseLayers();
20372
20368
  };
@@ -20385,28 +20381,36 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20385
20381
  init();
20386
20382
  map.on("zoomend", zoom);
20387
20383
  });
20388
- }, [map]);
20384
+ return () => {
20385
+ map.off("zoomend", zoom);
20386
+ };
20387
+ }, [mapControls, baseLayers, isMapReady]);
20389
20388
  (0, import_react66.useEffect)(() => {
20390
- var _a, _b, _c;
20391
- if (!map || !sourceData) return;
20389
+ var _a;
20390
+ const map = mapRef.current;
20391
+ if (!map || !(sourceData == null ? void 0 : sourceData.length)) return;
20392
20392
  if (map.isStyleLoaded()) {
20393
20393
  loadSourceData();
20394
- return;
20394
+ } else {
20395
+ const handler = () => loadSourceData();
20396
+ map.once("load", handler);
20397
+ return () => {
20398
+ map.off("load", handler);
20399
+ };
20395
20400
  }
20396
- const handler = () => loadSourceData();
20397
- map.once("load", handler);
20398
20401
  if (show_popup && customLayers) {
20399
- map.on("mouseenter", ((_a = customLayers[0]) == null ? void 0 : _a.layerName) + "-pins", () => {
20402
+ const layerId = ((_a = customLayers[0]) == null ? void 0 : _a.layerName) + "-pins";
20403
+ const onMouseEnter = () => {
20400
20404
  map.getCanvas().style.cursor = "pointer";
20401
- });
20402
- map.on("mouseleave", ((_b = customLayers[0]) == null ? void 0 : _b.layerName) + "-pins", () => {
20405
+ };
20406
+ const onMouseLeave = () => {
20403
20407
  map.getCanvas().style.cursor = "";
20404
- });
20405
- map.on("click", ((_c = customLayers[0]) == null ? void 0 : _c.layerName) + "-pins", (e) => {
20406
- var _a2, _b2, _c2, _d;
20408
+ };
20409
+ const onLayerClick = (e) => {
20410
+ var _a2, _b, _c, _d;
20407
20411
  if (e.features) {
20408
20412
  const properties = (_a2 = e.features[0]) == null ? void 0 : _a2.properties;
20409
- const coordinates = (_c2 = (_b2 = e.features[0]) == null ? void 0 : _b2.geometry) == null ? void 0 : _c2.coordinates.slice();
20413
+ const coordinates = (_c = (_b = e.features[0]) == null ? void 0 : _b.geometry) == null ? void 0 : _c.coordinates.slice();
20410
20414
  const description = `
20411
20415
  <a class="popup-link text-primary text-xs hover:cursor-pointer">${(_d = e.features[0]) == null ? void 0 : _d.properties.description}</a>
20412
20416
  `;
@@ -20421,20 +20425,25 @@ var MapLibre = (0, import_react67.forwardRef)(({ baseLayers, customLayers, mapCo
20421
20425
  }
20422
20426
  }, 0);
20423
20427
  }
20424
- });
20428
+ };
20429
+ map.on("mouseenter", layerId, onMouseEnter);
20430
+ map.on("mouseleave", layerId, onMouseLeave);
20431
+ map.on("click", layerId, onLayerClick);
20432
+ return () => {
20433
+ map.off("mouseenter", layerId, onMouseEnter);
20434
+ map.off("mouseleave", layerId, onMouseLeave);
20435
+ map.off("click", layerId, onLayerClick);
20436
+ };
20425
20437
  }
20426
- return () => {
20427
- map.off("load", handler);
20428
- };
20429
- }, [sourceData]);
20438
+ }, [sourceData, customLayers, show_popup, popup, isMapReady]);
20430
20439
  (0, import_react66.useEffect)(() => {
20431
- if (!map || !sourceData) return;
20440
+ const map = mapRef.current;
20441
+ if (!map || !(sourceData == null ? void 0 : sourceData.length)) return;
20432
20442
  sourceData.forEach((source) => {
20433
20443
  const source_layer = map.getSource(source.name);
20434
20444
  if (source_layer) source_layer.setData(source.data);
20435
20445
  });
20436
20446
  }, [sourceData]);
20437
- if (!sourceData) return;
20438
20447
  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative", style: { width: "100%", height: "100%" }, children: [
20439
20448
  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ref: mapContainer, className: "w-full h-full" }),
20440
20449
  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
package/dist/index.mjs CHANGED
@@ -8748,42 +8748,42 @@ import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
8748
8748
  var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData, show_popup, popup }, ref) => {
8749
8749
  const mapContainer = ref;
8750
8750
  const mapRef = useRef12(null);
8751
- const map = mapRef.current;
8751
+ const [isMapReady, setIsMapReady] = useState17(false);
8752
8752
  const changeMapProjection = () => {
8753
8753
  var _a;
8754
8754
  if (!mapRef.current) return;
8755
- const map2 = mapRef.current;
8756
- const currentProjection = (_a = map2.getProjection()) == null ? void 0 : _a.type;
8755
+ const map = mapRef.current;
8756
+ const currentProjection = (_a = map.getProjection()) == null ? void 0 : _a.type;
8757
8757
  const newProjection = currentProjection === "mercator" ? "globe" : "mercator";
8758
- map2.setProjection({
8758
+ map.setProjection({
8759
8759
  type: newProjection
8760
8760
  });
8761
8761
  };
8762
8762
  const zoomIn = () => {
8763
8763
  if (!mapRef.current) return;
8764
- const map2 = mapRef.current;
8765
- map2.zoomIn();
8766
- return map2.getBounds();
8764
+ const map = mapRef.current;
8765
+ map.zoomIn();
8766
+ return map.getBounds();
8767
8767
  };
8768
8768
  const zoomOut = () => {
8769
8769
  if (!mapRef.current) return;
8770
- const map2 = mapRef.current;
8771
- map2.zoomOut();
8772
- return map2.getBounds();
8770
+ const map = mapRef.current;
8771
+ map.zoomOut();
8772
+ return map.getBounds();
8773
8773
  };
8774
8774
  function getLayersByPattern(pattern) {
8775
8775
  if (!mapRef.current) return;
8776
- const map2 = mapRef.current;
8777
- return map2 == null ? void 0 : map2.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
8776
+ const map = mapRef.current;
8777
+ return map == null ? void 0 : map.getStyle().layers.filter((layer) => pattern.test(layer.id)).map((layer) => layer.id);
8778
8778
  }
8779
8779
  const handleToggle = (layerId) => {
8780
8780
  if (!mapRef.current) return;
8781
- const map2 = mapRef.current;
8781
+ const map = mapRef.current;
8782
8782
  const layers = getLayersByPattern(new RegExp(layerId));
8783
8783
  layers == null ? void 0 : layers.forEach((id) => {
8784
- const visibility = map2 == null ? void 0 : map2.getLayoutProperty(id, "visibility");
8784
+ const visibility = map == null ? void 0 : map.getLayoutProperty(id, "visibility");
8785
8785
  const newVisibility = visibility === "none" ? "visible" : "none";
8786
- map2 == null ? void 0 : map2.setLayoutProperty(id, "visibility", newVisibility);
8786
+ map == null ? void 0 : map.setLayoutProperty(id, "visibility", newVisibility);
8787
8787
  });
8788
8788
  };
8789
8789
  const buildControls = (controls) => {
@@ -8918,64 +8918,70 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
8918
8918
  return img;
8919
8919
  });
8920
8920
  const updatePinImage = (source) => __async(null, null, function* () {
8921
+ const map = mapRef.current;
8922
+ if (!map) return;
8921
8923
  const img = yield loadSvgImage(source.style.pin_color);
8922
8924
  const imgName = `${source.name}-pin`;
8923
- if (map == null ? void 0 : map.hasImage(imgName)) map == null ? void 0 : map.removeImage(imgName);
8924
- map == null ? void 0 : map.addImage(imgName, img);
8925
+ if (map.hasImage(imgName)) map.removeImage(imgName);
8926
+ map.addImage(imgName, img);
8925
8927
  });
8926
8928
  const updateClusterColors = (source) => {
8929
+ const map = mapRef.current;
8930
+ if (!map) return;
8927
8931
  const layerId = `${source.name}-cluster-circles`;
8928
- if (!(map == null ? void 0 : map.getLayer(layerId))) return;
8929
- const current = map == null ? void 0 : map.getPaintProperty(layerId, "circle-color");
8932
+ if (!map.getLayer(layerId)) return;
8933
+ const current = map.getPaintProperty(layerId, "circle-color");
8930
8934
  if (current !== source.style.cluster_color) {
8931
- map == null ? void 0 : map.setPaintProperty(layerId, "circle-color", source.style.cluster_color);
8932
- map == null ? void 0 : map.setPaintProperty(layerId, "circle-stroke-color", source.style.cluster_stroke_color);
8935
+ map.setPaintProperty(layerId, "circle-color", source.style.cluster_color);
8936
+ map.setPaintProperty(layerId, "circle-stroke-color", source.style.cluster_stroke_color);
8933
8937
  }
8934
8938
  };
8935
8939
  const loadBaseLayers = () => {
8936
- if (baseLayers && (baseLayers == null ? void 0 : baseLayers.length) > 0) {
8937
- const base_layers = buildBaseLayers(baseLayers);
8938
- base_layers == null ? void 0 : base_layers.forEach((layer) => {
8939
- if (!(map == null ? void 0 : map.getLayer(layer.name))) {
8940
- if (!(map == null ? void 0 : map.getSource(layer == null ? void 0 : layer.name))) {
8941
- if ((layer == null ? void 0 : layer.layer_type) == "satellite") {
8942
- map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
8943
- type: layer == null ? void 0 : layer.type,
8944
- tiles: [layer == null ? void 0 : layer.url],
8945
- tileSize: layer == null ? void 0 : layer.tileSize
8946
- });
8947
- map == null ? void 0 : map.addLayer({ id: layer == null ? void 0 : layer.name, type: layer == null ? void 0 : layer.type, source: layer == null ? void 0 : layer.name });
8948
- } else
8949
- map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
8950
- type: layer == null ? void 0 : layer.type,
8951
- url: layer == null ? void 0 : layer.url,
8952
- tileSize: layer == null ? void 0 : layer.tileSize
8953
- });
8954
- if ((layer == null ? void 0 : layer.layer_type) == "terrainSource")
8955
- map == null ? void 0 : map.setTerrain({
8956
- source: "terrainSource",
8957
- exaggeration: 1
8958
- });
8959
- if ((layer == null ? void 0 : layer.layer_type) == "hillshade")
8960
- map == null ? void 0 : map.addLayer({
8961
- id: layer == null ? void 0 : layer.name,
8962
- type: layer == null ? void 0 : layer.layer_type,
8963
- source: layer == null ? void 0 : layer.name,
8964
- paint: { "hillshade-shadow-color": "#473B24" },
8965
- layout: { visibility: "visible" }
8966
- });
8967
- }
8940
+ const map = mapRef.current;
8941
+ if (!map || !baseLayers || baseLayers.length === 0) return;
8942
+ const base_layers = buildBaseLayers(baseLayers);
8943
+ base_layers == null ? void 0 : base_layers.forEach((layer) => {
8944
+ if (!map.getLayer(layer.name)) {
8945
+ if (!map.getSource(layer == null ? void 0 : layer.name)) {
8946
+ if ((layer == null ? void 0 : layer.layer_type) == "satellite") {
8947
+ map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
8948
+ type: layer == null ? void 0 : layer.type,
8949
+ tiles: [layer == null ? void 0 : layer.url],
8950
+ tileSize: layer == null ? void 0 : layer.tileSize
8951
+ });
8952
+ map == null ? void 0 : map.addLayer({ id: layer == null ? void 0 : layer.name, type: layer == null ? void 0 : layer.type, source: layer == null ? void 0 : layer.name });
8953
+ } else
8954
+ map == null ? void 0 : map.addSource(layer == null ? void 0 : layer.name, {
8955
+ type: layer == null ? void 0 : layer.type,
8956
+ url: layer == null ? void 0 : layer.url,
8957
+ tileSize: layer == null ? void 0 : layer.tileSize
8958
+ });
8959
+ if ((layer == null ? void 0 : layer.layer_type) == "terrainSource")
8960
+ map == null ? void 0 : map.setTerrain({
8961
+ source: "terrainSource",
8962
+ exaggeration: 1
8963
+ });
8964
+ if ((layer == null ? void 0 : layer.layer_type) == "hillshade")
8965
+ map == null ? void 0 : map.addLayer({
8966
+ id: layer == null ? void 0 : layer.name,
8967
+ type: layer == null ? void 0 : layer.layer_type,
8968
+ source: layer == null ? void 0 : layer.name,
8969
+ paint: { "hillshade-shadow-color": "#473B24" },
8970
+ layout: { visibility: "visible" }
8971
+ });
8968
8972
  }
8969
- });
8970
- }
8973
+ }
8974
+ });
8971
8975
  };
8972
- const loadSourceData = () => {
8973
- if ((sourceData == null ? void 0 : sourceData.length) == 0) return;
8974
- sourceData == null ? void 0 : sourceData.forEach((source) => __async(null, null, function* () {
8975
- const existing_data = map == null ? void 0 : map.getSource(source.name);
8976
+ const loadSourceData = () => __async(null, null, function* () {
8977
+ var _a, _b, _c, _d;
8978
+ const map = mapRef.current;
8979
+ if (!map || (sourceData == null ? void 0 : sourceData.length) == 0) return;
8980
+ for (const source of sourceData) {
8981
+ const existing_data = map.getSource(source.name);
8976
8982
  if (!existing_data) {
8977
8983
  if (source.is_cluster) {
8978
- map == null ? void 0 : map.addSource(source.name, {
8984
+ map.addSource(source.name, {
8979
8985
  type: source.type,
8980
8986
  data: source.data,
8981
8987
  cluster: true,
@@ -8983,12 +8989,9 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
8983
8989
  clusterRadius: 50
8984
8990
  });
8985
8991
  } else
8986
- map == null ? void 0 : map.addSource(source.name, {
8992
+ map.addSource(source.name, {
8987
8993
  type: source.type,
8988
8994
  data: source.data
8989
- // cluster: true,
8990
- // clusterMaxZoom: 10,
8991
- // clusterRadius: 50,
8992
8995
  });
8993
8996
  if (source.show_cluster_count) {
8994
8997
  map == null ? void 0 : map.addLayer({
@@ -8997,11 +9000,11 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
8997
9000
  source: source.name,
8998
9001
  filter: ["has", "point_count"],
8999
9002
  paint: {
9000
- "circle-color": source.style.cluster_color,
9003
+ "circle-color": (_a = source.style) == null ? void 0 : _a.cluster_color,
9001
9004
  "circle-opacity": 1,
9002
9005
  "circle-radius": 20,
9003
9006
  "circle-stroke-width": 4,
9004
- "circle-stroke-color": source.style.cluster_stroke_color
9007
+ "circle-stroke-color": (_b = source.style) == null ? void 0 : _b.cluster_stroke_color
9005
9008
  }
9006
9009
  });
9007
9010
  map == null ? void 0 : map.addLayer({
@@ -9039,26 +9042,19 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
9039
9042
  id: `${source.name}-cluster-circles`,
9040
9043
  type: "circle",
9041
9044
  source: source.name,
9042
- //filter: [">", ["get", "count"], 1],
9043
9045
  filter: ["!=", ["get", "count"], null],
9044
9046
  paint: {
9045
- "circle-color": source.style.cluster_color,
9047
+ "circle-color": (_c = source.style) == null ? void 0 : _c.cluster_color,
9046
9048
  "circle-opacity": 1,
9047
9049
  "circle-radius": 20,
9048
9050
  "circle-stroke-width": 4,
9049
- "circle-stroke-color": source.style.cluster_stroke_color
9050
- // "circle-radius": [
9051
- // "step",
9052
- // ["get", "count"],
9053
- // 20, 100, 30, 750, 40
9054
- // ]
9051
+ "circle-stroke-color": (_d = source.style) == null ? void 0 : _d.cluster_stroke_color
9055
9052
  }
9056
9053
  });
9057
9054
  map == null ? void 0 : map.addLayer({
9058
9055
  id: `${source.name}-cluster-count`,
9059
9056
  type: "symbol",
9060
9057
  source: source.name,
9061
- //filter: [">", ["get", "count"], 1],
9062
9058
  filter: ["!=", ["get", "count"], null],
9063
9059
  layout: {
9064
9060
  "text-field": "{count}",
@@ -9077,7 +9073,6 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
9077
9073
  id: source.name + "-pins",
9078
9074
  type: "symbol",
9079
9075
  source: source.name,
9080
- // filter: ["!", ["has", "count"]],
9081
9076
  filter: ["==", ["get", "count"], null],
9082
9077
  layout: {
9083
9078
  "icon-image": `${source.name}-pin`,
@@ -9092,13 +9087,12 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
9092
9087
  updateClusterColors(source);
9093
9088
  updatePinImage(source);
9094
9089
  }
9095
- }));
9096
- };
9090
+ }
9091
+ });
9097
9092
  useEffect21(() => {
9098
9093
  if (typeof mapContainer === "function") return;
9099
9094
  if (!(mapContainer == null ? void 0 : mapContainer.current)) return;
9100
- if (!sourceData) return;
9101
- const map2 = new maplibregl.Map({
9095
+ const map = new maplibregl.Map({
9102
9096
  container: mapContainer == null ? void 0 : mapContainer.current,
9103
9097
  style: {
9104
9098
  version: 8,
@@ -9126,20 +9120,22 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
9126
9120
  renderWorldCopies: false,
9127
9121
  canvasContextAttributes: { antialias: true }
9128
9122
  });
9129
- mapRef.current = map2;
9130
- map2.scrollZoom.disable();
9131
- mapRef.current.getContainer().addEventListener("mouseenter", () => map2.scrollZoom.enable());
9132
- mapRef.current.getContainer().addEventListener("mouseleave", () => map2.scrollZoom.disable());
9133
- map2.on("load", () => __async(null, null, function* () {
9123
+ mapRef.current = map;
9124
+ map.scrollZoom.disable();
9125
+ mapRef.current.getContainer().addEventListener("mouseenter", () => map.scrollZoom.enable());
9126
+ mapRef.current.getContainer().addEventListener("mouseleave", () => map.scrollZoom.disable());
9127
+ map.on("load", () => __async(null, null, function* () {
9134
9128
  changeMapProjection();
9129
+ setIsMapReady(true);
9135
9130
  }));
9136
9131
  return () => {
9137
- map2.remove();
9132
+ map.remove();
9138
9133
  mapRef.current = null;
9139
9134
  };
9140
9135
  }, []);
9141
9136
  useEffect21(() => {
9142
- if (!map) return;
9137
+ const map = mapRef.current;
9138
+ if (!map || !isMapReady) return;
9143
9139
  const init = () => {
9144
9140
  loadBaseLayers();
9145
9141
  };
@@ -9158,28 +9154,36 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
9158
9154
  init();
9159
9155
  map.on("zoomend", zoom);
9160
9156
  });
9161
- }, [map]);
9157
+ return () => {
9158
+ map.off("zoomend", zoom);
9159
+ };
9160
+ }, [mapControls, baseLayers, isMapReady]);
9162
9161
  useEffect21(() => {
9163
- var _a, _b, _c;
9164
- if (!map || !sourceData) return;
9162
+ var _a;
9163
+ const map = mapRef.current;
9164
+ if (!map || !(sourceData == null ? void 0 : sourceData.length)) return;
9165
9165
  if (map.isStyleLoaded()) {
9166
9166
  loadSourceData();
9167
- return;
9167
+ } else {
9168
+ const handler = () => loadSourceData();
9169
+ map.once("load", handler);
9170
+ return () => {
9171
+ map.off("load", handler);
9172
+ };
9168
9173
  }
9169
- const handler = () => loadSourceData();
9170
- map.once("load", handler);
9171
9174
  if (show_popup && customLayers) {
9172
- map.on("mouseenter", ((_a = customLayers[0]) == null ? void 0 : _a.layerName) + "-pins", () => {
9175
+ const layerId = ((_a = customLayers[0]) == null ? void 0 : _a.layerName) + "-pins";
9176
+ const onMouseEnter = () => {
9173
9177
  map.getCanvas().style.cursor = "pointer";
9174
- });
9175
- map.on("mouseleave", ((_b = customLayers[0]) == null ? void 0 : _b.layerName) + "-pins", () => {
9178
+ };
9179
+ const onMouseLeave = () => {
9176
9180
  map.getCanvas().style.cursor = "";
9177
- });
9178
- map.on("click", ((_c = customLayers[0]) == null ? void 0 : _c.layerName) + "-pins", (e) => {
9179
- var _a2, _b2, _c2, _d;
9181
+ };
9182
+ const onLayerClick = (e) => {
9183
+ var _a2, _b, _c, _d;
9180
9184
  if (e.features) {
9181
9185
  const properties = (_a2 = e.features[0]) == null ? void 0 : _a2.properties;
9182
- const coordinates = (_c2 = (_b2 = e.features[0]) == null ? void 0 : _b2.geometry) == null ? void 0 : _c2.coordinates.slice();
9186
+ const coordinates = (_c = (_b = e.features[0]) == null ? void 0 : _b.geometry) == null ? void 0 : _c.coordinates.slice();
9183
9187
  const description = `
9184
9188
  <a class="popup-link text-primary text-xs hover:cursor-pointer">${(_d = e.features[0]) == null ? void 0 : _d.properties.description}</a>
9185
9189
  `;
@@ -9194,20 +9198,25 @@ var MapLibre = forwardRef5(({ baseLayers, customLayers, mapControls, sourceData,
9194
9198
  }
9195
9199
  }, 0);
9196
9200
  }
9197
- });
9201
+ };
9202
+ map.on("mouseenter", layerId, onMouseEnter);
9203
+ map.on("mouseleave", layerId, onMouseLeave);
9204
+ map.on("click", layerId, onLayerClick);
9205
+ return () => {
9206
+ map.off("mouseenter", layerId, onMouseEnter);
9207
+ map.off("mouseleave", layerId, onMouseLeave);
9208
+ map.off("click", layerId, onLayerClick);
9209
+ };
9198
9210
  }
9199
- return () => {
9200
- map.off("load", handler);
9201
- };
9202
- }, [sourceData]);
9211
+ }, [sourceData, customLayers, show_popup, popup, isMapReady]);
9203
9212
  useEffect21(() => {
9204
- if (!map || !sourceData) return;
9213
+ const map = mapRef.current;
9214
+ if (!map || !(sourceData == null ? void 0 : sourceData.length)) return;
9205
9215
  sourceData.forEach((source) => {
9206
9216
  const source_layer = map.getSource(source.name);
9207
9217
  if (source_layer) source_layer.setData(source.data);
9208
9218
  });
9209
9219
  }, [sourceData]);
9210
- if (!sourceData) return;
9211
9220
  return /* @__PURE__ */ jsxs35("div", { className: "relative", style: { width: "100%", height: "100%" }, children: [
9212
9221
  /* @__PURE__ */ jsx48("div", { ref: mapContainer, className: "w-full h-full" }),
9213
9222
  /* @__PURE__ */ jsx48(MapControlToolbar, { controls: mapControl, onToggleControl: (id) => toggleControl(id) })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geowiki/map",
3
- "version": "0.16.9-dev.26",
3
+ "version": "0.16.9-dev.28",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "files": [
@@ -24,11 +24,11 @@
24
24
  "react-hotkeys-hook": "^4.5.0",
25
25
  "react-leaflet": "^4.2.1",
26
26
  "zod": "^3.25.7",
27
- "@geowiki/cms-proxy": "0.16.9-dev.26",
28
- "@geowiki/core": "0.16.9-dev.26",
29
- "@geowiki/design-system": "0.16.9-dev.26",
30
- "@geowiki/evoland-api-proxy": "0.16.9-dev.26",
31
- "@geowiki/ui": "0.16.9-dev.26"
27
+ "@geowiki/cms-proxy": "0.16.9-dev.28",
28
+ "@geowiki/core": "0.16.9-dev.28",
29
+ "@geowiki/design-system": "0.16.9-dev.28",
30
+ "@geowiki/evoland-api-proxy": "0.16.9-dev.28",
31
+ "@geowiki/ui": "0.16.9-dev.28"
32
32
  },
33
33
  "dependencies": {
34
34
  "@dnd-kit/core": "^6.3.1",
@@ -61,7 +61,7 @@
61
61
  "react-konva": "^18.2.16",
62
62
  "react-select": "^5.10.2",
63
63
  "use-image": "^1.1.4",
64
- "uuid": "^11.1.1",
64
+ "uuid": "^14.0.0",
65
65
  "zustand": "4.3.9"
66
66
  },
67
67
  "devDependencies": {