Add carte ign

2020-07-29 15:27:08 +02:00 · 2020-07-29 15:27:08 +02:00 · f1cbc9846e
commit f1cbc9846e
parent c83a085d6a
18 changed files with 6044 additions and 9444 deletions
--- a/app/javascript/components/MapEditor/SwitchMapStyle.js
+++ b/app/javascript/components/MapEditor/SwitchMapStyle.js
@ -1,36 +0,0 @@
-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;
--- a/app/javascript/components/MapEditor/index.js
+++ b/app/javascript/components/MapEditor/index.js
@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import mapboxgl from 'mapbox-gl';
 import ReactMapboxGl, { GeoJSONLayer, ZoomControl } from 'react-mapbox-gl';
@ -8,8 +8,7 @@ import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';

 import { getJSON, ajax, fire } from '@utils';

-import SwitchMapStyle from './SwitchMapStyle';
-import { getMapStyle } from '../MapStyles';
+import { getMapStyle, SwitchMapStyle } from '../MapStyles';

 import SearchInput from './SearchInput';
 import { polygonCadastresFill, polygonCadastresLine } from './utils';
@ -36,7 +35,10 @@ function MapEditor({ featureCollection, url, preview, hasCadastres }) {
  const [cadastresFeatureCollection, setCadastresFeatureCollection] = useState(
    filterFeatureCollection(featureCollection, 'cadastre')
  );
-  const mapStyle = getMapStyle(style, hasCadastres);
+  const mapStyle = useMemo(() => getMapStyle(style, hasCadastres), [
+    style,
+    hasCadastres
+  ]);

  const onFeatureFocus = useCallback(
    ({ detail }) => {
@ -291,12 +293,13 @@ function MapEditor({ featureCollection, url, preview, hasCadastres }) {
          height: '500px'
        }}
      >
-        <GeoJSONLayer
-          id="cadastres-layer"
-          data={cadastresFeatureCollection}
-          fillPaint={polygonCadastresFill}
-          linePaint={polygonCadastresLine}
-        />
+        {hasCadastres ? (
+          <GeoJSONLayer
+            data={cadastresFeatureCollection}
+            fillPaint={polygonCadastresFill}
+            linePaint={polygonCadastresLine}
+          />
+        ) : null}
        <DrawControl
          ref={drawControl}
          onDrawCreate={preview ? noop : onDrawCreate}
@ -310,19 +313,7 @@ function MapEditor({ featureCollection, url, preview, hasCadastres }) {
            trash: true
          }}
        />
-        <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>
+        <SwitchMapStyle style={style} setStyle={setStyle} />
        <ZoomControl />
      </Map>
    </>
--- a/app/javascript/components/MapReader/SwitchMapStyle.js
+++ b/app/javascript/components/MapReader/SwitchMapStyle.js
@ -1,36 +0,0 @@
-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;
--- a/app/javascript/components/MapReader/index.js
+++ b/app/javascript/components/MapReader/index.js
@ -3,8 +3,7 @@ import ReactMapboxGl, { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
 import mapboxgl, { Popup } from 'mapbox-gl';
 import PropTypes from 'prop-types';

-import SwitchMapStyle from './SwitchMapStyle';
-import { getMapStyle } from '../MapStyles';
+import { getMapStyle, SwitchMapStyle } from '../MapStyles';

 import {
  filterFeatureCollection,
@ -52,10 +51,11 @@ const MapReader = ({ featureCollection }) => {
      ),
    [selectionsUtilisateurFeatureCollection]
  );
-  const mapStyle = useMemo(
-    () => getMapStyle(style, cadastresFeatureCollection.length),
-    [style, cadastresFeatureCollection]
-  );
+  const hasCadastres = !!cadastresFeatureCollection.length;
+  const mapStyle = useMemo(() => getMapStyle(style, hasCadastres), [
+    style,
+    cadastresFeatureCollection
+  ]);
  const popup = useMemo(
    () =>
      new Popup({
@ -176,25 +176,15 @@ const MapReader = ({ featureCollection }) => {
        circleOnMouseEnter={onMouseEnter}
        circleOnMouseLeave={onMouseLeave}
      />
-      <GeoJSONLayer
-        data={cadastresFeatureCollection}
-        fillPaint={polygonCadastresFill}
-        linePaint={polygonCadastresLine}
-      />
+      {hasCadastres ? (
+        <GeoJSONLayer
+          data={cadastresFeatureCollection}
+          fillPaint={polygonCadastresFill}
+          linePaint={polygonCadastresLine}
+        />
+      ) : null}

-      <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>
+      <SwitchMapStyle style={style} setStyle={setStyle} />
      <ZoomControl />
    </Map>
  );
--- a/app/javascript/components/MapStyles/SwitchMapStyle.js
+++ b/app/javascript/components/MapStyles/SwitchMapStyle.js
@ -0,0 +1,73 @@
+import React from 'react';
+import ortho from './images/preview-ortho.png';
+import vector from './images/preview-vector.png';
+import PropTypes from 'prop-types';
+
+const STYLES = {
+  ortho: {
+    title: 'Satellite',
+    preview: ortho,
+    color: '#fff'
+  },
+  vector: {
+    title: 'Vectoriel',
+    preview: vector,
+    color: '#000'
+  },
+  ign: {
+    title: 'Carte IGN',
+    preview: vector,
+    color: '#000'
+  }
+};
+
+function getNextStyle(style) {
+  const styles = Object.keys(STYLES);
+  let index = styles.indexOf(style) + 1;
+  if (index === styles.length) {
+    return styles[0];
+  }
+  return styles[index];
+}
+
+export const SwitchMapStyle = ({ style, setStyle }) => {
+  const nextStyle = getNextStyle(style);
+  const { title, preview, color } = STYLES[nextStyle];
+
+  const imgStyle = {
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer'
+  };
+
+  const textStyle = {
+    position: 'relative',
+    bottom: '26px',
+    left: '4px',
+    color
+  };
+
+  return (
+    <div
+      className="style-switch"
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0
+      }}
+      onClick={() => setStyle(nextStyle)}
+    >
+      <div className="switch-style mapboxgl-ctrl-swith-map-style">
+        <img alt={title} style={imgStyle} src={preview} />
+        <div className="text" style={textStyle}>
+          {title}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+SwitchMapStyle.propTypes = {
+  style: PropTypes.string,
+  setStyle: PropTypes.func
+};
--- a/app/javascript/components/MapStyles/base-style.js
+++ b/app/javascript/components/MapStyles/base-style.js
@ -0,0 +1,61 @@
+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' }
+    },
+    'mapbox:type': 'template',
+    'openmaptiles:mapbox:owner': 'openmaptiles',
+    'openmaptiles:mapbox:source:url': 'mapbox://openmaptiles.4qljc88t',
+    'openmaptiles:version': '3.x',
+    'maputnik:renderer': 'mbgljs'
+  },
+  center: [0, 0],
+  zoom: 1,
+  bearing: 0,
+  pitch: 0,
+  sources: {
+    'decoupage-administratif': {
+      type: 'vector',
+      url:
+        'https://openmaptiles.geo.data.gouv.fr/data/decoupage-administratif.json'
+    },
+    openmaptiles: {
+      type: 'vector',
+      url: 'https://openmaptiles.geo.data.gouv.fr/data/france-vector.json'
+    },
+    'photographies-aeriennes': {
+      type: 'raster',
+      tiles: [
+        'https://tiles.geo.api.gouv.fr/photographies-aeriennes/tiles/{z}/{x}/{y}'
+      ],
+      tileSize: 256,
+      attribution: 'Images aériennes © IGN',
+      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'
+    }
+  },
+  sprite: 'https://openmaptiles.github.io/osm-bright-gl-style/sprite',
+  glyphs: 'https://openmaptiles.geo.data.gouv.fr/fonts/{fontstack}/{range}.pbf'
+};
--- a/app/javascript/components/MapStyles/cadastre.js
+++ b/app/javascript/components/MapStyles/cadastre.js
@ -0,0 +1,106 @@
+export default [
+  {
+    id: 'batiments-line',
+    type: 'line',
+    source: 'cadastre',
+    'source-layer': 'batiments',
+    minzoom: 16,
+    maxzoom: 22,
+    layout: { visibility: 'visible' },
+    paint: {
+      'line-opacity': 1,
+      'line-color': 'rgba(0, 0, 0, 1)',
+      'line-width': 1
+    }
+  },
+  {
+    id: 'batiments-fill',
+    type: 'fill',
+    source: 'cadastre',
+    'source-layer': 'batiments',
+    layout: { visibility: 'visible' },
+    paint: {
+      'fill-color': 'rgba(150, 150, 150, 1)',
+      'fill-opacity': {
+        stops: [
+          [16, 0],
+          [17, 0.6]
+        ]
+      },
+      'fill-antialias': true
+    }
+  },
+  {
+    id: 'parcelles',
+    type: 'line',
+    source: 'cadastre',
+    'source-layer': 'parcelles',
+    minzoom: 15.5,
+    maxzoom: 24,
+    layout: {
+      visibility: 'visible',
+      'line-cap': 'butt',
+      'line-join': 'miter',
+      'line-miter-limit': 2
+    },
+    paint: {
+      'line-color': 'rgba(255, 255, 255, 1)',
+      'line-opacity': 0.8,
+      'line-width': {
+        stops: [
+          [16, 1.5],
+          [17, 2]
+        ]
+      },
+      'line-offset': 0,
+      'line-blur': 0,
+      'line-translate': [0, 1],
+      'line-dasharray': [1],
+      'line-gap-width': 0
+    }
+  },
+  {
+    id: 'parcelles-fill',
+    type: 'fill',
+    source: 'cadastre',
+    'source-layer': 'parcelles',
+    layout: {
+      visibility: 'visible'
+    },
+    paint: {
+      'fill-color': 'rgba(129, 123, 0, 1)',
+      'fill-opacity': [
+        'case',
+        ['boolean', ['feature-state', 'hover'], false],
+        0.7,
+        0.1
+      ]
+    }
+  },
+  {
+    id: 'parcelle-highlighted',
+    type: 'fill',
+    source: 'cadastre',
+    'source-layer': 'parcelles',
+    filter: ['==', 'id', ''],
+    paint: {
+      'fill-color': 'rgba(1, 129, 0, 1)',
+      'fill-opacity': 0.7
+    }
+  },
+  {
+    id: 'sections',
+    type: 'line',
+    source: 'cadastre',
+    'source-layer': 'sections',
+    minzoom: 12,
+    layout: { visibility: 'visible' },
+    paint: {
+      'line-color': 'rgba(0, 0, 0, 1)',
+      'line-opacity': 0.7,
+      'line-width': 2,
+      'line-dasharray': [3, 3],
+      'line-translate': [0, 0]
+    }
+  }
+];
--- a/app/javascript/components/MapStyles/index.js
+++ b/app/javascript/components/MapStyles/index.js
@ -1,11 +1,44 @@
-import ortho from './ortho.json';
-import orthoCadastre from './orthoCadastre.json';
-import vector from './vector.json';
-import vectorCadastre from './vectorCadastre.json';
+import baseStyle from './base-style';
+import cadastre from './cadastre';
+import orthoStyle from './ortho-style';
+import vectorStyle from './vector-style';
+
+const ignStyle = [
+  {
+    id: 'carte-ign',
+    type: 'raster',
+    source: 'carte-ign',
+    paint: { 'raster-resampling': 'linear' }
+  }
+];

 export function getMapStyle(style, hasCadastres) {
-  if (hasCadastres) {
-    return style === 'ortho' ? orthoCadastre : vectorCadastre;
+  const mapStyle = { ...baseStyle };
+
+  switch (style) {
+    case 'ortho':
+      mapStyle.layers = orthoStyle;
+      mapStyle.id = 'ortho';
+      mapStyle.name = 'Photographies aériennes';
+      break;
+    case 'vector':
+      mapStyle.layers = vectorStyle;
+      mapStyle.id = 'vector';
+      mapStyle.name = 'Carte OSM';
+      break;
+    case 'ign':
+      mapStyle.layers = ignStyle;
+      mapStyle.id = 'ign';
+      mapStyle.name = 'Carte IGN';
+      break;
  }
-  return style === 'ortho' ? ortho : vector;
+
+  if (hasCadastres) {
+    mapStyle.layers = mapStyle.layers.concat(cadastre);
+    mapStyle.id += '-cadastre';
+  }
+
+  return mapStyle;
 }
+
+export { SwitchMapStyle } from './SwitchMapStyle';
--- a/app/javascript/components/MapStyles/ortho-style.js
+++ b/app/javascript/components/MapStyles/ortho-style.js
--- a/app/javascript/components/MapStyles/ortho.json
+++ b/app/javascript/components/MapStyles/ortho.json
--- a/app/javascript/components/MapStyles/orthoCadastre.json
+++ b/app/javascript/components/MapStyles/orthoCadastre.json
--- a/app/javascript/components/MapStyles/vector-style.js
+++ b/app/javascript/components/MapStyles/vector-style.js
--- a/app/javascript/components/MapStyles/vector.json
+++ b/app/javascript/components/MapStyles/vector.json
--- a/app/javascript/components/MapStyles/vectorCadastre.json
+++ b/app/javascript/components/MapStyles/vectorCadastre.json