EditFeatureMap: Add satellite map (#964)

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/LocationEditor/EditFeatureMap.tsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
-import { CircularProgress, Stack, TextField } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { Chip, CircularProgress, Stack, TextField } from '@mui/material';
 
 import styled from '@emotion/styled';
 import { t } from '../../../../../../services/intl';
 import { useCurrentItem } from '../CurrentContext';
 import { useInitEditFeatureMap } from './useInitEditFeatureMap';
 import { LngLat } from 'maplibre-gl';
+import LayersIcon from '@mui/icons-material/Layers';
+import { getMapStyle } from './getMapStyle';
 
 const Container = styled.div`
   width: 100%;
@@ -28,16 +30,34 @@ const Map = styled.div<{ $isVisible: boolean }>`
   height: 100%;
   width: 100%;
 `;
+const MapStyle = styled.div`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+`;
 
-const EditFeatureMap = () => {
+const EditFeatureMap = ({ mapStyle, setMapStyle }) => {
   const [isFirstMapLoad, setIsFirstMapLoad] = useState(true);
-  const { containerRef, isMapLoaded, currentItem, onMarkerChange } =
+  const { containerRef, isMapLoaded, currentItem, onMarkerChange, mapRef } =
     useInitEditFeatureMap(isFirstMapLoad, setIsFirstMapLoad);
 
+  useEffect(() => {
+    const style = getMapStyle(mapStyle);
+    mapRef.current.setStyle(style);
+  }, [mapStyle, mapRef]);
+
   const { shortId } = useCurrentItem();
   const isNode = shortId[0] === 'n';
   if (!isNode) return null;
 
+  const switchMapStyle = () => {
+    if (mapStyle === 'outdoor') {
+      setMapStyle('satellite');
+    } else {
+      setMapStyle('outdoor');
+    }
+  };
+
   return (
     <>
       <Container>
@@ -47,7 +67,17 @@ const EditFeatureMap = () => {
           </LoadingContainer>
         )}
         <Map $isVisible={isMapLoaded} ref={containerRef} />
+        <MapStyle>
+          <Chip
+            component="button"
+            label={mapStyle}
+            icon={<LayersIcon />}
+            onClick={switchMapStyle}
+            color="secondary"
+          />
+        </MapStyle>
       </Container>
+
       <Stack direction="row" mt={2} gap={1}>
         <TextField
           label={t('editdialog.location_latitude')}

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/LocationEditor/LocationEditor.tsx

@@ -54,6 +54,7 @@ export const LocationEditor = () => {
   const { shortId } = useCurrentItem();
   const osmId = getApiId(shortId);
   const isNodeWithoutWay = useNodeWithoutWayCheck(osmId);
+  const [mapStyle, setMapStyle] = useState<'outdoor' | 'satellite'>('outdoor');
 
   if (osmId.type === 'relation') {
     return null;
@@ -62,7 +63,11 @@ export const LocationEditor = () => {
   let content = null;
   if (expanded) {
     if (osmId.type === 'node') {
-      content = isNodeWithoutWay ? <EditFeatureMapDynamic /> : <WayWarning />;
+      content = isNodeWithoutWay ? (
+        <EditFeatureMapDynamic mapStyle={mapStyle} setMapStyle={setMapStyle} />
+      ) : (
+        <WayWarning />
+      );
     }
     if (osmId.type === 'way') {
       content = <WayWarning />;

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/LocationEditor/getMapStyle.tsx

@@ -0,0 +1,10 @@
+import { outdoorStyle } from '../../../../../Map/styles/outdoorStyle';
+
+const apiKey = process.env.NEXT_PUBLIC_API_KEY_MAPTILER;
+
+export const getMapStyle = (mapStyle) => {
+  if (mapStyle === 'satellite') {
+    return `https://api.maptiler.com/maps/hybrid/style.json?key=${apiKey}`;
+  }
+  return outdoorStyle;
+};

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/LocationEditor/useInitEditFeatureMap.ts

@@ -85,5 +85,9 @@ export function useInitEditFeatureMap(isFirstMapLoad, setIsFirstMapLoad) {
     setIsFirstMapLoad(true);
   }, [current, setIsFirstMapLoad]);
 
-  return { containerRef, isMapLoaded, currentItem, onMarkerChange };
+  useEffect(() => {
+    setIsFirstMapLoad(true);
+  }, [current, setIsFirstMapLoad]);
+
+  return { containerRef, isMapLoaded, currentItem, onMarkerChange, mapRef };
 }

src/components/FeaturePanel/renderers/WebsiteRenderer.tsx

@@ -9,6 +9,8 @@ const displayForm = (url: string) =>
 export const WebsiteRenderer = ({ v }) => (
   <>
     <Language fontSize="small" />
-    <a href={fixHttp(v)}>{displayForm(v)}</a>
+    <a href={fixHttp(v)} target="_blank">
+      {displayForm(v)}
+    </a>
   </>
 );