geostyler/dist/Component/PreviewMap/PreviewMap.js

Framework for styling geodata

import { jsx as L } from "react/jsx-runtime";
import { useRef as w, useState as O, useCallback as E, useEffect as i } from "react";
import N from "ol/Map";
import V from "ol/layer/Vector";
import j from "ol/source/Vector";
import D from "ol/format/GeoJSON";
import { get as v } from "ol/proj";
import P from "ol/Feature";
import { register as R } from "ol/proj/proj4.js";
import F from "proj4";
import { isEmpty as k } from "ol/extent";
import { OlStyleParser as z } from "geostyler-openlayers-parser";
import M from "../../Util/GeometryUtil.js";
/* empty css               */
import { useGeoStylerData as T, useGeoStylerLocale as b } from "../../context/GeoStylerContext/GeoStylerContext.js";
import { Alert as A } from "antd";
import _ from "lodash-es/isString";
const ae = ({
  dataProjection: c = "EPSG:4326",
  mapHeight: G = 267,
  style: m,
  map: p,
  onMapDidMount: y
}) => {
  const l = w(void 0), o = T(), [S, f] = O(), s = b("PreviewMap"), n = w(new V({
    source: new j()
  })), a = w(
    p || new N({
      controls: [],
      layers: [
        n.current
      ]
    })
  ), g = () => {
    const e = a.current, t = n.current.getSource().getExtent();
    t && !k(t) && e.getView().fit(t, {
      padding: [50, 50, 50, 50],
      maxZoom: 16
    });
  }, x = () => {
    const e = a.current, r = n.current;
    e.getAllLayers().some((t) => t === r) || e.addLayer(r);
  }, $ = async (e) => {
    if (!e)
      return;
    const r = e.split(":").pop(), u = await (await fetch(`https://spatialreference.org/ref/epsg/${r}/ogcwkt`)).text();
    if (u)
      return F.defs(e, u), R(F), v(e);
  }, h = E(async () => {
    const e = a.current, r = n.current;
    if (r && (o != null && o.exampleFeatures) && e) {
      r.getSource().clear();
      let t = v(c);
      if (f(void 0), !t && _(c))
        try {
          t = await $(c);
        } catch {
          f(`${s.couldNotGetDataProjection}: ${c}`);
        }
      t || f(`${s.couldNotGetDataProjection}: ${c}`);
      const d = new D({
        dataProjection: t,
        featureProjection: e.getView().getProjection()
      }).readFeatures(o.exampleFeatures);
      r.getSource().addFeatures(d), g();
    }
  }, [o, c, s]);
  return i(() => {
    h();
  }, [h]), i(() => {
    const e = n.current;
    new z().writeStyle(m).then(({ output: t }) => {
      e.setStyle(t);
    });
  }, [m]), i(() => {
    const e = a.current, r = n.current;
    f(void 0);
    try {
      !o && r && e && m && (M.getSampleGeomFromStyle(m, e.getView().getProjection()).forEach((u) => {
        const d = new P({ geometry: u });
        r.getSource().addFeature(d);
      }), g());
    } catch (t) {
      f(`${s.couldNotCreateSampleGeometries} ${t}`);
    }
  }, [m, o, s]), i(() => {
    p && (a.current = p);
  }, [p]), i(() => {
    const e = a.current;
    l && (e.setTarget(l.current), e.updateSize(), x(), g());
  }, []), i(() => {
    l && y && y(a.current);
  }, [y]), S ? /* @__PURE__ */ L(
    A,
    {
      type: "error",
      message: s.errorTitle,
      description: S
    }
  ) : /* @__PURE__ */ L(
    "div",
    {
      ref: l,
      className: "gs-symbolizer-previewmap map",
      id: `map_${Math.floor((1 + Math.random()) * 65536)}`,
      style: {
        height: G
      }
    }
  );
};
export {
  ae as PreviewMap
};