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>
</> </>

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 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,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); 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) => {
@ -90,13 +74,12 @@ function list_polygons(request, center, ratio, cb, selectedRoom)
}) })
})).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>
@ -106,16 +89,18 @@ function list_polygons(request, center, ratio, cb, selectedRoom)
</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: () => {
cb(k);
}
}}>
<Tooltip>{k}</Tooltip> <Tooltip>{k}</Tooltip>
</Polygon> </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 minMaxXY = min_max(request);
const minX = minMaxXY[0]; const minX = minMaxXY[0];
const maxX = minMaxXY[1]; const maxX = minMaxXY[1];
@ -138,8 +122,7 @@ function buildPols(request, 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