normalize features on import

app/javascript/components/MapEditor/index.js

@@ -3,7 +3,6 @@ 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 { gpx, kml } from '@tmcw/togeojson/dist/togeojson.es.js';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 
 import { getJSON, ajax, fire } from '@utils';
@@ -11,7 +10,11 @@ import { getJSON, ajax, fire } from '@utils';
 import { getMapStyle, SwitchMapStyle } from '../MapStyles';
 
 import SearchInput from './SearchInput';
-import { polygonCadastresFill, polygonCadastresLine } from './utils';
+import {
+  polygonCadastresFill,
+  polygonCadastresLine,
+  readGeoFile
+} from './utils';
 import {
   noop,
   filterFeatureCollection,
@@ -149,19 +152,7 @@ function MapEditor({ featureCollection, url, preview, options }) {
   }
 
   const onFileImport = (e, inputId) => {
-    const isGpxFile = e.target.files[0].name.includes('.gpx');
-    let reader = new FileReader();
-    reader.readAsText(e.target.files[0], 'UTF-8');
-    reader.onload = async (event) => {
-      let featureCollection;
-      isGpxFile
-        ? (featureCollection = gpx(
-            new DOMParser().parseFromString(event.target.result, 'text/xml')
-          ))
-        : (featureCollection = kml(
-            new DOMParser().parseFromString(event.target.result, 'text/xml')
-          ));
-
+    readGeoFile(e.target.files[0]).then(async (featureCollection) => {
       const resultFeatureCollection = await getJSON(
         `${url}/import`,
         featureCollection,
@@ -196,7 +187,7 @@ function MapEditor({ featureCollection, url, preview, options }) {
       updateFeaturesList(resultFeatureCollection.features);
       setImportInputs(setInputs);
       setBbox(resultFeatureCollection.bbox);
-    };
+    });
   };
 
   const addInputFile = (e) => {

app/javascript/components/MapEditor/utils.js

@@ -1,3 +1,5 @@
+import { gpx, kml } from '@tmcw/togeojson/dist/togeojson.es.js';
+
 export const polygonCadastresFill = {
   'fill-color': '#EC3323',
   'fill-opacity': 0.3
@@ -8,3 +10,81 @@ export const polygonCadastresLine = {
   'line-width': 4,
   'line-dasharray': [1, 1]
 };
+
+export function normalizeFeatureCollection(featureCollection) {
+  const features = [];
+  for (const feature of featureCollection.features) {
+    switch (feature.geometry.type) {
+      case 'MultiPoint':
+        for (const coordinates of feature.geometry.coordinates) {
+          features.push({
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates
+            },
+            properties: feature.properties
+          });
+        }
+        break;
+      case 'MultiLineString':
+        for (const coordinates of feature.geometry.coordinates) {
+          features.push({
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates
+            },
+            properties: feature.properties
+          });
+        }
+        break;
+      case 'MultiPolygon':
+        for (const coordinates of feature.geometry.coordinates) {
+          features.push({
+            type: 'Feature',
+            geometry: {
+              type: 'Polygon',
+              coordinates
+            },
+            properties: feature.properties
+          });
+        }
+        break;
+      case 'GeometryCollection':
+        for (const geometry of feature.geometry.geometries) {
+          features.push({
+            type: 'Feature',
+            geometry,
+            properties: feature.properties
+          });
+        }
+        break;
+      default:
+        features.push(feature);
+    }
+  }
+
+  featureCollection.features = features;
+  return featureCollection;
+}
+
+export function readGeoFile(file) {
+  const isGpxFile = file.name.includes('.gpx');
+  const reader = new FileReader();
+
+  return new Promise((resolve) => {
+    reader.onload = (event) => {
+      const xml = new DOMParser().parseFromString(
+        event.target.result,
+        'text/xml'
+      );
+      const featureCollection = normalizeFeatureCollection(
+        isGpxFile ? gpx(xml) : kml(xml)
+      );
+
+      resolve(featureCollection);
+    };
+    reader.readAsText(file, 'UTF-8');
+  });
+}