Revert "Revert "Revert "Revert "feat/4893 - migrate the mapReader to mapbox-gl with react""""

This reverts commit 473ed00b6c.

app/javascript/components/MapReader.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import ReactMapboxGl, { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
+import { LngLatBounds } from 'mapbox-gl';
+import PropTypes from 'prop-types';
+
+const Map = ReactMapboxGl({});
+
+const MapReader = ({ geoData }) => {
+  let [selectionCollection, cadastresCollection] = [[], []];
+
+  for (let selection of geoData.selection.coordinates) {
+    selectionCollection.push({
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: selection
+      }
+    });
+  }
+
+  for (let cadastre of geoData.cadastres) {
+    cadastresCollection.push({
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: cadastre.geometry.coordinates[0]
+      }
+    });
+  }
+
+  const selectionData = {
+    type: 'geojson',
+    data: {
+      type: 'FeatureCollection',
+      features: selectionCollection
+    }
+  };
+
+  const cadastresData = {
+    type: 'geojson',
+    data: {
+      type: 'FeatureCollection',
+      features: cadastresCollection
+    }
+  };
+
+  const polygonSelectionFill = {
+    'fill-color': '#EC3323',
+    'fill-opacity': 0.5
+  };
+
+  const polygonSelectionLine = {
+    'line-color': 'rgba(255, 0, 0, 1)',
+    'line-width': 4
+  };
+
+  const polygonCadastresFill = {
+    'fill-color': '#9CA090',
+    'fill-opacity': 0.5
+  };
+
+  const polygonCadastresLine = {
+    'line-color': 'rgba(156, 160, 144, 255)',
+    'line-width': 2,
+    'line-dasharray': [1, 1]
+  };
+
+  let bounds = new LngLatBounds();
+
+  for (let selection of selectionCollection) {
+    for (let coordinate of selection.geometry.coordinates[0]) {
+      bounds.extend(coordinate);
+    }
+  }
+  let [swCoords, neCoords] = [
+    Object.values(bounds._sw),
+    Object.values(bounds._ne)
+  ];
+  const boundData = [swCoords, neCoords];
+
+  return (
+    <Map
+      fitBounds={boundData}
+      fitBoundsOptions={{ padding: 100 }}
+      style="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
+      containerStyle={{
+        height: '400px',
+        width: '100%'
+      }}
+    >
+      <GeoJSONLayer
+        data={selectionData.data}
+        fillPaint={polygonSelectionFill}
+        linePaint={polygonSelectionLine}
+      />
+      <GeoJSONLayer
+        data={cadastresData.data}
+        fillPaint={polygonCadastresFill}
+        linePaint={polygonCadastresLine}
+      />
+      <ZoomControl />
+    </Map>
+  );
+};
+
+MapReader.propTypes = {
+  geoData: PropTypes.shape({
+    position: PropTypes.object,
+    selection: PropTypes.object,
+    cadastres: PropTypes.array
+  })
+};
+
+export default MapReader;

app/javascript/loaders/MapReader.js

@@ -0,0 +1,3 @@
+import Loadable from '../components/Loadable';
+
+export default Loadable(() => import('../components/MapReader'));

app/views/shared/champs/carte/_show.html.haml

@@ -1,4 +1,7 @@
 - if champ.to_s.present?
-  .carte{ data: { geo: geo_data(champ) } }
+  - if supported_browser?
+    = react_component("MapReader", { geoData: champ.to_render_data } )
+  - else
+    %p La carte n'est pas compatible avec votre navigateur. Afin de l'afficher, nous vous conseillons d'utiliser Chrome, Firefox ou Safari
   .geo-areas
     = render partial: 'shared/champs/carte/geo_areas', locals: { champ: champ, error: false }