IGN layers on maps can now be disabled by the user

app/assets/stylesheets/carte.scss

@@ -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 {

app/assets/stylesheets/helpers.scss

@@ -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;
 }

app/javascript/components/MapEditor/index.jsx

@@ -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>
         )}

app/javascript/components/MapReader/index.jsx

@@ -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>
   );

app/javascript/components/shared/mapbox/MapStyleControl.jsx

@@ -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 { getMapStyle, getLayerName } from './styles';
-import ortho from './styles/images/preview-ortho.png';
-import vector from './styles/images/preview-vector.png';
 
 const STYLES = {
-  ortho: {
+  ortho: 'Satellite',
-    title: 'Satellite',
+  vector: 'Vectoriel',
-    preview: ortho,
+  ign: 'Carte IGN'
-    color: '#fff'
-  },
-  vector: {
-    title: 'Vectoriel',
-    preview: vector,
-    color: '#000'
-  },
-  ign: {
-    title: 'Carte IGN',
-    preview: vector,
-    color: '#000'
-  }
 };
 
-function getNextStyle(style) {
+function optionalLayersMap(optionalLayers) {
-  const styleNames = Object.keys(STYLES);
+  return Object.fromEntries(
-  const index = styleNames.indexOf(style) + 1;
+    optionalLayers
-  if (index === styleNames.length) {
+      .filter((layer) => layer != 'cadastres')
-    return styleNames[0];
+      .map((layer) => [layer, { enabled: true, opacity: 100 }])
-  }
+  );
-  return styleNames[index];
 }
 
 export function useMapStyle(
@@ -37,33 +25,119 @@ export function useMapStyle(
   { onStyleChange, cadastreEnabled }
 ) {
   const [styleId, setStyle] = useState('ortho');
-  const style = useMemo(() => getMapStyle(styleId, optionalLayers), [
+  const [layers, setLayers] = useState(() => optionalLayersMap(optionalLayers));
-    styleId,
+  const setLayerEnabled = (layer, enabled) =>
-    optionalLayers
+    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 }) {
+function MapStyleControl({ style, layers, setStyle, setLayerEnabled }) {
-  const nextStyle = getNextStyle(style);
+  const [buttonElement, setButtonElement] = useState();
-  const { title, preview, color } = STYLES[nextStyle];
+  const [panelElement, setPanelElement] = useState();
+  const { styles, attributes } = usePopper(buttonElement, panelElement, {
+    placement: 'bottom-end'
+  });
 
   return (
-    <div className="map-style-control">
+    <div className="form map-style-control mapboxgl-ctrl-group">
-      <button type="button" onClick={() => setStyle(nextStyle)}>
+      <Popover>
-        <img alt={title} src={preview} />
+        <Popover.Button
-        <div style={{ color }}>{title}</div>
+          ref={setButtonElement}
-      </button>
+          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;

app/javascript/components/shared/mapbox/styles/base.js

@@ -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: {

app/javascript/components/shared/mapbox/styles/index.js

@@ -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 };
 

package.json

@@ -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",

yarn.lock

@@ -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==