Function Map

ui/src/components/Map.tsx:40–82

(props: PropsWithChildren<IProps>)

}

function Map(props: PropsWithChildren<IProps>) {
  const [tileserver, setTileserver] = useState<string>("");
  const [attribution, setAttribution] = useState<string>("");

  useEffect(() => {
    const updateMapProperties = () => {
      InternalStore.settings(v => {
        setTileserver(v.getTileserverUrl());
        setAttribution(v.getMapAttribution());
      });
    };

    InternalStore.on("change", updateMapProperties);
    updateMapProperties();

    return () => {
      InternalStore.removeListener("change", updateMapProperties);
    };
  }, [props]);

  const style = {
    height: props.height,
  };

  if (attribution === "" || tileserver === "") {
    return null;
  }

  return (
    <MapContainer
      bounds={props.bounds}
      boundsOptions={props.boundsOptions}
      center={props.center}
      zoom={13}
      scrollWheelZoom={false}
      style={style}
    >
      <TileLayer attribution={attribution} url={tileserver} />
      {props.children}
      <MapControl bounds={props.bounds} boundsOptions={props.boundsOptions} center={props.center} />
    </MapContainer>
  );
}

export type MarkerColor =
  | "red"