You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

67 lines
1.6 KiB

import { Points } from "./Points";
import { Layer, Source } from "react-map-gl";
import { aoLayer, rayonLayer, selectedRegionLayer } from "./layers-config";
import { useFilters } from "../../stores/useFilters";
import { BASE_URL } from "../../api";
import { PVZ } from "./PVZ";
import { OtherPostamates } from "./OtherPostamates";
export const Layers = () => {
const {
filters: { prediction, region },
} = useFilters();
return (
<>
<Source
id="ao"
type="vector"
tiles={[`${BASE_URL}/martin/public.service_ao/{z}/{x}/{y}.pbf`]}
>
<Layer
{...aoLayer}
layout={{
...aoLayer.layout,
}}
/>
</Source>
<Source
id="rayon"
type="vector"
tiles={[`${BASE_URL}/martin/public.service_rayon/{z}/{x}/{y}.pbf`]}
>
<Layer
{...rayonLayer}
layout={{
...rayonLayer.layout,
}}
/>
</Source>
{region && region.geometry && (
<Source id="selected-region" type="geojson" data={region.geometry}>
<Layer
{...selectedRegionLayer}
layout={{
...selectedRegionLayer.layout,
visibility: region ? "visible" : "none",
}}
/>
</Source>
)}
<Source
id="rivals"
type="vector"
tiles={[`${BASE_URL}/martin/public.service_rivals/{z}/{x}/{y}.pbf`]}
>
<PVZ />
<OtherPostamates />
</Source>
<Points prediction={prediction} />
</>
);
};