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

71
src/Map.js
View File

@ -14,60 +14,46 @@ import request2 from "./M-GN1-2.json"
import request3 from "./M-GN1-3.json"
import request4 from "./M-GN1-4.json"
function polygonCenter(polygon)
{
function polygonCenter(polygon) {
let minX = -1;
let minY = -1;
let maxX = -1;
let maxY = -1;
polygon.forEach( (pt) =>
{
if (minX === -1 || minX > pt[0])
{
polygon.forEach((pt) => {
if (minX === -1 || minX > pt[0]) {
minX = pt[0];
}
if (minY === -1 || minY > pt[1])
{
if (minY === -1 || minY > pt[1]) {
minY = pt[1];
}
if (maxY === -1 || maxY < pt[1])
{
if (maxY === -1 || maxY < pt[1]) {
maxY = pt[1];
}
if (maxX === -1 || maxX < pt[0])
{
if (maxX === -1 || maxX < pt[0]) {
maxX = pt[0];
}
})
return [(minX + maxX) / 2, (maxY + minY) / 2];
}
function min_max(request)
{
function min_max(request) {
let minX = -1;
let minY = -1;
let maxX = -1;
let maxY = -1;
for (const k in request)
{
(request[k]).forEach( (po) =>
{
po.forEach( (pt) =>
{
if (minX === -1 || minX > pt[0])
{
for (const k in request) {
(request[k]).forEach((po) => {
po.forEach((pt) => {
if (minX === -1 || minX > pt[0]) {
minX = pt[0];
}
if (minY === -1 || minY > pt[1])
{
if (minY === -1 || minY > pt[1]) {
minY = pt[1];
}
if (maxY === -1 || maxY < pt[1])
{
if (maxY === -1 || maxY < pt[1]) {
maxY = pt[1];
}
if (maxX === -1 || maxX < pt[0])
{
if (maxX === -1 || maxX < pt[0]) {
maxX = pt[0];
}
})
@ -77,12 +63,10 @@ function min_max(request)
}
function list_polygons(request, center, ratio, cb, selectedRoom)
{
function list_polygons(request, center, ratio, cb, selectedRoom) {
console.log(selectedRoom);
let polygons = [];
for (const k in request)
{
for (const k in request) {
polygons = [...polygons, ((request[k]).map((y) => {
return y.map((z) => {
@ -90,13 +74,12 @@ function list_polygons(request, center, ratio, cb, selectedRoom)
})
})).map((x) => {
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)}>
<Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: stairs, iconSize: [40, 40] })}>
<Popup>
<li onClick={() => {console.log("oui");}}>
<li class="" onClick={() => { console.log("oui"); }}>
YAY
</li>
<li>
@ -106,16 +89,18 @@ function list_polygons(request, center, ratio, cb, selectedRoom)
</Marker>
</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)}>
<Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: lift, iconSize: [20, 20] })}></Marker>
</Polygon>
}
else
{
return <Polygon positions={x} key={k + color} color={color} onClick={() => cb(k)}>
else {
return <Polygon positions={x} key={k + color} color={color} eventHandlers={{
click: () => {
cb(k);
}
}}>
<Tooltip>{k}</Tooltip>
</Polygon>
}
@ -125,8 +110,7 @@ function list_polygons(request, center, ratio, cb, selectedRoom)
}
function buildPols(request, cb, selectedRoom)
{
function buildPols(request, cb, selectedRoom) {
const minMaxXY = min_max(request);
const minX = minMaxXY[0];
const maxX = minMaxXY[1];
@ -138,8 +122,7 @@ function buildPols(request, cb, selectedRoom)
return polygons;
}
function Map({callbackRoomSelected, selectedRoom})
{
function Map({ callbackRoomSelected, selectedRoom }) {
// 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
// is selected