import GPX file in browser [Carto]

app/controllers/champs/carte_controller.rb

@@ -115,7 +115,7 @@ class Champs::CarteController < ApplicationController
   end
 
   def params_features
-    params[:feature_collection][:features]
+    params[:features]
   end
 
   def save_geometry!(geo_area, feature)

app/javascript/components/MapEditor/MapEditor.js

@@ -6,6 +6,7 @@ import DrawControl from 'react-mapbox-gl-draw';
 import SwitchMapStyle from './SwitchMapStyle';
 import SearchInput from './SearchInput';
 import { getJSON, ajax } from '@utils';
+import { gpx } from '@tmcw/togeojson/dist/togeojson.es.js';
 import ortho from './styles/ortho.json';
 import vector from './styles/vector.json';
 import { polygonCadastresFill, polygonCadastresLine } from './utils';
@@ -28,9 +29,8 @@ const MapEditor = ({ featureCollection, url }) => {
   const [coords, setCoords] = useState([1.7, 46.9]);
   const [zoom, setZoom] = useState([5]);
   const [currentMap, setCurrentMap] = useState({});
-
+  const [bbox, setBbox] = useState(featureCollection.bbox);
   const mapStyle = style === 'ortho' ? ortho : vector;
-  const bbox = featureCollection.bbox;
   const cadastresFeatureCollection = filterFeatureCollection(
     featureCollection,
     'cadastre'
@@ -93,6 +93,29 @@ const MapEditor = ({ featureCollection, url }) => {
     }
   };
 
+  const onGpxImport = e => {
+    let reader = new FileReader();
+    reader.readAsText(e.target.files[0], 'UTF-8');
+    reader.onload = async event => {
+      const featureCollection = gpx(
+        new DOMParser().parseFromString(event.target.result, 'text/xml')
+      );
+      const resultFeatureCollection = await getJSON(
+        `${url}/import`,
+        featureCollection,
+        'post'
+      );
+      drawControl.current.draw.set(
+        filterFeatureCollection(
+          resultFeatureCollection,
+          'selection_utilisateur'
+        )
+      );
+      updateFeaturesList(resultFeatureCollection.features);
+      setBbox(resultFeatureCollection.bbox);
+    };
+  };
+
   useEffect(() => {
     addEventListener('cadastres:update', onCadastresUpdate);
     return () => removeEventListener('cadastres:update', onCadastresUpdate);
@@ -110,6 +133,16 @@ const MapEditor = ({ featureCollection, url }) => {
 
   return (
     <>
+      <div className="file-import" style={{ marginBottom: '20px' }}>
+        <div>
+          <p style={{ fontWeight: 'bolder', marginBottom: '10px' }}>
+            Importer un fichier GPX
+          </p>
+        </div>
+        <div>
+          <input type="file" accept=".gpx" onChange={onGpxImport} />
+        </div>
+      </div>
       <div
         style={{
           marginBottom: '62px'

app/javascript/components/MapEditor/SearchInput.js

@@ -47,7 +47,7 @@ const SearchInput = ({ getCoords }) => {
   return (
     <Combobox aria-label="addresses">
       <ComboboxInput
-        placeholder="Saisissez au moins 2 caractères"
+        placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
         className="address-search-input"
         style={{
           font: 'inherit',

package.json

@@ -11,6 +11,7 @@
     "@rails/webpacker": "4.2.2",
     "@reach/combobox": "^0.10.0",
     "@sentry/browser": "^5.11.2",
+    "@tmcw/togeojson": "^4.0.0",
     "@turf/area": "^6.0.1",
     "babel-plugin-macros": "^2.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",

spec/controllers/champs/carte_controller_spec.rb

@@ -79,9 +79,8 @@ describe Champs::CarteController, type: :controller do
       let(:params) do
         {
           champ_id: champ.id,
-          feature_collection: {
           features: [feature]
-          }
+
         }
       end
 

yarn.lock

@@ -1263,6 +1263,11 @@
     "@sentry/types" "5.15.4"
     tslib "^1.9.3"
 
+"@tmcw/togeojson@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@tmcw/togeojson/-/togeojson-4.0.0.tgz#ee111e4e5b2b5d498d43e27a6c9bf546ce4041cc"
+  integrity sha512-JZXGC1myBPPYb/moq03cYPtErqZKzVR74Cv9C85IuqATHCxHCNOxw4D45vVcYHQnnxG2TQTIR+igzpbFiu/O6Q==
+
 "@turf/area@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@turf/area/-/area-6.0.1.tgz#50ed63c70ef2bdb72952384f1594319d94f3b051"