diff --git a/Gemfile b/Gemfile
index 8ac290dc6..ad8c4a59b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -25,6 +25,7 @@ gem 'devise' # Gestion des comptes utilisateurs
gem 'devise-async'
gem 'discard'
gem 'dotenv-rails', require: 'dotenv/rails-now' # dotenv should always be loaded before rails
+gem 'ffi-geos', require: false
gem 'flipper'
gem 'flipper-active_record'
gem 'flipper-ui'
diff --git a/Gemfile.lock b/Gemfile.lock
index 622f366fb..0958a8495 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -215,6 +215,8 @@ GEM
faraday (0.15.4)
multipart-post (>= 1.2, < 3)
ffi (1.12.2)
+ ffi-geos (2.1.0)
+ ffi (>= 1.0.0)
flipper (0.17.2)
flipper-active_record (0.17.2)
activerecord (>= 4.2, < 7)
@@ -751,6 +753,7 @@ DEPENDENCIES
discard
dotenv-rails
factory_bot
+ ffi-geos
flipper
flipper-active_record
flipper-ui
diff --git a/app/javascript/components/MapEditor/MapEditor.js b/app/javascript/components/MapEditor/MapEditor.js
new file mode 100644
index 000000000..6a219fa62
--- /dev/null
+++ b/app/javascript/components/MapEditor/MapEditor.js
@@ -0,0 +1,199 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import mapboxgl from 'mapbox-gl';
+import ReactMapboxGl, { GeoJSONLayer, ZoomControl } from 'react-mapbox-gl';
+import DrawControl from 'react-mapbox-gl-draw';
+import area from '@turf/area';
+import SwitchMapStyle from './SwitchMapStyle';
+import SearchInput from './SearchInput';
+import { fire } from '@utils';
+import ortho from './styles/ortho.json';
+import vector from './styles/vector.json';
+import {
+ createFeatureCollection,
+ polygonCadastresFill,
+ polygonCadastresLine,
+ ERROR_GEO_JSON
+} from './utils';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+
+const Map = ReactMapboxGl({});
+
+const MapEditor = ({ featureCollection: { features, bbox, id } }) => {
+ const drawControl = useRef(null);
+ const [style, setStyle] = useState('ortho');
+ const [coords, setCoords] = useState([1.7, 46.9]);
+ const [zoom, setZoom] = useState([5]);
+ const [currentMap, setCurrentMap] = useState({});
+ let input = document.querySelector(
+ `input[data-feature-collection-id="${id}"]`
+ );
+
+ let userSelections = features.filter(
+ feature => feature.properties.source === 'selection_utilisateur'
+ );
+
+ let cadastresFeatureCollection = {
+ type: 'FeatureCollection',
+ features: []
+ };
+
+ const constructCadastresFeatureCollection = features => {
+ for (let feature of features) {
+ switch (feature.properties.source) {
+ case 'cadastre':
+ cadastresFeatureCollection.features.push(feature);
+ break;
+ }
+ }
+ };
+ constructCadastresFeatureCollection(features);
+
+ const mapStyle = style === 'ortho' ? ortho : vector;
+
+ const saveFeatureCollection = featuresToSave => {
+ const featuresCollection = createFeatureCollection(featuresToSave);
+ if (area(featuresCollection) < 300000) {
+ input.value = JSON.stringify(featuresCollection);
+ } else {
+ input.value = ERROR_GEO_JSON;
+ }
+ fire(input, 'change');
+ };
+
+ const onDrawCreate = ({ features }) => {
+ const draw = drawControl.current.draw;
+ const featureId = features[0].id;
+ draw.setFeatureProperty(featureId, 'id', featureId);
+ draw.setFeatureProperty(featureId, 'source', 'selection_utilisateur');
+ userSelections.push(draw.get(featureId));
+ saveFeatureCollection(userSelections);
+ };
+
+ const onDrawUpdate = ({ features }) => {
+ let featureId = features[0].properties.id;
+ userSelections = userSelections.map(selection => {
+ if (selection.properties.id === featureId) {
+ selection = features[0];
+ }
+ return selection;
+ });
+ saveFeatureCollection(userSelections);
+ };
+
+ const onDrawDelete = ({ features }) => {
+ userSelections = userSelections.filter(
+ selection => selection.properties.id !== features[0].properties.id
+ );
+ saveFeatureCollection(userSelections);
+ };
+
+ const onMapLoad = map => {
+ setCurrentMap(map);
+ if (userSelections.length > 0) {
+ userSelections.map((selection, index) => {
+ selection.properties.id = index + 1;
+ drawControl.current.draw.add(selection);
+ });
+ }
+ };
+
+ const onMapUpdate = evt => {
+ if (currentMap) {
+ cadastresFeatureCollection.features = [];
+ constructCadastresFeatureCollection(
+ evt.detail.featureCollection.features
+ );
+ currentMap
+ .getSource('cadastres-layer')
+ .setData(cadastresFeatureCollection);
+ }
+ };
+
+ useEffect(() => {
+ addEventListener('map:update', onMapUpdate);
+ return () => removeEventListener('map:update', onMapUpdate);
+ });
+
+ if (!mapboxgl.supported()) {
+ return (
+
+ Nous ne pouvons pas afficher notre éditeur de carte car il est
+ imcompatible avec votre navigateur. Nous vous conseillons de le mettre à
+ jour ou utiliser les dernières versions de Chrome, Firefox ou Safari
+
+ );
+ }
+
+ return (
+ <>
+
+ {
+ setCoords(searchTerm);
+ setZoom([17]);
+ }}
+ />
+
+
+
+ );
+};
+
+MapEditor.propTypes = {
+ featureCollection: PropTypes.shape({
+ bbox: PropTypes.array,
+ features: PropTypes.array,
+ id: PropTypes.number
+ })
+};
+
+export default MapEditor;
diff --git a/app/javascript/components/MapEditor/SearchInput.js b/app/javascript/components/MapEditor/SearchInput.js
new file mode 100644
index 000000000..65d050103
--- /dev/null
+++ b/app/javascript/components/MapEditor/SearchInput.js
@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { getJSON } from '@utils';
+import {
+ Combobox,
+ ComboboxInput,
+ ComboboxPopover,
+ ComboboxList,
+ ComboboxOption
+} from '@reach/combobox';
+import '@reach/combobox/styles.css';
+import PropTypes from 'prop-types';
+
+let cache = {};
+const useAddressSearch = searchTerm => {
+ const [addresses, setAddresses] = useState([]);
+ useEffect(() => {
+ if (searchTerm.trim() !== '') {
+ let isFresh = true;
+ fetchAddresses(searchTerm).then(addresses => {
+ if (isFresh) setAddresses(addresses);
+ });
+ return () => (isFresh = false);
+ }
+ }, [searchTerm]);
+ return addresses;
+};
+
+const fetchAddresses = value => {
+ if (cache[value]) {
+ return Promise.resolve(cache[value]);
+ }
+ const url = `https://api-adresse.data.gouv.fr/search/`;
+ return getJSON(url, { q: value, limit: 5 }, 'get').then(result => {
+ if (result) {
+ cache[value] = result;
+ }
+ return result;
+ });
+};
+
+const SearchInput = ({ getCoords }) => {
+ const [searchTerm, setSearchTerm] = useState('');
+ const addresses = useAddressSearch(searchTerm);
+ const handleSearchTermChange = event => {
+ setSearchTerm(event.target.value);
+ };
+ return (
+
+
+ {addresses.features && (
+
+ {addresses.features.length > 0 ? (
+
+ {addresses.features.map(feature => {
+ const str = `${feature.properties.name}, ${feature.properties.city}`;
+ return (
+ getCoords(feature.geometry.coordinates)}
+ key={str}
+ value={str}
+ />
+ );
+ })}
+
+ ) : (
+ Aucun résultat
+ )}
+
+ )}
+
+ );
+};
+
+SearchInput.propTypes = {
+ getCoords: PropTypes.func
+};
+
+export default SearchInput;
diff --git a/app/javascript/components/MapEditor/SwitchMapStyle.js b/app/javascript/components/MapEditor/SwitchMapStyle.js
new file mode 100644
index 000000000..4a9cf3eff
--- /dev/null
+++ b/app/javascript/components/MapEditor/SwitchMapStyle.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import ortho from './images/preview-ortho.png';
+import vector from './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%'
+ };
+
+ const textStyle = {
+ position: 'relative',
+ bottom: '26px',
+ left: '4px',
+ color: `${isVector ? '#fff' : '#000'}`
+ };
+ return (
+
+
+
+ {style}
+
+
+