diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js index 4f691ac481..8ac147acea 100644 --- a/frontend/src/views/projectLiveMonitoring.js +++ b/frontend/src/views/projectLiveMonitoring.js @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import ReactPlaceholder from 'react-placeholder'; +import Select from 'react-select'; import centroid from '@turf/centroid'; import { UnderpassFeatureList, @@ -16,9 +17,52 @@ import { useFetch } from '../hooks/UseFetch'; import './projectLiveMonitoring.css'; import { MAPBOX_TOKEN } from '../config'; +const availableImageryOptions = [ + { label: 'Bing', value: 'Bing' }, + { label: 'Mapbox Satellite', value: 'Mapbox' }, + { label: 'ESRI World Imagery', value: 'EsriWorldImagery' }, +]; + +const availableImageryValues = availableImageryOptions.map((item) => item.value); + const config = { API_URL: `https://underpass.live:8000`, MAPBOX_TOKEN: MAPBOX_TOKEN, + // set default sources of Tasking Manager + sources: { + osm: { + type: 'raster', + tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'], + tileSize: 256, + attribution: '© OpenStreetMap Contributors', + maxzoom: 19, + }, + Mapbox: { + type: 'raster', + tiles: [ + `https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=${MAPBOX_TOKEN}`, + ], + tileSize: 512, + attribution: '© OpenStreetMap Contributors © Mapbox', + maxzoom: 19, + }, + EsriWorldImagery: { + type: 'raster', + tiles: [ + 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', + ], + tileSize: 256, + attribution: '© OpenStreetMap Contributors © ESRI', + maxzoom: 18, + }, + Bing: { + type: 'raster', + tiles: ['http://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=1'], + tileSize: 256, + attribution: '© OpenStreetMap Contributors', + maxzoom: 18, + }, + }, }; const statusList = { @@ -34,21 +78,27 @@ const mappingTypesTags = { WATERWAYS: 'waterway', }; +const mappingTypesFeatureTypes = { + ROADS: 'line', + BUILDINGS: 'polygon', + WATERWAYS: 'line', +}; + export function ProjectLiveMonitoring() { const { id } = useParams(); const [coords, setCoords] = useState([0, 0]); const [activeFeature, setActiveFeature] = useState(null); const [tags, setTags] = useState('building'); - const [hashtag, setHashtag] = useState('hotosm-project-' + id); + const [featureType, setFeatureType] = useState('polygon'); const [mapSource, setMapSource] = useState('osm'); + const [imageryOptions, setImageryOptions] = useState(availableImageryOptions); + const [mapConfig, setMapConfig] = useState(config); const [realtimeList, setRealtimeList] = useState(false); const [realtimeMap, setRealtimeMap] = useState(false); const [status, setStatus] = useState(statusList.UNSQUARED); // eslint-disable-next-line const [area, setArea] = useState(null); const tagsInputRef = useRef(''); - const hashtagInputRef = useRef(''); - const styleSelectRef = useRef(); useSetTitleTag(`Project #${id} Live Monitoring`); const [error, loading, data] = useFetch(`projects/${id}/`, id); @@ -57,7 +107,33 @@ export function ProjectLiveMonitoring() { const [project, setProject] = useState(null); useEffect(() => { + if (!Object.keys(data).length) return; setProject(data); + // add custom to config sources if the project has custom imagery + const hasCustomImagery = data.imagery.includes('http'); + if (hasCustomImagery) { + setMapConfig((prev) => ({ + ...prev, + sources: { + ...prev.sources, + custom: { + type: 'raster', + tiles: [data.imagery], + tileSize: 256, + attribution: 'custom', + maxzoom: 19, + }, + }, + })); + setImageryOptions((prev) => [...prev, { label: 'Custom', value: 'custom' }]); + } + // set mapSource after data fetch + const mapSourceValue = hasCustomImagery + ? 'custom' + : availableImageryValues.includes(data.imagery) + ? data.imagery + : 'Bing'; + setMapSource(mapSourceValue); }, [data]); useEffect(() => { @@ -85,6 +161,7 @@ export function ProjectLiveMonitoring() { ].join(','), ); setTags(mappingTypesTags[project.mappingTypes] || 'building'); + setFeatureType(mappingTypesFeatureTypes[project.mappingTypes] || 'polygon'); } }, [project]); @@ -113,12 +190,11 @@ export function ProjectLiveMonitoring() { const handleFilterClick = (e) => { e.preventDefault(); setTags(tagsInputRef.current.value); - setHashtag(hashtagInputRef.current.value); return false; }; - const handleMapSourceSelect = (e) => { - setMapSource(e.target.options[e.target.selectedIndex].value); + const handleMapSourceSelect = (selectedItem) => { + setMapSource(selectedItem.value); }; const handleMapMove = ({ bbox }) => { @@ -151,14 +227,6 @@ export function ProjectLiveMonitoring() { defaultValue="building" />   - -