From c32f4048a39d4218c172389c4b47b1bdbd04a767 Mon Sep 17 00:00:00 2001 From: Hoan Phung Date: Tue, 1 Mar 2022 10:59:37 +0100 Subject: [PATCH] Test vector tiles (#1041) * experiment mapbox vector tiles * make vector tile popup * Release 0.3.7-0 * Release 0.3.7-1 * Release 0.3.7-2 --- package.json | 2 +- src/components/MapPopup.tsx | 56 +++++++ src/components/Mapviewer.tsx | 315 ++++++++++++----------------------- src/home/App.tsx | 10 +- src/images/pump.png | Bin 0 -> 8581 bytes 5 files changed, 164 insertions(+), 219 deletions(-) create mode 100644 src/components/MapPopup.tsx create mode 100644 src/images/pump.png diff --git a/package.json b/package.json index 77fa21d7c..befb0ae90 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lizard-management-client", - "version": "0.3.6", + "version": "0.3.7-2", "private": true, "repository": { "type": "git", diff --git a/src/components/MapPopup.tsx b/src/components/MapPopup.tsx new file mode 100644 index 000000000..40be4e6d3 --- /dev/null +++ b/src/components/MapPopup.tsx @@ -0,0 +1,56 @@ +import React, { Popup } from "react-map-gl"; +import MDSpinner from "react-md-spinner"; +import { useQuery } from "react-query"; + +interface Props { + data: any, + setData: any +} + +export const MapPopup: React.FC = ({ data, setData }) => { + const properties = data.features.map((feature: any) => feature.properties); + const property = properties[0]; + const { object_id } = property; + const { + data: apiData, + isFetched + } = useQuery( + `${object_id}`, + () => fetch(`/api/v4/measuringstations/${object_id}`).then(res => res.json()) + ); + return ( + setData(null)} + anchor="top" + > +

Properties

+ {data.features.map((feature: any, i: number) => { + return ( +
+
+

{feature.source}

+ {Object.keys(feature.properties).map(key => { + return ( +
+ {key}: {feature.properties[key]} +
+ ); + })} + {isFetched && feature.source === 'measuringstation' ? ( + <> +
code: {apiData.code}
+
frequency: {apiData.frequency}
+
region: {apiData.region}
+ + ) : feature.source === 'measuringstation' ? ( + + ) : null} +
+ )})} + + ) +} \ No newline at end of file diff --git a/src/components/Mapviewer.tsx b/src/components/Mapviewer.tsx index 9d42f5080..f8f7571da 100644 --- a/src/components/Mapviewer.tsx +++ b/src/components/Mapviewer.tsx @@ -1,9 +1,16 @@ -import { useState } from "react"; -import ReactMapGL, { Source, Layer } from "react-map-gl"; +import { useRef, useState } from 'react'; +import ReactMapGL, { Source, Layer, MapEvent, MapRef } from 'react-map-gl'; +import { mapBoxAccesToken } from '../mapboxConfig'; +import { MapPopup } from './MapPopup'; +import { useSelector } from 'react-redux'; +import { getSelectedOrganisation } from '../reducers'; import mapboxgl from "mapbox-gl"; -import { mapBoxAccesToken } from "../mapboxConfig"; -import { MapViewerRasterLayerTable } from "./MapViewerRasterLayerTable"; -import { RasterLayerFromAPI } from "../api/rasters"; +import 'mapbox-gl/dist/mapbox-gl.css'; + +// Use pump icon as iconImage for measuring station vector tile +import pumpIcon from '../images/pump.png'; +// const pumpIconImage = new Image(20, 20); +// pumpIconImage.src = pumpIcon; /* eslint-disable @typescript-eslint/no-var-requires */ // eslint-disable-next-line import/no-webpack-loader-syntax @@ -15,47 +22,15 @@ interface MapViewport { zoom: number; } -function MapViewer() { +export default function MapViewer () { + const selectedOrganisation = useSelector(getSelectedOrganisation); const [viewport, setViewport] = useState({ latitude: 52.6892, longitude: 5.9, - zoom: 8, + zoom: 8 }); - const [selectedRasters, setSelectedRasters] = useState([]); - const [showAddRasters, setShowAddRasters] = useState(false); - const [selectedRasterForReOrdering, setSelectedRasterForReOrdering] = useState( - null - ); - - const moveSelectedRasterUp = () => { - const ind = selectedRasters.findIndex((item) => { - return item.uuid === selectedRasterForReOrdering; - }); - const length = selectedRasters.length; - if (ind < length - 1) { - const newArr = arraymove(selectedRasters, ind, ind + 1); - setSelectedRasters(newArr); - } - }; - const moveSelectedRasterDown = () => { - const ind = selectedRasters.findIndex((item) => { - return item.uuid === selectedRasterForReOrdering; - }); - if (ind > 0) { - const newArr = arraymove(selectedRasters, ind, ind - 1); - setSelectedRasters(newArr); - } - }; - - const arraymove = (arrInput: RasterLayerFromAPI[], fromIndex: number, toIndex: number) => { - const arr = arrInput.map((id) => id); - const element = arr[fromIndex]; - arr.splice(fromIndex, 1); - arr.splice(toIndex, 0, element); - return arr; - }; - - const reversedRasters = selectedRasters.map((id) => id).reverse(); + const [popupData, setPopupData] = useState(null); + const mapRef = useRef(null); return (
-
-

Layers

- {reversedRasters.length === 0 ?
No layers added yet
: null} - {!showAddRasters ? ( - - ) : null} - -
-
- {reversedRasters.map((raster) => { - return ( -
- - {raster.name}{" "} - - { - setSelectedRasterForReOrdering(raster.uuid); - }} - type="radio" - value={raster.uuid} - name="select_for_change_order" - > -
- ); - })} -
- -
- {reversedRasters.length > 1 ? ( - <> - - - - ) : null} -
-
- -
- - {showAddRasters ? ( -
- -
- ) : null} - - {showAddRasters ? ( - { - const uniqueRasters = rasters.filter((raster) => { - if ( - selectedRasters.find((selectedRaster) => { - return selectedRaster.uuid === raster.uuid; - }) - ) { - return false; - } else { - return true; - } - }); - setSelectedRasters(selectedRasters.concat(uniqueRasters)); - }} - /> - ) : null} -
setViewport(viewport)} mapboxApiAccessToken={mapBoxAccesToken} mapStyle={"mapbox://styles/nelenschuurmans/ck8sgpk8h25ql1io2ccnueuj6"} - > - {/* these 100 layers are needed for ordering layers with "beforeId" - See answer yurivangeffen here - https://github.com/visgl/react-map-gl/issues/939 - */} - {new Array(100).fill(1).map((name, ind) => { - return ( - + onClick={(event)=>{ + console.log('hoan event', event.features); + setPopupData(event); + }} + onLoad={() => { + const map: mapboxgl.Map = mapRef && mapRef.current && mapRef.current.getMap(); + // console.log('hoan source', map.getSource('measuringstation')) + // console.log('hoan layer', map.getLayer('layer-1')) + // map.addImage('hoanImage', image, { sdf: true }) + map.loadImage( + pumpIcon, + (e, img) => { + if (e || !img) return console.log('Failed to load image: ', e); + map.addImage('pumpIconImage', img, { sdf: true }); + } ); - })} + }} + > + {popupData && popupData.features?.length ? ( + + ) : null} - {selectedRasters.map((raster, ind) => { - return ( - - - - ); - })} + {/* Vector tile layer for measuring stations from Lizard */} + + ', ["get", "object_id"], 1000], + // 'red', + // 'blue' + // ], + "text-color": [ + 'case', + ['>', ["get", "object_id"], 1000], + 'blue', + 'red' + ], + "icon-color": [ + 'case', + ['>', ["get", "object_id"], 1000], + 'blue', + 'red' + ], + // "icon-color": [ + // 'match', + // ["get", "object_name"], + // "ZWOLLE", + // 'red', + // "Dante", + // 'brown', + // 'blue' + // ] + }} + /> +
- ); + ) } - -export default MapViewer; diff --git a/src/home/App.tsx b/src/home/App.tsx index 992fb0864..9f1d2e70c 100644 --- a/src/home/App.tsx +++ b/src/home/App.tsx @@ -90,14 +90,14 @@ const AppComponent = (props: RouteComponentProps) => { (navigationLinkTile) => { if ( selectedOrganisation && - selectedOrganisation.name === "Nelen & Schuurmans" && - (username === "tom.deboer" || + ( username === "tom.deboer" || username === "lex.vandolderen" || username === "remco.gerlich" || username === "hoan.phung" || - username === "joeri.verheijden" || - username === "lirry.pinter" || - username === "tom.deboer") + username === "remie.janssen@nelen-schuurmans.nl" || + username === "gijs.nijholt@nelen-schuurmans.nl" || + username === "carsten.byrman" + ) ) { return true; } diff --git a/src/images/pump.png b/src/images/pump.png new file mode 100644 index 0000000000000000000000000000000000000000..8b35dc632ac69fb4553b13a35d06353a1c8d55e5 GIT binary patch literal 8581 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 literal 0 HcmV?d00001