mirror of
https://gitlab.aliens-lyon.fr/encartes/web-interface.git
synced 2026-03-18 23:21:05 +01:00
Leaflet V3+ gère mal le onClick
This commit is contained in:
Maxime JUST
parent
49880146da
commit
08779cd73d
@ -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>
|
||||
</>
|
||||
|
||||
123
src/Map.js
123
src/Map.js
@ -1,7 +1,7 @@
|
||||
import { MapContainer } from 'react-leaflet/MapContainer';
|
||||
import { Marker } from 'react-leaflet/Marker';
|
||||
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 { LayerGroup } from 'react-leaflet/LayerGroup'
|
||||
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 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];
|
||||
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,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);
|
||||
let polygons = [];
|
||||
for (const k in request)
|
||||
{
|
||||
for (const k in request) {
|
||||
polygons = [...polygons, ((request[k]).map((y) => {
|
||||
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) => {
|
||||
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");}}>
|
||||
YAY
|
||||
</li>
|
||||
<li>
|
||||
uéuéué
|
||||
</li>
|
||||
</Popup>
|
||||
</Marker>
|
||||
<Tooltip>{k}</Tooltip>
|
||||
<Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: stairs, iconSize: [40, 40] })}>
|
||||
<Popup>
|
||||
<li class="" onClick={() => { console.log("oui"); }}>
|
||||
YAY
|
||||
</li>
|
||||
<li>
|
||||
uéuéué
|
||||
</li>
|
||||
</Popup>
|
||||
</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>
|
||||
<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)}>
|
||||
<Tooltip>{k}</Tooltip>
|
||||
else {
|
||||
return <Polygon positions={x} key={k + color} color={color} eventHandlers={{
|
||||
click: () => {
|
||||
cb(k);
|
||||
}
|
||||
}}>
|
||||
<Tooltip>{k}</Tooltip>
|
||||
</Polygon>
|
||||
}
|
||||
})];
|
||||
@ -125,21 +110,19 @@ function list_polygons(request, center, ratio, cb, selectedRoom)
|
||||
}
|
||||
|
||||
|
||||
function buildPols(request, cb, selectedRoom)
|
||||
{
|
||||
const minMaxXY = min_max(request);
|
||||
const minX = minMaxXY[0];
|
||||
const maxX = minMaxXY[1];
|
||||
const minY = minMaxXY[2];
|
||||
const maxY = minMaxXY[3];
|
||||
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 polygons = list_polygons(request, center, ratio, cb, selectedRoom);
|
||||
return polygons;
|
||||
function buildPols(request, cb, selectedRoom) {
|
||||
const minMaxXY = min_max(request);
|
||||
const minX = minMaxXY[0];
|
||||
const maxX = minMaxXY[1];
|
||||
const minY = minMaxXY[2];
|
||||
const maxY = minMaxXY[3];
|
||||
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 polygons = list_polygons(request, center, ratio, 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
|
||||
@ -149,7 +132,7 @@ function Map({callbackRoomSelected, selectedRoom})
|
||||
}, [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}
|
||||
</MapContainer>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user