114 lines
2.5 KiB
JavaScript
114 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import ReactMapboxGl, { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
|
|
import { LngLatBounds } from 'mapbox-gl';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const Map = ReactMapboxGl({});
|
|
|
|
const MapReader = ({ geoData }) => {
|
|
let [selectionCollection, cadastresCollection] = [[], []];
|
|
|
|
for (let selection of geoData.selection.coordinates) {
|
|
selectionCollection.push({
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Polygon',
|
|
coordinates: selection
|
|
}
|
|
});
|
|
}
|
|
|
|
for (let cadastre of geoData.cadastres) {
|
|
cadastresCollection.push({
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Polygon',
|
|
coordinates: cadastre.geometry.coordinates[0]
|
|
}
|
|
});
|
|
}
|
|
|
|
const selectionData = {
|
|
type: 'geojson',
|
|
data: {
|
|
type: 'FeatureCollection',
|
|
features: selectionCollection
|
|
}
|
|
};
|
|
|
|
const cadastresData = {
|
|
type: 'geojson',
|
|
data: {
|
|
type: 'FeatureCollection',
|
|
features: cadastresCollection
|
|
}
|
|
};
|
|
|
|
const polygonSelectionFill = {
|
|
'fill-color': '#EC3323',
|
|
'fill-opacity': 0.5
|
|
};
|
|
|
|
const polygonSelectionLine = {
|
|
'line-color': 'rgba(255, 0, 0, 1)',
|
|
'line-width': 4
|
|
};
|
|
|
|
const polygonCadastresFill = {
|
|
'fill-color': '#9CA090',
|
|
'fill-opacity': 0.5
|
|
};
|
|
|
|
const polygonCadastresLine = {
|
|
'line-color': 'rgba(156, 160, 144, 255)',
|
|
'line-width': 2,
|
|
'line-dasharray': [1, 1]
|
|
};
|
|
|
|
let bounds = new LngLatBounds();
|
|
|
|
for (let selection of selectionCollection) {
|
|
for (let coordinate of selection.geometry.coordinates[0]) {
|
|
bounds.extend(coordinate);
|
|
}
|
|
}
|
|
let [swCoords, neCoords] = [
|
|
Object.values(bounds._sw),
|
|
Object.values(bounds._ne)
|
|
];
|
|
const boundData = [swCoords, neCoords];
|
|
|
|
return (
|
|
<Map
|
|
fitBounds={boundData}
|
|
fitBoundsOptions={{ padding: 100 }}
|
|
style="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
|
|
containerStyle={{
|
|
height: '400px',
|
|
width: '100%'
|
|
}}
|
|
>
|
|
<GeoJSONLayer
|
|
data={selectionData.data}
|
|
fillPaint={polygonSelectionFill}
|
|
linePaint={polygonSelectionLine}
|
|
/>
|
|
<GeoJSONLayer
|
|
data={cadastresData.data}
|
|
fillPaint={polygonCadastresFill}
|
|
linePaint={polygonCadastresLine}
|
|
/>
|
|
<ZoomControl />
|
|
</Map>
|
|
);
|
|
};
|
|
|
|
MapReader.propTypes = {
|
|
geoData: PropTypes.shape({
|
|
position: PropTypes.object,
|
|
selection: PropTypes.object,
|
|
cadastres: PropTypes.array
|
|
})
|
|
};
|
|
|
|
export default MapReader;
|