Refactor Map Reader|Editor to handle events from geo areas list
This commit is contained in:
Paul Chavard
parent
95d61c85e1
commit
d9f7d10425
4 changed files with 259 additions and 107 deletions
|
|
@ -1,69 +1,102 @@
|
|||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import React, { useState, useCallback, useRef } from 'react';
|
||||
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 SwitchMapStyle from './SwitchMapStyle';
|
||||
import SearchInput from './SearchInput';
|
||||
import { getJSON, ajax } from '@utils';
|
||||
import { gpx, kml } from '@tmcw/togeojson/dist/togeojson.es.js';
|
||||
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 { polygonCadastresFill, polygonCadastresLine } from './utils';
|
||||
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
|
||||
|
||||
import { getJSON, ajax, fire } from '@utils';
|
||||
|
||||
import SwitchMapStyle from './SwitchMapStyle';
|
||||
import { getMapStyle } from '../MapStyles';
|
||||
|
||||
import SearchInput from './SearchInput';
|
||||
import { polygonCadastresFill, polygonCadastresLine } from './utils';
|
||||
import {
|
||||
noop,
|
||||
filterFeatureCollection,
|
||||
fitBounds,
|
||||
generateId,
|
||||
useEvent,
|
||||
findFeature
|
||||
} from '../shared/map';
|
||||
|
||||
const Map = ReactMapboxGl({});
|
||||
|
||||
function filterFeatureCollection(featureCollection, source) {
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: featureCollection.features.filter(
|
||||
(feature) => feature.properties.source === source
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function MapEditor({ featureCollection, url, preview, hasCadastres }) {
|
||||
const drawControl = useRef(null);
|
||||
const [currentMap, setCurrentMap] = useState(null);
|
||||
|
||||
const [style, setStyle] = useState('ortho');
|
||||
const [coords, setCoords] = useState([1.7, 46.9]);
|
||||
const [zoom, setZoom] = useState([5]);
|
||||
const [currentMap, setCurrentMap] = useState({});
|
||||
const [bbox, setBbox] = useState(featureCollection.bbox);
|
||||
const [importInputs, setImportInputs] = useState([]);
|
||||
let mapStyle = style === 'ortho' ? ortho : vector;
|
||||
const [cadastresFeatureCollection, setCadastresFeatureCollection] = useState(
|
||||
filterFeatureCollection(featureCollection, 'cadastre')
|
||||
);
|
||||
const mapStyle = getMapStyle(style, hasCadastres);
|
||||
|
||||
if (hasCadastres) {
|
||||
mapStyle = style === 'ortho' ? orthoCadastre : vectorCadastre;
|
||||
}
|
||||
|
||||
const cadastresFeatureCollection = filterFeatureCollection(
|
||||
featureCollection,
|
||||
'cadastre'
|
||||
const onFeatureFocus = useCallback(
|
||||
({ detail }) => {
|
||||
const { id } = detail;
|
||||
const featureCollection = drawControl.current.draw.getAll();
|
||||
const feature = findFeature(featureCollection, id);
|
||||
if (feature) {
|
||||
fitBounds(currentMap, feature);
|
||||
}
|
||||
},
|
||||
[currentMap, drawControl.current]
|
||||
);
|
||||
|
||||
function updateFeaturesList(features) {
|
||||
const cadastres = features.find(
|
||||
({ geometry }) => geometry.type === 'Polygon'
|
||||
const onFeatureUpdate = useCallback(
|
||||
async ({ detail }) => {
|
||||
const { id, properties } = detail;
|
||||
const featureCollection = drawControl.current.draw.getAll();
|
||||
const feature = findFeature(featureCollection, id);
|
||||
|
||||
if (feature) {
|
||||
getJSON(`${url}/${id}`, { feature: { properties } }, 'patch');
|
||||
}
|
||||
},
|
||||
[url, drawControl.current]
|
||||
);
|
||||
|
||||
const updateFeaturesList = useCallback(
|
||||
async (features) => {
|
||||
const cadastres = features.find(
|
||||
({ geometry }) => geometry.type === 'Polygon'
|
||||
);
|
||||
await ajax({
|
||||
url,
|
||||
type: 'get',
|
||||
data: cadastres ? 'cadastres=update' : ''
|
||||
});
|
||||
fire(document, 'ds:page:update');
|
||||
},
|
||||
[url]
|
||||
);
|
||||
|
||||
const onCadastresUpdate = useCallback(({ detail }) => {
|
||||
setCadastresFeatureCollection(
|
||||
filterFeatureCollection(detail.featureCollection, 'cadastre')
|
||||
);
|
||||
ajax({ url, type: 'get', data: cadastres ? 'cadastres=update' : '' });
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEvent('map:feature:focus', onFeatureFocus);
|
||||
useEvent('map:feature:update', onFeatureUpdate);
|
||||
useEvent('cadastres:update', onCadastresUpdate);
|
||||
|
||||
function setFeatureId(lid, feature) {
|
||||
const draw = drawControl.current.draw;
|
||||
draw.setFeatureProperty(lid, 'id', feature.properties.id);
|
||||
}
|
||||
|
||||
const generateId = () => Math.random().toString(20).substr(2, 6);
|
||||
|
||||
const updateImportInputs = (inputs, inputId) => {
|
||||
function updateImportInputs(inputs, inputId) {
|
||||
const updatedInputs = inputs.filter((input) => input.id !== inputId);
|
||||
setImportInputs(updatedInputs);
|
||||
};
|
||||
}
|
||||
|
||||
async function onDrawCreate({ features }) {
|
||||
for (const feature of features) {
|
||||
|
|
@ -92,23 +125,13 @@ function MapEditor({ featureCollection, url, preview, hasCadastres }) {
|
|||
updateFeaturesList(features);
|
||||
}
|
||||
|
||||
const onMapLoad = (map) => {
|
||||
function onMapLoad(map) {
|
||||
setCurrentMap(map);
|
||||
|
||||
drawControl.current.draw.set(
|
||||
filterFeatureCollection(featureCollection, 'selection_utilisateur')
|
||||
);
|
||||
};
|
||||
|
||||
const onCadastresUpdate = (evt) => {
|
||||
if (currentMap) {
|
||||
currentMap
|
||||
.getSource('cadastres-layer')
|
||||
.setData(
|
||||
filterFeatureCollection(evt.detail.featureCollection, 'cadastre')
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const onFileImport = (e, inputId) => {
|
||||
const isGpxFile = e.target.files[0].name.includes('.gpx');
|
||||
|
|
@ -190,11 +213,6 @@ function MapEditor({ featureCollection, url, preview, hasCadastres }) {
|
|||
updateImportInputs(inputs, inputId);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
addEventListener('cadastres:update', onCadastresUpdate);
|
||||
return () => removeEventListener('cadastres:update', onCadastresUpdate);
|
||||
});
|
||||
|
||||
if (!mapboxgl.supported()) {
|
||||
return (
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,100 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useCallback, useMemo } 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 mapboxgl, { Popup } from 'mapbox-gl';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import SwitchMapStyle from './SwitchMapStyle';
|
||||
import { getMapStyle } from '../MapStyles';
|
||||
|
||||
import {
|
||||
filterFeatureCollection,
|
||||
filterFeatureCollectionByGeometryType,
|
||||
useEvent,
|
||||
findFeature,
|
||||
fitBounds,
|
||||
getCenter
|
||||
} from '../shared/map';
|
||||
|
||||
const Map = ReactMapboxGl({});
|
||||
|
||||
const MapReader = ({ featureCollection }) => {
|
||||
const [currentMap, setCurrentMap] = useState(null);
|
||||
const [style, setStyle] = useState('ortho');
|
||||
const hasCadastres = featureCollection.features.find(
|
||||
(feature) => feature.properties.source === 'cadastre'
|
||||
const cadastresFeatureCollection = useMemo(
|
||||
() => filterFeatureCollection(featureCollection, 'cadastre'),
|
||||
[featureCollection]
|
||||
);
|
||||
const selectionsUtilisateurFeatureCollection = useMemo(
|
||||
() => filterFeatureCollection(featureCollection, 'selection_utilisateur'),
|
||||
[featureCollection]
|
||||
);
|
||||
const selectionsLineFeatureCollection = useMemo(
|
||||
() =>
|
||||
filterFeatureCollectionByGeometryType(
|
||||
selectionsUtilisateurFeatureCollection,
|
||||
'LineString'
|
||||
),
|
||||
[selectionsUtilisateurFeatureCollection]
|
||||
);
|
||||
const selectionsPolygonFeatureCollection = useMemo(
|
||||
() =>
|
||||
filterFeatureCollectionByGeometryType(
|
||||
selectionsUtilisateurFeatureCollection,
|
||||
'Polygon'
|
||||
),
|
||||
[selectionsUtilisateurFeatureCollection]
|
||||
);
|
||||
const selectionsPointFeatureCollection = useMemo(
|
||||
() =>
|
||||
filterFeatureCollectionByGeometryType(
|
||||
selectionsUtilisateurFeatureCollection,
|
||||
'Point'
|
||||
),
|
||||
[selectionsUtilisateurFeatureCollection]
|
||||
);
|
||||
const mapStyle = useMemo(
|
||||
() => getMapStyle(style, cadastresFeatureCollection.length),
|
||||
[style, cadastresFeatureCollection]
|
||||
);
|
||||
const popup = useMemo(
|
||||
() =>
|
||||
new Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false
|
||||
})
|
||||
);
|
||||
let mapStyle = style === 'ortho' ? ortho : vector;
|
||||
|
||||
if (hasCadastres) {
|
||||
mapStyle = style === 'ortho' ? orthoCadastre : vectorCadastre;
|
||||
}
|
||||
const onMouseEnter = useCallback(
|
||||
(event) => {
|
||||
const feature = event.features[0];
|
||||
if (feature.properties && feature.properties.description) {
|
||||
const coordinates = getCenter(feature.geometry, event.lngLat);
|
||||
const description = feature.properties.description;
|
||||
currentMap.getCanvas().style.cursor = 'pointer';
|
||||
popup.setLngLat(coordinates).setHTML(description).addTo(currentMap);
|
||||
} else {
|
||||
popup.remove();
|
||||
}
|
||||
},
|
||||
[currentMap, popup]
|
||||
);
|
||||
|
||||
const onMouseLeave = useCallback(() => {
|
||||
currentMap.getCanvas().style.cursor = '';
|
||||
popup.remove();
|
||||
}, [currentMap, popup]);
|
||||
|
||||
const onFeatureFocus = useCallback(
|
||||
({ detail }) => {
|
||||
const feature = findFeature(featureCollection, detail.id);
|
||||
if (feature) {
|
||||
fitBounds(currentMap, feature);
|
||||
}
|
||||
},
|
||||
[currentMap, featureCollection]
|
||||
);
|
||||
|
||||
useEvent('map:feature:focus', onFeatureFocus);
|
||||
|
||||
const [a1, a2, b1, b2] = featureCollection.bbox;
|
||||
const boundData = [
|
||||
|
|
@ -27,26 +102,6 @@ const MapReader = ({ featureCollection }) => {
|
|||
[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
|
||||
|
|
@ -77,25 +132,8 @@ 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;
|
||||
}
|
||||
function onMapLoad(map) {
|
||||
setCurrentMap(map);
|
||||
}
|
||||
|
||||
if (!mapboxgl.supported()) {
|
||||
|
|
@ -110,6 +148,7 @@ const MapReader = ({ featureCollection }) => {
|
|||
|
||||
return (
|
||||
<Map
|
||||
onStyleLoad={(map) => onMapLoad(map)}
|
||||
fitBounds={boundData}
|
||||
fitBoundsOptions={{ padding: 100 }}
|
||||
style={mapStyle}
|
||||
|
|
@ -122,14 +161,20 @@ const MapReader = ({ featureCollection }) => {
|
|||
data={selectionsPolygonFeatureCollection}
|
||||
fillPaint={polygonSelectionFill}
|
||||
linePaint={polygonSelectionLine}
|
||||
fillOnMouseEnter={onMouseEnter}
|
||||
fillOnMouseLeave={onMouseLeave}
|
||||
/>
|
||||
<GeoJSONLayer
|
||||
data={selectionsLineFeatureCollection}
|
||||
linePaint={lineStringSelectionLine}
|
||||
lineOnMouseEnter={onMouseEnter}
|
||||
lineOnMouseLeave={onMouseLeave}
|
||||
/>
|
||||
<GeoJSONLayer
|
||||
data={selectionsPointFeatureCollection}
|
||||
circlePaint={pointSelectionFill}
|
||||
circleOnMouseEnter={onMouseEnter}
|
||||
circleOnMouseLeave={onMouseLeave}
|
||||
/>
|
||||
<GeoJSONLayer
|
||||
data={cadastresFeatureCollection}
|
||||
|
|
|
|||
11
app/javascript/components/MapStyles/index.js
Normal file
11
app/javascript/components/MapStyles/index.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import ortho from './ortho.json';
|
||||
import orthoCadastre from './orthoCadastre.json';
|
||||
import vector from './vector.json';
|
||||
import vectorCadastre from './vectorCadastre.json';
|
||||
|
||||
export function getMapStyle(style, hasCadastres) {
|
||||
if (hasCadastres) {
|
||||
return style === 'ortho' ? orthoCadastre : vectorCadastre;
|
||||
}
|
||||
return style === 'ortho' ? ortho : vector;
|
||||
}
|
||||
78
app/javascript/components/shared/map.js
Normal file
78
app/javascript/components/shared/map.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { LngLatBounds } from 'mapbox-gl';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export function getBounds(geometry) {
|
||||
const bbox = new LngLatBounds();
|
||||
|
||||
if (geometry.type === 'Point') {
|
||||
return [geometry.coordinates, geometry.coordinates];
|
||||
} else if (geometry.type === 'LineString') {
|
||||
for (const coordinate of geometry.coordinates) {
|
||||
bbox.extend(coordinate);
|
||||
}
|
||||
} else {
|
||||
for (const coordinate of geometry.coordinates[0]) {
|
||||
bbox.extend(coordinate);
|
||||
}
|
||||
}
|
||||
return bbox;
|
||||
}
|
||||
|
||||
export function fitBounds(map, feature) {
|
||||
if (map) {
|
||||
map.fitBounds(getBounds(feature.geometry), { padding: 100 });
|
||||
}
|
||||
}
|
||||
|
||||
export function findFeature(featureCollection, id) {
|
||||
return featureCollection.features.find(
|
||||
(feature) => feature.properties.id === id
|
||||
);
|
||||
}
|
||||
|
||||
export function filterFeatureCollection(featureCollection, source) {
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: featureCollection.features.filter(
|
||||
(feature) => feature.properties.source === source
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export function filterFeatureCollectionByGeometryType(featureCollection, type) {
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: featureCollection.features.filter(
|
||||
(feature) => feature.geometry.type === type
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export function noop() {}
|
||||
|
||||
export function generateId() {
|
||||
return Math.random().toString(20).substr(2, 6);
|
||||
}
|
||||
|
||||
export function useEvent(eventName, callback) {
|
||||
return useEffect(() => {
|
||||
addEventListener(eventName, callback);
|
||||
return () => removeEventListener(eventName, callback);
|
||||
}, [eventName, callback]);
|
||||
}
|
||||
|
||||
export function getCenter(geometry, lngLat) {
|
||||
const bbox = new LngLatBounds();
|
||||
|
||||
switch (geometry.type) {
|
||||
case 'Point':
|
||||
return [...geometry.coordinates];
|
||||
case 'LineString':
|
||||
return [lngLat.lng, lngLat.lat];
|
||||
default:
|
||||
for (const coordinate of geometry.coordinates[0]) {
|
||||
bbox.extend(coordinate);
|
||||
}
|
||||
return bbox.getCenter();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue