Activer le fond panoramax dans les fonds de carte

Author: laem

app/Container.tsx

@@ -229,6 +229,7 @@ export default function Container({
 							panoramaxImages,
 							resetZoneImages,
 							zoom,
+							setZoom,
 							searchParams,
 							style,
 							styleChooser,

app/Content.tsx

@@ -44,6 +44,7 @@ export default function Content({
 	state,
 	setState,
 	zoom,
+	setZoom,
 	sideSheet, // This gives us the indication that we're on the desktop version, where the Content is on the left, always visible, as opposed to the mobile version where a pull-up modal is used
 	searchParams,
 	snap,
@@ -257,7 +258,9 @@ export default function Content({
 			/>
 
 			{styleChooser ? (
-				<StyleChooser {...{ setStyleChooser, style, setSnap }} />
+				<StyleChooser
+					{...{ setStyleChooser, style, setSnap, searchParams, zoom, setZoom }}
+				/>
 			) : (
 				showContent && (
 					<ContentSection>

app/Map.tsx

@@ -216,6 +216,11 @@ export default function Map({
 
 	useTerrainControl(map, style)
 
+	useEffect(() => {
+		if (!map) return
+		if (Math.round(map.getZoom()) === zoom) return
+		map.flyTo({ zoom })
+	}, [zoom, map])
 	useEffect(() => {
 		if (!map) return
 		map.on('zoom', () => {
@@ -373,7 +378,10 @@ export default function Map({
 	}, [lesGaresProches, map, zoom, clickGare, clickedGare?.uic])
 
 	useDrawPanoramaxPosition(map, panoramaxPosition)
-	useAddPanoramaxLayer(map, searchParams.panoramax != null)
+	useAddPanoramaxLayer(
+		map,
+		searchParams.panoramax != null || searchParams.rue === 'oui'
+	)
 
 	return (
 		<>

app/styles/StyleChooser.tsx

@@ -1,20 +1,31 @@
 import css from '@/components/css/convertToJs'
 import useSetSearchParams from '@/components/useSetSearchParams'
+import informationIcon from '@/public/information.svg'
+import panoramaxIcon from '@/public/panoramax-simple.svg'
+import Image from 'next/image'
 import Link from 'next/link'
+import { useLocalStorage } from 'usehooks-ts'
 import { ModalCloseButton } from '../UI'
 import { styles } from './styles'
-import { useLocalStorage } from 'usehooks-ts'
-import Image from 'next/image'
-import informationIcon from '@/public/information.svg'
 
 const styleList = Object.entries(styles)
-export default function StyleChooser({ style, setStyleChooser, setSnap }) {
+export default function StyleChooser({
+	style,
+	setStyleChooser,
+	setSnap,
+	searchParams,
+	zoom,
+	setZoom,
+}) {
 	const setSearchParams = useSetSearchParams()
 	return (
 		<section
 			css={`
-				h2 {
+				h1 {
+					font-size: 160%;
+					font-weight: 300;
 					margin-top: 0;
+					margin-left: 0.4rem;
 				}
 				position: relative;
 			`}
@@ -26,7 +37,48 @@ export default function StyleChooser({ style, setStyleChooser, setSnap }) {
 					setSearchParams({ 'choix du style': undefined })
 				}}
 			/>
-			<h2>Choisir le fond de carte</h2>
+			<h1>Fond de carte</h1>
+			<section
+				css={`
+					padding: 0 1rem;
+					label {
+						display: flex;
+						align-items: center;
+						input {
+							margin-right: 0.4rem;
+						}
+						cursor: pointer;
+						img {
+							width: 1.3rem;
+							margin-bottom: 0.15rem;
+							height: auto;
+							margin-right: 0.2rem;
+							vertical-align: middle;
+						}
+					}
+				`}
+			>
+				<label title="Afficher sur la carte les photos de rue Panoramax disponibles">
+					<input
+						type="checkbox"
+						checked={
+							searchParams.panoramax != null || searchParams.rue === 'oui'
+						}
+						onChange={() => {
+							if (searchParams.rue === 'oui')
+								setSearchParams({ rue: undefined })
+							else {
+								if (zoom < 7) setZoom(7)
+								setSearchParams({ rue: 'oui' })
+							}
+						}}
+					/>
+					<span>
+						<Image src={panoramaxIcon} alt="Logo du projet Panoramax" />
+						Photos de rue
+					</span>
+				</label>
+			</section>
 			<Styles
 				styleList={styleList.filter(([, el]) => !el.secondary)}
 				setSearchParams={setSearchParams}