Add carte ign

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

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'
+};

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]
+    }
+  }
+];

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';