Adapt style for Map reader (point, line)

app/javascript/components/MapEditor/SwitchMapStyle.js

@@ -9,7 +9,8 @@ const SwitchMapStyle = ({ isVector }) => {
 
   const imgStyle = {
     width: '100%',
-    height: '100%'
+    height: '100%',
+    cursor: 'pointer'
   };
 
   const textStyle = {
@@ -24,11 +25,6 @@ const SwitchMapStyle = ({ isVector }) => {
       <div className="text" style={textStyle}>
         {style}
       </div>
-      <style jsx>{`
-        img:hover {
-          cursor: pointer;
-        }
-      `}</style>
     </div>
   );
 };

app/javascript/components/MapReader/index.js

@@ -12,25 +12,25 @@ const MapReader = ({ featureCollection }) => {
     [b1, b2]
   ];
 
-  const selectionsFeatureCollection = {
-    type: 'FeatureCollection',
-    features: []
-  };
   const cadastresFeatureCollection = {
     type: 'FeatureCollection',
     features: []
   };
 
-  for (let feature of featureCollection.features) {
-    switch (feature.properties.source) {
-      case 'selection_utilisateur':
-        selectionsFeatureCollection.features.push(feature);
-        break;
-      case 'cadastre':
-        cadastresFeatureCollection.features.push(feature);
-        break;
-    }
-  }
+  const selectionsLineFeatureCollection = {
+    type: 'FeatureCollection',
+    features: []
+  };
+
+  const selectionsPolygonFeatureCollection = {
+    type: 'FeatureCollection',
+    features: []
+  };
+
+  const selectionsPointFeatureCollection = {
+    type: 'FeatureCollection',
+    features: []
+  };
 
   const polygonSelectionFill = {
     'fill-color': '#EC3323',
@@ -42,6 +42,15 @@ const MapReader = ({ featureCollection }) => {
     'line-width': 4
   };
 
+  const lineStringSelectionLine = {
+    'line-color': 'rgba(55, 42, 127, 1.00)',
+    'line-width': 3
+  };
+
+  const pointSelectionFill = {
+    'circle-color': '#EC3323'
+  };
+
   const polygonCadastresFill = {
     'fill-color': '#9CA090',
     'fill-opacity': 0.5
@@ -53,6 +62,27 @@ const MapReader = ({ featureCollection }) => {
     'line-dasharray': [1, 1]
   };
 
+  for (let feature of featureCollection.features) {
+    switch (feature.properties.source) {
+      case 'selection_utilisateur':
+        switch (feature.geometry.type) {
+          case 'LineString':
+            selectionsLineFeatureCollection.features.push(feature);
+            break;
+          case 'Polygon':
+            selectionsPolygonFeatureCollection.features.push(feature);
+            break;
+          case 'Point':
+            selectionsPointFeatureCollection.features.push(feature);
+            break;
+        }
+        break;
+      case 'cadastre':
+        cadastresFeatureCollection.features.push(feature);
+        break;
+    }
+  }
+
   if (!mapboxgl.supported()) {
     return (
       <p>
@@ -74,10 +104,18 @@ const MapReader = ({ featureCollection }) => {
       }}
     >
       <GeoJSONLayer
-        data={selectionsFeatureCollection}
+        data={selectionsPolygonFeatureCollection}
         fillPaint={polygonSelectionFill}
         linePaint={polygonSelectionLine}
       />
+      <GeoJSONLayer
+        data={selectionsLineFeatureCollection}
+        linePaint={lineStringSelectionLine}
+      />
+      <GeoJSONLayer
+        data={selectionsPointFeatureCollection}
+        circlePaint={pointSelectionFill}
+      />
       <GeoJSONLayer
         data={cadastresFeatureCollection}
         fillPaint={polygonCadastresFill}

app/javascript/loaders/MapEditor.js

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