95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { Layer, Source } from "react-map-gl/mapbox-legacy";
|
|
import { FeatureCollection } from "geojson";
|
|
|
|
interface Props {
|
|
objectCollection: FeatureCollection;
|
|
measurementCollection?: FeatureCollection;
|
|
showTitle?: boolean;
|
|
setInteractiveLayers: (layers: string[]) => void;
|
|
}
|
|
|
|
export default function GeoMapLayer(props: Props) {
|
|
const { objectCollection, measurementCollection, showTitle, setInteractiveLayers } = props;
|
|
|
|
// useEffect(() => {
|
|
// console.log(objectCollection);
|
|
// console.log(measurementCollection);
|
|
// }, [measurementCollection, objectCollection]);
|
|
|
|
useEffect(() => {
|
|
setInteractiveLayers(["shapefill", "shapeborder", "measurementBorder"]);
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Source type="geojson" data={objectCollection} id={"objects"}>
|
|
<Layer
|
|
id="shapefill"
|
|
type="fill"
|
|
paint={{
|
|
"fill-color": ["get", "fill"], //using react-map-gl's data driven expressions you can get data from the properties of the feature
|
|
"fill-opacity": 0.7
|
|
}}
|
|
/>
|
|
<Layer
|
|
id="shapeborder"
|
|
type="line"
|
|
layout={{
|
|
"line-join": "round",
|
|
"line-cap": "round"
|
|
}}
|
|
paint={{
|
|
"line-color": "white",
|
|
"line-width": ["get", "lineWidth"]
|
|
}}
|
|
/>
|
|
{showTitle && (
|
|
<Layer
|
|
id="shapetitle"
|
|
type="symbol"
|
|
layout={{
|
|
"text-field": ["get", "title"],
|
|
"text-size": 18,
|
|
"text-font": ["Open Sans Bold"],
|
|
"text-anchor": "center"
|
|
}}
|
|
paint={{
|
|
"text-color": "white"
|
|
}}
|
|
/>
|
|
)}
|
|
</Source>
|
|
<Source type="geojson" data={measurementCollection} id={"measurements"}>
|
|
<Layer
|
|
id="measurementBorder"
|
|
type="line"
|
|
layout={{
|
|
"line-join": "round",
|
|
"line-cap": "round"
|
|
}}
|
|
paint={{
|
|
"line-color": "white",
|
|
"line-width": ["get", "lineWidth"]
|
|
}}
|
|
/>
|
|
<Layer
|
|
id="totalDistance"
|
|
type="symbol"
|
|
layout={{
|
|
"text-field": ["get", "totalDist"],
|
|
"text-size": 18,
|
|
"text-font": ["Open Sans Bold"],
|
|
//"symbol-placement": "line-center",
|
|
"text-anchor": "bottom-left",
|
|
"icon-allow-overlap": true,
|
|
"text-offset": [0, -1]
|
|
}}
|
|
paint={{
|
|
"text-color": "white"
|
|
}}
|
|
/>
|
|
</Source>
|
|
</React.Fragment>
|
|
);
|
|
}
|