diff --git a/app/javascript/components/MapEditor/SwitchMapStyle.js b/app/javascript/components/MapEditor/SwitchMapStyle.js index 4a9cf3eff..355b0c00a 100644 --- a/app/javascript/components/MapEditor/SwitchMapStyle.js +++ b/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 }) => {
{style}
- ); }; diff --git a/app/javascript/components/MapEditor/MapEditor.js b/app/javascript/components/MapEditor/index.js similarity index 100% rename from app/javascript/components/MapEditor/MapEditor.js rename to app/javascript/components/MapEditor/index.js diff --git a/app/javascript/components/MapReader.js b/app/javascript/components/MapReader/index.js similarity index 66% rename from app/javascript/components/MapReader.js rename to app/javascript/components/MapReader/index.js index 2e3c16fa5..25fa5380b 100644 --- a/app/javascript/components/MapReader.js +++ b/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 (

@@ -74,10 +104,18 @@ const MapReader = ({ featureCollection }) => { }} > + + import('../components/MapEditor/MapEditor')); +export default Loadable(() => import('../components/MapEditor'));