IGN layers on maps can now be disabled by the user

This commit is contained in:
Paul Chavard 2021-06-30 10:28:02 +02:00
parent a29e1761f4
commit fc966a2761
11 changed files with 245 additions and 48 deletions

View file

@ -1,4 +1,5 @@
@import "colors";
@import "constants";
.areas-title {
font-weight: bold;
@ -38,6 +39,23 @@
left: 5px;
}
}
.map-style-panel {
z-index: 99;
padding: $default-spacer;
margin-bottom: $default-spacer;
ul {
padding: $default-spacer;
padding-bottom: 0;
margin-bottom: -$default-spacer;
label {
font-size: 12px;
font-weight: normal;
}
}
}
}
.cadastres-selection-control {

View file

@ -1,11 +1,15 @@
@import "constants";
.m-0 {
margin: 0px !important;
}
.mb-1 {
margin-bottom: $default-spacer;
}
.mr-1 {
margin-right: $default-spacer;
margin-right: $default-spacer !important;
}
.mb-4 {
@ -20,6 +24,10 @@
padding-left: 0px !important;
}
.p-0 {
padding: 0px !important;
}
.bold {
font-weight: bold;
}

View file

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import ReactMapboxGl, { ZoomControl } from 'react-mapbox-gl';
import DrawControl from 'react-mapbox-gl-draw';
import { MapIcon } from '@heroicons/react/outline';
import { CursorClickIcon } from '@heroicons/react/outline';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
@ -36,7 +36,13 @@ function MapEditor({ featureCollection, url, options, preview }) {
enabled: !preview,
cadastreEnabled
});
const [style, setStyle] = useMapStyle(options.layers, {
const {
style,
layers,
setStyle,
setLayerEnabled,
setLayerOpacity
} = useMapStyle(options.layers, {
onStyleChange,
cadastreEnabled
});
@ -133,7 +139,13 @@ function MapEditor({ featureCollection, url, options, preview }) {
}}
/>
)}
<MapStyleControl style={style.id} setStyle={setStyle} />
<MapStyleControl
style={style.id}
layers={layers}
setStyle={setStyle}
setLayerEnabled={setLayerEnabled}
setLayerOpacity={setLayerOpacity}
/>
<ZoomControl />
{options.layers.includes('cadastres') && (
<div className="cadastres-selection-control mapboxgl-ctrl-group">
@ -145,7 +157,7 @@ function MapEditor({ featureCollection, url, options, preview }) {
title="Sélectionner les parcelles cadastrales"
className={cadastreEnabled ? 'on' : ''}
>
<MapIcon className="icon-size" />
<CursorClickIcon className="icon-size" />
</button>
</div>
)}

View file

@ -20,7 +20,13 @@ const MapReader = ({ featureCollection, options }) => {
onMouseEnter,
onMouseLeave
} = useMapbox(featureCollection);
const [style, setStyle] = useMapStyle(options.layers, { onStyleChange });
const {
style,
layers,
setStyle,
setLayerEnabled,
setLayerOpacity
} = useMapStyle(options.layers, { onStyleChange });
if (!isSupported) {
return (
@ -54,7 +60,13 @@ const MapReader = ({ featureCollection, options }) => {
onMouseLeave={onMouseLeave}
/>
<MapStyleControl style={style.id} setStyle={setStyle} />
<MapStyleControl
style={style.id}
layers={layers}
setStyle={setStyle}
setLayerEnabled={setLayerEnabled}
setLayerOpacity={setLayerOpacity}
/>
<ZoomControl />
</Mapbox>
);

View file

@ -1,35 +1,23 @@
import React, { useMemo, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Popover, RadioGroup } from '@headlessui/react';
import { usePopper } from 'react-popper';
import { MapIcon } from '@heroicons/react/outline';
import { getMapStyle } from './styles';
import ortho from './styles/images/preview-ortho.png';
import vector from './styles/images/preview-vector.png';
import { getMapStyle, getLayerName } from './styles';
const STYLES = {
ortho: {
title: 'Satellite',
preview: ortho,
color: '#fff'
},
vector: {
title: 'Vectoriel',
preview: vector,
color: '#000'
},
ign: {
title: 'Carte IGN',
preview: vector,
color: '#000'
}
ortho: 'Satellite',
vector: 'Vectoriel',
ign: 'Carte IGN'
};
function getNextStyle(style) {
const styleNames = Object.keys(STYLES);
const index = styleNames.indexOf(style) + 1;
if (index === styleNames.length) {
return styleNames[0];
}
return styleNames[index];
function optionalLayersMap(optionalLayers) {
return Object.fromEntries(
optionalLayers
.filter((layer) => layer != 'cadastres')
.map((layer) => [layer, { enabled: true, opacity: 100 }])
);
}
export function useMapStyle(
@ -37,33 +25,119 @@ export function useMapStyle(
{ onStyleChange, cadastreEnabled }
) {
const [styleId, setStyle] = useState('ortho');
const style = useMemo(() => getMapStyle(styleId, optionalLayers), [
styleId,
optionalLayers
]);
const [layers, setLayers] = useState(() => optionalLayersMap(optionalLayers));
const setLayerEnabled = (layer, enabled) =>
setLayers((optionalLayers) => {
optionalLayers[layer].enabled = enabled;
return { ...optionalLayers };
});
const setLayerOpacity = (layer, opacity) =>
setLayers((optionalLayers) => {
optionalLayers[layer].opacity = opacity;
return { ...optionalLayers };
});
const enabledLayers = Object.entries(layers).filter(
([, { enabled }]) => enabled
);
const style = useMemo(
() =>
getMapStyle(
styleId,
enabledLayers.map(([layer]) => layer)
),
[
styleId,
enabledLayers.map(([layer, { opacity }]) => `${layer}-${opacity}`)
]
);
useEffect(() => onStyleChange(), [styleId, cadastreEnabled]);
return [style, setStyle];
return { style, layers, setStyle, setLayerEnabled, setLayerOpacity };
}
function MapStyleControl({ style, setStyle }) {
const nextStyle = getNextStyle(style);
const { title, preview, color } = STYLES[nextStyle];
function MapStyleControl({ style, layers, setStyle, setLayerEnabled }) {
const [buttonElement, setButtonElement] = useState();
const [panelElement, setPanelElement] = useState();
const { styles, attributes } = usePopper(buttonElement, panelElement, {
placement: 'bottom-end'
});
return (
<div className="map-style-control">
<button type="button" onClick={() => setStyle(nextStyle)}>
<img alt={title} src={preview} />
<div style={{ color }}>{title}</div>
</button>
<div className="form map-style-control mapboxgl-ctrl-group">
<Popover>
<Popover.Button
ref={setButtonElement}
className="map-style-button"
title="Sélectionner les couches cartographiques"
>
<MapIcon className="icon-size" />
</Popover.Button>
<Popover.Panel
className="flex map-style-panel mapboxgl-ctrl-group"
ref={setPanelElement}
style={styles.popper}
{...attributes.popper}
>
<RadioGroup
value={style}
onChange={setStyle}
className="styles-list"
as="ul"
>
{Object.entries(STYLES).map(([style, title]) => (
<RadioGroup.Option
key={style}
value={style}
as="li"
className="flex"
>
{({ checked }) => (
<>
<input
type="radio"
key={`${style}-${checked}`}
defaultChecked={checked}
name="map-style"
className="m-0 p-0 mr-1"
/>
<RadioGroup.Label>
{title.replace(/\s/g, ' ')}
</RadioGroup.Label>
</>
)}
</RadioGroup.Option>
))}
</RadioGroup>
{Object.keys(layers).length ? (
<ul className="layers-list">
{Object.entries(layers).map(([layer, { enabled }]) => (
<li key={layer} className="flex">
<input
className="m-0 p-0 mr-1"
type="checkbox"
checked={enabled}
onChange={(event) => {
setLayerEnabled(layer, event.target.checked);
}}
/>
<label>{getLayerName(layer)}</label>
</li>
))}
</ul>
) : null}
</Popover.Panel>
</Popover>
</div>
);
}
MapStyleControl.propTypes = {
style: PropTypes.string,
setStyle: PropTypes.func
layers: PropTypes.object,
setStyle: PropTypes.func,
setLayerEnabled: PropTypes.func,
setLayerOpacity: PropTypes.func
};
export default MapStyleControl;

View file

@ -157,6 +157,13 @@ export function buildOptionalLayers(ids) {
);
}
export function getLayerName(layer) {
return OPTIONAL_LAYERS.find(({ id }) => id == layer).label.replace(
/\s/g,
' '
);
}
export default {
version: 8,
metadat: {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

View file

@ -1,8 +1,10 @@
import baseStyle, { buildOptionalLayers } from './base';
import baseStyle, { buildOptionalLayers, getLayerName } from './base';
import orthoStyle from './layers/ortho';
import vectorStyle from './layers/vector';
import ignLayers from './layers/ign';
export { getLayerName };
export function getMapStyle(id, optionalLayers) {
const style = { ...baseStyle, id };

View file

@ -1,13 +1,16 @@
{
"dependencies": {
"@babel/preset-react": "^7.12.13",
"@headlessui/react": "^1.3.0",
"@heroicons/react": "^1.0.1",
"@mapbox/mapbox-gl-draw": "^1.2.2",
"@popperjs/core": "^2.9.2",
"@rails/actiontext": "^6.0.3",
"@rails/activestorage": "^6.0.3",
"@rails/ujs": "^6.0.3",
"@rails/webpacker": "5.1.1",
"@reach/combobox": "^0.13.0",
"@reach/slider": "^0.15.0",
"@sentry/browser": "^5.15.5",
"@tmcw/togeojson": "^4.3.0",
"babel-plugin-macros": "^2.8.0",
@ -28,6 +31,7 @@
"react-intersection-observer": "^8.31.0",
"react-mapbox-gl": "^5.1.1",
"react-mapbox-gl-draw": "^2.0.4",
"react-popper": "^2.2.5",
"react-query": "^3.9.7",
"react-sortable-hoc": "^1.11.0",
"react_ujs": "^2.6.1",

View file

@ -1005,6 +1005,11 @@
enabled "2.0.x"
kuler "^2.0.0"
"@headlessui/react@^1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.3.0.tgz#62287c92604923e5dfb394483e5ec2463e1baea6"
integrity sha512-2gqTO6BQ3Jr8vDX1B67n1gl6MGKTt6DBmR+H0qxwj0gTMnR2+Qpktj8alRWxsZBODyOiBb77QSQpE/6gG3MX4Q==
"@heroicons/react@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.1.tgz#66d25f6441920bd5c2146ea27fd33995885452dd"
@ -1567,6 +1572,11 @@
dependencies:
"@types/node" ">= 8"
"@popperjs/core@^2.9.2":
version "2.9.2"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
"@rails/actiontext@^6.0.3":
version "6.0.3"
resolved "https://registry.yarnpkg.com/@rails/actiontext/-/actiontext-6.0.3.tgz#71dacd49df7c16a363e20aa89a53efcad8fcecde"
@ -1638,6 +1648,14 @@
"@reach/utils" "0.13.0"
tslib "^2.0.0"
"@reach/auto-id@0.15.0":
version "0.15.0"
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.15.0.tgz#f46afebfc140b2099b95c7aec1f049d167d3833d"
integrity sha512-iACaCcZeqAhDf4OOwJpmHHS/LaRj9z3Ip8JmlhpCrFWV2YOIiiZk42amlBZX6CKH66Md+eriYZQk3TyAjk6Oxg==
dependencies:
"@reach/utils" "0.15.0"
tslib "^2.1.0"
"@reach/combobox@^0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@reach/combobox/-/combobox-0.13.0.tgz#16bbdae42fc84f28025e6aa8552f1035cb15a365"
@ -1694,6 +1712,17 @@
prop-types "^15.7.2"
tslib "^2.0.0"
"@reach/slider@^0.15.0":
version "0.15.0"
resolved "https://registry.yarnpkg.com/@reach/slider/-/slider-0.15.0.tgz#6b871e913bf10aa8f1ee5a4090478deff71d9c39"
integrity sha512-8dYJiclMpjHJ/wc0pIUxbwf8d3oO9ojnbMO31HPdqCqa+2KK8MoYzVdD32VsEa+gznHjoG9c05PPsrAjQd1yYg==
dependencies:
"@reach/auto-id" "0.15.0"
"@reach/utils" "0.15.0"
prop-types "^15.7.2"
tiny-warning "^1.0.3"
tslib "^2.1.0"
"@reach/utils@0.13.0":
version "0.13.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.0.tgz#2da775a910d8894bb34e1e94fe95842674f71844"
@ -1703,6 +1732,14 @@
tslib "^2.0.0"
warning "^4.0.3"
"@reach/utils@0.15.0":
version "0.15.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.15.0.tgz#5b183d668f9bb900b2dec7a33c028a2a828d27b2"
integrity sha512-JHHN7T5ucFiuQbqkgv8ECbRWKfRiJxrO/xHR3fHf+f2C7mVs/KkJHhYtovS1iEapR4silygX9PY0+QUmHPOTYw==
dependencies:
tiny-warning "^1.0.3"
tslib "^2.1.0"
"@sentry/browser@^5.15.5":
version "5.15.5"
resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.5.tgz#d9a51f1388581067b50d30ed9b1aed2cbb333a36"
@ -10436,6 +10473,11 @@ react-dom@^17.0.1:
object-assign "^4.1.1"
scheduler "^0.20.1"
react-fast-compare@^3.0.1:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-intersection-observer@^8.31.0:
version "8.31.0"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz#0ed21aaf93c4c0475b22b0ccaba6169076d01605"
@ -10462,6 +10504,14 @@ react-mapbox-gl@^5.1.1:
deep-equal "1.0.1"
supercluster "^7.0.0"
react-popper@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
dependencies:
react-fast-compare "^3.0.1"
warning "^4.0.2"
react-query@^3.9.7:
version "3.9.7"
resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.9.7.tgz#324c697f418827c129c8c126d233c6052bb1e35e"
@ -12052,6 +12102,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-warning@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
tinyqueue@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
@ -12208,6 +12263,11 @@ tslib@^2.0.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
tslib@^2.1.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
tsutils@^3.17.1:
version "3.17.1"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@ -12680,7 +12740,7 @@ wait-port@^0.2.2:
commander "^3.0.2"
debug "^4.1.1"
warning@^4.0.3:
warning@^4.0.2, warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==