demarches-normaliennes/app/javascript/components/MapReader/index.js

167 lines
4.1 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
import ReactMapboxGl, { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
import mapboxgl from 'mapbox-gl';
import SwitchMapStyle from './SwitchMapStyle';
import ortho from '../MapStyles/ortho.json';
import orthoCadastre from '../MapStyles/orthoCadastre.json';
import vector from '../MapStyles/vector.json';
import vectorCadastre from '../MapStyles/vectorCadastre.json';
import PropTypes from 'prop-types';
const Map = ReactMapboxGl({});
const MapReader = ({ featureCollection }) => {
const [style, setStyle] = useState('ortho');
const hasCadastres = featureCollection.features.find(
(feature) => feature.properties.source === 'cadastre'
);
let mapStyle = style === 'ortho' ? ortho : vector;
if (hasCadastres) {
mapStyle = style === 'ortho' ? orthoCadastre : vectorCadastre;
}
const [a1, a2, b1, b2] = featureCollection.bbox;
const boundData = [
[a1, a2],
[b1, b2]
];
const cadastresFeatureCollection = {
type: 'FeatureCollection',
features: []
};
const selectionsLineFeatureCollection = {
type: 'FeatureCollection',
features: []
};
const selectionsPolygonFeatureCollection = {
type: 'FeatureCollection',
features: []
};
const selectionsPointFeatureCollection = {
type: 'FeatureCollection',
features: []
};
const polygonSelectionFill = {
'fill-color': '#EC3323',
'fill-opacity': 0.5
};
const polygonSelectionLine = {
'line-color': 'rgba(255, 0, 0, 1)',
'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': '#FAD859',
'fill-opacity': 0.5
};
const polygonCadastresLine = {
'line-color': 'rgba(156, 160, 144, 255)',
'line-width': 2,
'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>
Nous ne pouvons pas afficher la carte car elle est imcompatible avec
votre navigateur. Nous vous conseillons de le mettre à jour ou utiliser
les dernières versions de Chrome, Firefox ou Safari
</p>
);
}
return (
<Map
fitBounds={boundData}
fitBoundsOptions={{ padding: 100 }}
style={mapStyle}
containerStyle={{
height: '400px',
width: '100%'
}}
>
<GeoJSONLayer
data={selectionsPolygonFeatureCollection}
fillPaint={polygonSelectionFill}
linePaint={polygonSelectionLine}
/>
<GeoJSONLayer
data={selectionsLineFeatureCollection}
linePaint={lineStringSelectionLine}
/>
<GeoJSONLayer
data={selectionsPointFeatureCollection}
circlePaint={pointSelectionFill}
/>
<GeoJSONLayer
data={cadastresFeatureCollection}
fillPaint={polygonCadastresFill}
linePaint={polygonCadastresLine}
/>
<div
className="style-switch"
style={{
position: 'absolute',
bottom: 0,
left: 0
}}
onClick={() =>
style === 'ortho' ? setStyle('vector') : setStyle('ortho')
}
>
<SwitchMapStyle isVector={style === 'vector' ? true : false} />
</div>
<ZoomControl />
</Map>
);
};
MapReader.propTypes = {
featureCollection: PropTypes.shape({
type: PropTypes.string,
bbox: PropTypes.array,
features: PropTypes.array
})
};
export default MapReader;