diff --git a/website/ambient.d.ts b/website/ambient.d.ts index 27a86c3..d2cf6ea 100644 --- a/website/ambient.d.ts +++ b/website/ambient.d.ts @@ -27,9 +27,10 @@ declare module "@deck.gl/layers" { export const GeoJsonLayer: $FixMe; export const LineLayer: $FixMe; export const PathLayer: $FixMe; + export const ScatterplotLayer: $FixMe; } declare module "@deck.gl/react" { export const DeckGL: $FixMe; export default DeckGL; -} \ No newline at end of file +} diff --git a/website/src/components/Mutations/Minimap.tsx b/website/src/components/Mutations/Minimap.tsx new file mode 100644 index 0000000..e0cf987 --- /dev/null +++ b/website/src/components/Mutations/Minimap.tsx @@ -0,0 +1,53 @@ +import { GeoJsonLayer, ScatterplotLayer } from "@deck.gl/layers"; +import DeckGL from "@deck.gl/react"; +import { useGeoData } from "src/domain/geodata"; + +const Minimap = ({ + viewState, + extentViewState, +}: { + viewState: { longitude: number; latitude: number; zoom: number }; + extentViewState: { longitude: number; latitude: number; zoom: number }; +}) => { + const { data: geoDataMinimap } = useGeoData({ + year: "2022", + format: "topojson", + simplify: 0.02, + shapes: new Set(["country"]), + projection: "wgs84", + color: "default", + dimensions: { width: 800, height: 600 }, + withName: false, + }); + + return ( + + + 10000} + getPosition={(d) => d.coordinates} + getFillColor={[0, 0, 255, 50]} + getLineColor={[0, 0, 0]} + getLineWidth={10} + data={[ + { + coordinates: [extentViewState.longitude, extentViewState.latitude], + }, + ]} + /> + + ); +}; + +export default Minimap; diff --git a/website/src/pages/mutations.tsx b/website/src/pages/mutations.tsx index cdd5987..9c731c3 100644 --- a/website/src/pages/mutations.tsx +++ b/website/src/pages/mutations.tsx @@ -21,10 +21,18 @@ import * as turf from "@turf/turf"; import { FlyToInterpolator } from "@deck.gl/core"; import { parse } from "path"; import { useQuery } from "react-query"; +import { GeoJsonLayer } from "@deck.gl/layers"; +import DeckGL from "@deck.gl/react"; const MutationsMap = dynamic(() => import("../components/Mutations/Map"), { ssr: false, }); +const MutationsMinimap = dynamic( + () => import("../components/Mutations/Minimap"), + { + ssr: false, + } +); const INITIAL_VIEW_STATE = { latitude: 46.8182, @@ -209,7 +217,11 @@ export default function Page() { >
{year1} - +
{year2} - +
+
+ +
); } - -const SAMPLE_HTML = ` - - - - - - - - -`;