Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-18 23:21:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Leaflet V3+ gère mal le onClick

Browse Source
This commit is contained in:
Maxime JUST 2023-01-22 14:40:04 +01:00
parent 49880146da
commit 08779cd73d
2 changed files with 54 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -84,10 +84,6 @@ function TopBar() {
</> </>
} }
function handleRoomSelected(id)
{
alert('AA')
}
export default function App() { export default function App() {
const [selectedRoom, setSelectedRoom] = React.useState(null); const [selectedRoom, setSelectedRoom] = React.useState(null);
@ -95,7 +91,7 @@ export default function App() {
return <> return <>
<TopBar /> <TopBar />
<div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}> <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
<Map callbackRoomSelected={handleRoomSelected} selectedRoom={selectedRoom}/> <Map callbackRoomSelected={setSelectedRoom} selectedRoom={selectedRoom}/>
<RoomResearch callbackRoomSelected={setSelectedRoom}/> <RoomResearch callbackRoomSelected={setSelectedRoom}/>
</div> </div>
</> </>

123
src/Map.js
View File

@ -1,7 +1,7 @@
import { MapContainer } from 'react-leaflet/MapContainer'; import { MapContainer } from 'react-leaflet/MapContainer';
import { Marker } from 'react-leaflet/Marker'; import { Marker } from 'react-leaflet/Marker';
import { Popup } from 'react-leaflet/Popup'; import { Popup } from 'react-leaflet/Popup';
import {Polygon} from 'react-leaflet/Polygon'; import { Polygon } from 'react-leaflet/Polygon';
import { LayersControl } from 'react-leaflet/LayersControl' import { LayersControl } from 'react-leaflet/LayersControl'
import { LayerGroup } from 'react-leaflet/LayerGroup' import { LayerGroup } from 'react-leaflet/LayerGroup'
import { Tooltip } from 'react-leaflet/Tooltip' import { Tooltip } from 'react-leaflet/Tooltip'
@ -14,60 +14,46 @@ import request2 from "./M-GN1-2.json"
import request3 from "./M-GN1-3.json" import request3 from "./M-GN1-3.json"
import request4 from "./M-GN1-4.json" import request4 from "./M-GN1-4.json"
function polygonCenter(polygon) function polygonCenter(polygon) {
{
let minX = -1; let minX = -1;
let minY = -1; let minY = -1;
let maxX = -1; let maxX = -1;
let maxY = -1; let maxY = -1;
polygon.forEach( (pt) => polygon.forEach((pt) => {
{ if (minX === -1 || minX > pt[0]) {
if (minX === -1 || minX > pt[0])
{
minX = pt[0]; minX = pt[0];
} }
if (minY === -1 || minY > pt[1]) if (minY === -1 || minY > pt[1]) {
{
minY = pt[1]; minY = pt[1];
} }
if (maxY === -1 || maxY < pt[1]) if (maxY === -1 || maxY < pt[1]) {
{
maxY = pt[1]; maxY = pt[1];
} }
if (maxX === -1 || maxX < pt[0]) if (maxX === -1 || maxX < pt[0]) {
{
maxX = pt[0]; maxX = pt[0];
} }
}) })
return [(minX + maxX)/2, (maxY + minY)/2]; return [(minX + maxX) / 2, (maxY + minY) / 2];
} }
function min_max(request) function min_max(request) {
{
let minX = -1; let minX = -1;
let minY = -1; let minY = -1;
let maxX = -1; let maxX = -1;
let maxY = -1; let maxY = -1;
for (const k in request) for (const k in request) {
{ (request[k]).forEach((po) => {
(request[k]).forEach( (po) => po.forEach((pt) => {
{ if (minX === -1 || minX > pt[0]) {
po.forEach( (pt) =>
{
if (minX === -1 || minX > pt[0])
{
minX = pt[0]; minX = pt[0];
} }
if (minY === -1 || minY > pt[1]) if (minY === -1 || minY > pt[1]) {
{
minY = pt[1]; minY = pt[1];
} }
if (maxY === -1 || maxY < pt[1]) if (maxY === -1 || maxY < pt[1]) {
{
maxY = pt[1]; maxY = pt[1];
} }
if (maxX === -1 || maxX < pt[0]) if (maxX === -1 || maxX < pt[0]) {
{
maxX = pt[0]; maxX = pt[0];
} }
}) })
@ -77,46 +63,45 @@ function min_max(request)
} }
function list_polygons(request, center, ratio, cb, selectedRoom) function list_polygons(request, center, ratio, cb, selectedRoom) {
{
console.log(selectedRoom); console.log(selectedRoom);
let polygons = []; let polygons = [];
for (const k in request) for (const k in request) {
{
polygons = [...polygons, ((request[k]).map((y) => { polygons = [...polygons, ((request[k]).map((y) => {
return y.map((z) => { return y.map((z) => {
return [-(z[1]-center[1])/25, (z[0]-center[0])/25]; return [-(z[1] - center[1]) / 25, (z[0] - center[0]) / 25];
}) })
})).map((x) => { })).map((x) => {
const color = selectedRoom === k ? 'red' : 'grey'; const color = selectedRoom === k ? 'red' : 'grey';
if (k === "salle-M-GN1-X-aa" || k === "salle-M-GN1-X-ab" || k === "salle-M-GN1-X-ac" || k === "salle-M-GN1-X-ad") if (k === "salle-M-GN1-X-aa" || k === "salle-M-GN1-X-ab" || k === "salle-M-GN1-X-ac" || k === "salle-M-GN1-X-ad") {
{
return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}> return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}>
<Tooltip>{k}</Tooltip> <Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({iconUrl: stairs, iconSize: [40,40]})}> <Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: stairs, iconSize: [40, 40] })}>
<Popup> <Popup>
<li onClick={() => {console.log("oui");}}> <li class="" onClick={() => { console.log("oui"); }}>
YAY YAY
</li> </li>
<li> <li>
uéuéué uéuéué
</li> </li>
</Popup> </Popup>
</Marker> </Marker>
</Polygon> </Polygon>
} }
else if (k === "salle-M-GN1-X-ag" || k === "salle-M-GN1-X-ah") else if (k === "salle-M-GN1-X-ag" || k === "salle-M-GN1-X-ah") {
{
return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}> return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}>
<Tooltip>{k}</Tooltip> <Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({iconUrl: lift, iconSize: [20,20]})}></Marker> <Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: lift, iconSize: [20, 20] })}></Marker>
</Polygon> </Polygon>
} }
else else {
{ return <Polygon positions={x} key={k + color} color={color} eventHandlers={{
return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}> click: () => {
<Tooltip>{k}</Tooltip> cb(k);
}
}}>
<Tooltip>{k}</Tooltip>
</Polygon> </Polygon>
} }
})]; })];
@ -125,21 +110,19 @@ function list_polygons(request, center, ratio, cb, selectedRoom)
} }
function buildPols(request, cb, selectedRoom) function buildPols(request, cb, selectedRoom) {
{ const minMaxXY = min_max(request);
const minMaxXY = min_max(request); const minX = minMaxXY[0];
const minX = minMaxXY[0]; const maxX = minMaxXY[1];
const maxX = minMaxXY[1]; const minY = minMaxXY[2];
const minY = minMaxXY[2]; const maxY = minMaxXY[3];
const maxY = minMaxXY[3]; const center = [(maxX + minX) / 2, (maxY + minY) / 2];
const center = [(maxX + minX)/2, (maxY + minY)/2]; const ratio = Math.ceil(Math.max((maxY - minY) / 2284, (maxX - minX) / 135)); //A priori ca devrait être convenable mais là ca ne fonctionne pas, je pense que c'est pck le SVG n'utilise pas des coordonnées et ducoup y'a des trucs bizarre (notamment les étages 3 et 4 n'ont pas du tout la même longueur ni même largeur)
const ratio = Math.ceil(Math.max((maxY-minY)/2284, (maxX-minX)/135)); //A priori ca devrait être convenable mais là ca ne fonctionne pas, je pense que c'est pck le SVG n'utilise pas des coordonnées et ducoup y'a des trucs bizarre (notamment les étages 3 et 4 n'ont pas du tout la même longueur ni même largeur) const polygons = list_polygons(request, center, ratio, cb, selectedRoom);
const polygons = list_polygons(request, center, ratio, cb, selectedRoom); return polygons;
return polygons;
} }
function Map({callbackRoomSelected, selectedRoom}) function Map({ callbackRoomSelected, selectedRoom }) {
{
// When the user selects a room on the map, call callbackRoomSelected. // When the user selects a room on the map, call callbackRoomSelected.
// The room that is currently selected is selectedRoom. It is null if no room // The room that is currently selected is selectedRoom. It is null if no room
// is selected // is selected
@ -149,7 +132,7 @@ function Map({callbackRoomSelected, selectedRoom})
}, [request3, callbackRoomSelected, selectedRoom]); }, [request3, callbackRoomSelected, selectedRoom]);
const polygons = createPolygons(request3, callbackRoomSelected, selectedRoom); const polygons = createPolygons(request3, callbackRoomSelected, selectedRoom);
return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}> return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
{polygons} {polygons}
</MapContainer> </MapContainer>
} }