Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@pe-beta
pe-beta committed Jan 31, 2025
1 parent e4e61fa commit 94c3772
Show file tree
Hide file tree
Showing 8 changed files with 389 additions and 139 deletions.
193 changes: 135 additions & 58 deletions components/map/LayersSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
// Styles
import styles from '@/styles/layerSwitcher.module.css';
import styles from '@/styles/layerSwitcher.module.scss';

// React things
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';

// Store
import { useDispatch, useSelector } from 'react-redux';
import { Actions, AppDispatch, RootState } from '@/stores/store';

// Images
import bckgSat from '@/public/images/map/switch-bckg-sat.jpg';
import bckgPlan from '@/public/images/map/switch-bckg-plan.jpg';

// Components
import ImageNext from 'next/image';

// Types
import {
MapBackgroundLayer,
Expand All @@ -21,6 +28,7 @@ export default function LayersSwitcher() {

// Store
const dispatch: AppDispatch = useDispatch();
const mapLayers = useSelector((state: RootState) => state.map.layers);

const handleChangeBackgroundClick = (
e: React.MouseEvent<HTMLAnchorElement>,
Expand All @@ -46,70 +54,139 @@ export default function LayersSwitcher() {
dispatch(Actions.map.toggleExtraLayer(layer));
};

// Switch background image
const [btnImage, setBtnImage] = useState(bckgSat);

useEffect(() => {
if (mapLayers.background === 'vector') {
setBtnImage(bckgSat);
}

if (mapLayers.background === 'satellite') {
setBtnImage(bckgPlan);
}
}, [mapLayers]);

return (
<>
<div className={styles.btn} onClick={(e) => setOpen(true)}>
Layer switcher
</div>
{open && (
{open ? (
<div className={styles.modal}>
<div>
<a href="#" onClick={(e) => setOpen(false)}>
X
<div className={styles.head}>
<div className={styles.title}>Calques</div>
<a
className={styles.closeLink}
href="#"
onClick={(e) => setOpen(false)}
>
<i className="fr-icon-close-line" />
</a>
</div>
<div className={styles.body}>
<div className={styles.section}>
<h2 className={styles.sectionTitle}>Fonds de carte</h2>
<div className={styles.sectionBody}>
<ul className={styles.choicesList}>
<li>
<a
href="#"
className={
mapLayers.background === 'vector' ? styles.active : ''
}
onClick={(e) => handleChangeBackgroundClick(e, 'vector')}
>
<div className={styles.choiceImageShell}>
<ImageNext
src={bckgPlan}
alt="Plan"
className={styles.choiceImage}
/>
</div>

<div>
<p>Fond</p>
<ul>
<li>
<a
href="#"
onClick={(e) => handleChangeBackgroundClick(e, 'vector')}
>
Plan
</a>
</li>
<li>
<a
href="#"
onClick={(e) => handleChangeBackgroundClick(e, 'satellite')}
>
Satellite
</a>
</li>
</ul>
<p>Bâtiments</p>
<ul>
<li>
<a
href="#"
onClick={(e) => handleChangeBuildingLayer(e, 'point')}
>
Points
</a>
</li>
<li>
<a
href="#"
onClick={(e) => handleChangeBuildingLayer(e, 'polygon')}
>
Polygones
</a>
</li>
</ul>
</div>
<div>
<p>Calques</p>
<ul>
<li>
<a href="#" onClick={(e) => handleExtraLayerClick(e, 'plots')}>
Cadastre
</a>
</li>
</ul>
<span className={styles.choiceLabel}>Plan IGN</span>
</a>
</li>
<li>
<a
href="#"
className={
mapLayers.background === 'satellite'
? styles.active
: ''
}
onClick={(e) =>
handleChangeBackgroundClick(e, 'satellite')
}
>
<div className={styles.choiceImageShell}>
<ImageNext
src={bckgSat}
alt="Satellite"
className={styles.choiceImage}
/>
</div>
<span className={styles.choiceLabel}>Satellite</span>
</a>
</li>
</ul>
</div>
</div>

<div className={styles.section}>
<h2 className={styles.sectionTitle}>Bâtiments RNB</h2>
<div className={styles.sectionBody}>
<ul className={styles.choicesList}>
<li>
<a
href="#"
className={
mapLayers.buildings === 'point' ? styles.active : ''
}
onClick={(e) => handleChangeBuildingLayer(e, 'point')}
>
<span className={styles.choiceLabel}>Points</span>
</a>
</li>
<li>
<a
href="#"
className={
mapLayers.buildings === 'polygon' ? styles.active : ''
}
onClick={(e) => handleChangeBuildingLayer(e, 'polygon')}
>
<span className={styles.choiceLabel}>Polygones</span>
</a>
</li>
</ul>
</div>
</div>

<div className={styles.section}>
<h2 className={styles.sectionTitle}>Extras</h2>
<div className={styles.sectionBody}>
<ul className={styles.choicesList}>
<li>
<a
href="#"
onClick={(e) => handleExtraLayerClick(e, 'plots')}
>
Cadastre
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
) : (
<div className={styles.btn} onClick={(e) => setOpen(true)}>
<span className={styles.btnLabel}>Calques</span>
<ImageNext
src={btnImage}
alt="Switch background"
className={styles.btnImg}
/>
</div>
)}
</>
);
Expand Down
2 changes: 0 additions & 2 deletions components/map/useMapEvents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ export const useMapEvents = (map?: maplibregl.Map) => {
e.point.y,
);

console.log('featureCloseToCursor', featureCloseToCursor);

if (featureCloseToCursor) {
// What did we click on?

Expand Down
32 changes: 25 additions & 7 deletions components/map/useMapLayers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,9 @@ export const LAYER_ADS_CIRCLE = 'adscircle';
export const LAYER_ADS_ICON = 'adsicon';

// Plots
export const PLOTS_LAYER = 'plots';
export const PLOTS_SOURCE = 'plots';
export const LAYER_PLOTS_SHAPE = 'plots_shape';
export const LAYER_PLOTS_TXT = 'plots_txt';
export const SRC_PLOTS = 'plotstiles';

// Icons
import { getADSOperationIcons } from '@/logic/ads';
Expand Down Expand Up @@ -366,10 +367,11 @@ export const useMapLayers = (map?: maplibregl.Map) => {
// Plots

const installPlots = useCallback((map: maplibregl.Map) => {
if (map.getLayer(PLOTS_LAYER)) map.removeLayer(PLOTS_LAYER);
if (map.getSource(PLOTS_SOURCE)) map.removeSource(PLOTS_SOURCE);
if (map.getLayer(LAYER_PLOTS_SHAPE)) map.removeLayer(LAYER_PLOTS_SHAPE);
if (map.getLayer(LAYER_PLOTS_TXT)) map.removeLayer(LAYER_PLOTS_TXT);
if (map.getSource(SRC_PLOTS)) map.removeSource(SRC_PLOTS);

map.addSource(PLOTS_SOURCE, {
map.addSource(SRC_PLOTS, {
type: 'vector',
tiles: [
process.env.NEXT_PUBLIC_API_BASE + '/plots/tiles/{x}/{y}/{z}.pbf',
Expand All @@ -380,8 +382,8 @@ export const useMapLayers = (map?: maplibregl.Map) => {
});

map.addLayer({
id: PLOTS_LAYER,
source: PLOTS_SOURCE,
id: LAYER_PLOTS_SHAPE,
source: SRC_PLOTS,
'source-layer': 'default',
type: 'line',
paint: {
Expand All @@ -390,6 +392,22 @@ export const useMapLayers = (map?: maplibregl.Map) => {
'line-width': 2,
},
});

// Display the plot id in the middle of the plot
map.addLayer({
id: LAYER_PLOTS_TXT,
source: SRC_PLOTS,
'source-layer': 'default',
type: 'symbol',
layout: {
'text-field': ['get', 'plot_number'],
'text-size': 12,
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
'text-offset': [0, 0],
'text-anchor': 'center',
'text-allow-overlap': false,
},
});
}, []);

// When layers change, we rebuild the style and the layers
Expand Down
Loading

0 comments on commit 94c3772

Please sign in to comment.