Use IGN plan v2 and add MNHN data sources

app/javascript/components/MapEditor/index.js

@@ -23,7 +23,7 @@ import {
 
 const Map = ReactMapboxGl({});
 
-function MapEditor({ featureCollection, url, preview, hasCadastres, ign }) {
+function MapEditor({ featureCollection, url, preview, options }) {
   const drawControl = useRef(null);
   const [currentMap, setCurrentMap] = useState(null);
 
@@ -35,10 +35,10 @@ function MapEditor({ featureCollection, url, preview, hasCadastres, ign }) {
   const [cadastresFeatureCollection, setCadastresFeatureCollection] = useState(
     filterFeatureCollection(featureCollection, 'cadastre')
   );
-  const mapStyle = useMemo(() => getMapStyle(style, hasCadastres), [
-    style,
-    hasCadastres
-  ]);
+  const mapStyle = useMemo(
+    () => getMapStyle(style, options.cadastres, options.mnhn),
+    [style, options]
+  );
 
   const translations = [
     ['.mapbox-gl-draw_line', 'Tracer une ligne'],
@@ -306,7 +306,7 @@ function MapEditor({ featureCollection, url, preview, hasCadastres, ign }) {
           height: '500px'
         }}
       >
-        {hasCadastres ? (
+        {options.cadastres ? (
           <GeoJSONLayer
             data={cadastresFeatureCollection}
             fillPaint={polygonCadastresFill}
@@ -326,7 +326,7 @@ function MapEditor({ featureCollection, url, preview, hasCadastres, ign }) {
             trash: true
           }}
         />
-        <SwitchMapStyle style={style} setStyle={setStyle} ign={ign} />
+        <SwitchMapStyle style={style} setStyle={setStyle} ign={options.ign} />
         <ZoomControl />
       </Map>
     </>
@@ -341,8 +341,11 @@ MapEditor.propTypes = {
   }),
   url: PropTypes.string,
   preview: PropTypes.bool,
-  hasCadastres: PropTypes.bool,
-  ign: PropTypes.bool
+  options: PropTypes.shape({
+    cadastres: PropTypes.bool,
+    mnhn: PropTypes.bool,
+    ign: PropTypes.bool
+  })
 };
 
 export default MapEditor;

app/javascript/components/MapReader/index.js

@@ -16,7 +16,7 @@ import {
 
 const Map = ReactMapboxGl({});
 
-const MapReader = ({ featureCollection, ign }) => {
+const MapReader = ({ featureCollection, options }) => {
   const [currentMap, setCurrentMap] = useState(null);
   const [style, setStyle] = useState('ortho');
   const cadastresFeatureCollection = useMemo(
@@ -52,10 +52,10 @@ const MapReader = ({ featureCollection, ign }) => {
     [selectionsUtilisateurFeatureCollection]
   );
   const hasCadastres = !!cadastresFeatureCollection.length;
-  const mapStyle = useMemo(() => getMapStyle(style, hasCadastres), [
-    style,
-    cadastresFeatureCollection
-  ]);
+  const mapStyle = useMemo(
+    () => getMapStyle(style, hasCadastres, options.mnhn),
+    [style, options, cadastresFeatureCollection]
+  );
   const popup = useMemo(
     () =>
       new Popup({
@@ -184,7 +184,7 @@ const MapReader = ({ featureCollection, ign }) => {
         />
       ) : null}
 
-      <SwitchMapStyle style={style} setStyle={setStyle} ign={ign} />
+      <SwitchMapStyle style={style} setStyle={setStyle} ign={options.ign} />
       <ZoomControl />
     </Map>
   );
@@ -196,7 +196,10 @@ MapReader.propTypes = {
     bbox: PropTypes.array,
     features: PropTypes.array
   }),
-  ign: PropTypes.bool
+  options: PropTypes.shape({
+    ign: PropTypes.bool,
+    mnhn: PropTypes.bool
+  })
 };
 
 export default MapReader;

app/javascript/components/MapStyles/base-style.js

@@ -1,15 +1,36 @@
+const IGN_TOKEN = 'rc1egnbeoss72hxvd143tbyk';
+
+function ignServiceURL(layer, format = 'image/png') {
+  const url = `https://wxs.ign.fr/${IGN_TOKEN}/geoportail/wmts`;
+  const query =
+    'service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&style=normal';
+
+  return `${url}?${query}&layer=${layer}&format=${format}`;
+}
+
+function rasterSource(tiles, attribution) {
+  return {
+    type: 'raster',
+    tiles,
+    tileSize: 256,
+    attribution,
+    minzoom: 0,
+    maxzoom: 18
+  };
+}
+
 export default {
   version: 8,
   metadat: {
     'mapbox:autocomposite': false,
     'mapbox:groups': {
-      '1444849242106.713': { collapsed: false, name: 'Places' },
-      '1444849334699.1902': { collapsed: true, name: 'Bridges' },
-      '1444849345966.4436': { collapsed: false, name: 'Roads' },
-      '1444849354174.1904': { collapsed: true, name: 'Tunnels' },
-      '1444849364238.8171': { collapsed: false, name: 'Buildings' },
-      '1444849382550.77': { collapsed: false, name: 'Water' },
-      '1444849388993.3071': { collapsed: false, name: 'Land' }
+      1444849242106.713: { collapsed: false, name: 'Places' },
+      1444849334699.1902: { collapsed: true, name: 'Bridges' },
+      1444849345966.4436: { collapsed: false, name: 'Roads' },
+      1444849354174.1904: { collapsed: true, name: 'Tunnels' },
+      1444849364238.8171: { collapsed: false, name: 'Buildings' },
+      1444849382550.77: { collapsed: false, name: 'Water' },
+      1444849388993.3071: { collapsed: false, name: 'Land' }
     },
     'mapbox:type': 'template',
     'openmaptiles:mapbox:owner': 'openmaptiles',
@@ -41,20 +62,34 @@ export default {
       minzoom: 0,
       maxzoom: 19
     },
-    'carte-ign': {
-      type: 'raster',
-      tiles: [
-        'https://wxs.ign.fr/rc1egnbeoss72hxvd143tbyk/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS&format=image/jpeg&style=normal'
-      ],
-      tileSize: 256,
-      attribution: 'IGN-F/Géoportail',
-      minzoom: 0,
-      maxzoom: 18
-    },
     cadastre: {
       type: 'vector',
       url: 'https://openmaptiles.geo.data.gouv.fr/data/cadastre.json'
-    }
+    },
+    'plan-ign': rasterSource(
+      [ignServiceURL('GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2')],
+      'IGN-F/Géoportail'
+    ),
+    'protectedareas-gp': rasterSource(
+      [ignServiceURL('PROTECTEDAREAS.GP')],
+      'IGN-F/Géoportail/MNHN'
+    ),
+    'protectedareas-pn': rasterSource(
+      [ignServiceURL('PROTECTEDAREAS.PN')],
+      'IGN-F/Géoportail/MNHN'
+    ),
+    'protectedareas-pnr': rasterSource(
+      [ignServiceURL('PROTECTEDAREAS.PNR')],
+      'IGN-F/Géoportail/MNHN'
+    ),
+    'protectedareas-sic': rasterSource(
+      [ignServiceURL('PROTECTEDAREAS.SIC')],
+      'IGN-F/Géoportail/MNHN'
+    ),
+    'protectedareas-zps': rasterSource(
+      [ignServiceURL('PROTECTEDAREAS.ZPS')],
+      'IGN-F/Géoportail/MNHN'
+    )
   },
   sprite: 'https://openmaptiles.github.io/osm-bright-gl-style/sprite',
   glyphs: 'https://openmaptiles.geo.data.gouv.fr/fonts/{fontstack}/{range}.pbf'

app/javascript/components/MapStyles/index.js

@@ -3,16 +3,16 @@ import cadastre from './cadastre';
 import orthoStyle from './ortho-style';
 import vectorStyle from './vector-style';
 
-const ignStyle = [
-  {
-    id: 'carte-ign',
+function rasterStyle(source) {
+  return {
+    id: source,
+    source,
     type: 'raster',
-    source: 'carte-ign',
     paint: { 'raster-resampling': 'linear' }
-  }
-];
+  };
+}
 
-export function getMapStyle(style, hasCadastres) {
+export function getMapStyle(style, hasCadastres, hasMNHN) {
   const mapStyle = { ...baseStyle };
 
   switch (style) {
@@ -27,7 +27,7 @@ export function getMapStyle(style, hasCadastres) {
       mapStyle.name = 'Carte OSM';
       break;
     case 'ign':
-      mapStyle.layers = ignStyle;
+      mapStyle.layers = [rasterStyle('plan-ign')];
       mapStyle.id = 'ign';
       mapStyle.name = 'Carte IGN';
       break;
@@ -38,6 +38,17 @@ export function getMapStyle(style, hasCadastres) {
     mapStyle.id += '-cadastre';
   }
 
+  if (hasMNHN) {
+    mapStyle.layers = mapStyle.layers.concat([
+      rasterStyle('protectedareas-gp'),
+      rasterStyle('protectedareas-pn'),
+      rasterStyle('protectedareas-pnr'),
+      rasterStyle('protectedareas-sic'),
+      rasterStyle('protectedareas-zps')
+    ]);
+    mapStyle.id += '-mnhn';
+  }
+
   return mapStyle;
 }
 

app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js

@@ -140,6 +140,10 @@ const TypeDeChamp = sortableElement(
               label="Cadastres"
               handler={updateHandlers.cadastres}
             />
+            <TypeDeChampCarteOption
+              label="Zones naturelles protégées"
+              handler={updateHandlers.mnhn}
+            />
           </TypeDeChampCarteOptions>
           <TypeDeChampRepetitionOptions
             isVisible={isRepetition}
@@ -206,6 +210,7 @@ function createUpdateHandlers(dispatch, typeDeChamp, index, prefix) {
 
 export const FIELDS = [
   'cadastres',
+  'mnhn',
   'description',
   'drop_down_list_value',
   'libelle',