Merge pull request #5202 from betagouv/feat/5195-2

feat/5195 - Add styles without cadastres in  mapReader + tutorials pages

app/javascript/components/MapEditor/SwitchMapStyle.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import ortho from './images/preview-ortho.png';
-import vector from './images/preview-vector.png';
+import ortho from '../MapStyles/images/preview-ortho.png';
+import vector from '../MapStyles/images/preview-vector.png';
 import PropTypes from 'prop-types';
 
 const SwitchMapStyle = ({ isVector }) => {

app/javascript/components/MapEditor/index.js

@@ -7,8 +7,8 @@ import SwitchMapStyle from './SwitchMapStyle';
 import SearchInput from './SearchInput';
 import { getJSON, ajax } from '@utils';
 import { gpx, kml } from '@tmcw/togeojson/dist/togeojson.es.js';
-import ortho from './styles/ortho.json';
-import vector from './styles/vector.json';
+import ortho from '../MapStyles/ortho.json';
+import vector from '../MapStyles/vector.json';
 import { polygonCadastresFill, polygonCadastresLine } from './utils';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 
@@ -212,6 +212,18 @@ function MapEditor({ featureCollection, url, preview }) {
 
   return (
     <>
+      <div>
+        <p style={{ marginBottom: '20px' }}>
+          Besoin d&apos;aide ?&nbsp;
+          <a
+            href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie"
+            target="_blank"
+            rel="noreferrer"
+          >
+            consulter les tutoriels video
+          </a>
+        </p>
+      </div>
       <div className="file-import" style={{ marginBottom: '20px' }}>
         <button className="button send primary" onClick={addInputFile}>
           Ajouter un fichier GPX ou KML
@@ -244,7 +256,7 @@ function MapEditor({ featureCollection, url, preview }) {
       </div>
       <div
         style={{
-          marginBottom: '62px'
+          marginBottom: '50px'
         }}
       >
         <SearchInput

app/javascript/components/MapReader/SwitchMapStyle.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ortho from '../MapStyles/images/preview-ortho.png';
+import vector from '../MapStyles/images/preview-vector.png';
+import PropTypes from 'prop-types';
+
+const SwitchMapStyle = ({ isVector }) => {
+  const style = isVector ? 'Satellite' : 'Vectoriel';
+  const source = `${isVector ? ortho : vector}`;
+
+  const imgStyle = {
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer'
+  };
+
+  const textStyle = {
+    position: 'relative',
+    bottom: '26px',
+    left: '4px',
+    color: `${isVector ? '#fff' : '#000'}`
+  };
+  return (
+    <div className="switch-style mapboxgl-ctrl-swith-map-style">
+      <img alt={style} style={imgStyle} src={source} />
+      <div className="text" style={textStyle}>
+        {style}
+      </div>
+    </div>
+  );
+};
+
+SwitchMapStyle.propTypes = {
+  isVector: PropTypes.bool
+};
+
+export default SwitchMapStyle;

app/javascript/components/MapReader/index.js

@@ -1,11 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactMapboxGl, { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
 import mapboxgl from 'mapbox-gl';
+import SwitchMapStyle from './SwitchMapStyle';
+import ortho from '../MapStyles/ortho.json';
+import orthoCadastre from '../MapStyles/orthoCadastre.json';
+import vector from '../MapStyles/vector.json';
+import vectorCadastre from '../MapStyles/vectorCadastre.json';
 import PropTypes from 'prop-types';
 
 const Map = ReactMapboxGl({});
 
 const MapReader = ({ featureCollection }) => {
+  const [style, setStyle] = useState('ortho');
+  const hasCadastres = featureCollection.features.find(
+    (feature) => feature.properties.source === 'cadastre'
+  );
+  let mapStyle = style === 'ortho' ? ortho : vector;
+
+  if (hasCadastres) {
+    mapStyle = style === 'ortho' ? orthoCadastre : vectorCadastre;
+  }
+
   const [a1, a2, b1, b2] = featureCollection.bbox;
   const boundData = [
     [a1, a2],
@@ -52,7 +67,7 @@ const MapReader = ({ featureCollection }) => {
   };
 
   const polygonCadastresFill = {
-    'fill-color': '#9CA090',
+    'fill-color': '#FAD859',
     'fill-opacity': 0.5
   };
 
@@ -97,7 +112,7 @@ const MapReader = ({ featureCollection }) => {
     <Map
       fitBounds={boundData}
       fitBoundsOptions={{ padding: 100 }}
-      style="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
+      style={mapStyle}
       containerStyle={{
         height: '400px',
         width: '100%'
@@ -121,6 +136,20 @@ const MapReader = ({ featureCollection }) => {
         fillPaint={polygonCadastresFill}
         linePaint={polygonCadastresLine}
       />
+
+      <div
+        className="style-switch"
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: 0
+        }}
+        onClick={() =>
+          style === 'ortho' ? setStyle('vector') : setStyle('ortho')
+        }
+      >
+        <SwitchMapStyle isVector={style === 'vector' ? true : false} />
+      </div>
       <ZoomControl />
     </Map>
   );