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

map Callback

Browse Source
This commit is contained in:
Gabriel Dehame 2023-01-10 16:59:37 +01:00
parent fe3853a8d7
commit f7a2c2d483
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/Map.js
View File

@ -5,6 +5,7 @@ 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'
import { useState } from "react";
import React from 'react'; import React from 'react';
import L from 'leaflet'; import L from 'leaflet';
import request2 from "./M-GN1-2.json" import request2 from "./M-GN1-2.json"
@ -45,7 +46,7 @@ function min_max(request)
return [minX, maxX, minY, maxY]; return [minX, maxX, minY, maxY];
} }
function list_polygons(request, center, ratio, ind) function list_polygons(request, center, ratio, ind, cb)
{ {
let polygons = []; let polygons = [];
//let tarace = 0; //let tarace = 0;
@ -66,13 +67,13 @@ function list_polygons(request, center, ratio, ind)
return [(z[1]-center[1])/25, (z[0]-center[0])/25]; return [(z[1]-center[1])/25, (z[0]-center[0])/25];
} }
}) })
})).map((x) => {return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}}><Popup>Popup</Popup></Polygon>})]; })).map((x) => {return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}} onClick={() => cb(k)}><Tooltip>{k}</Tooltip></Polygon>})];
// })).map((x) => {tarace = tarace+1; return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}}><Tooltip permanent direction={tarace % 2 === 0 ? "bottom" : "top"}>{k}</Tooltip><Popup>Popup</Popup></Polygon>})]; // })).map((x) => {tarace = tarace+1; return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}}><Tooltip permanent direction={tarace % 2 === 0 ? "bottom" : "top"}>{k}</Tooltip><Popup>Popup</Popup></Polygon>})];
} }
return polygons; return polygons;
} }
function layers_list(requestList) function layers_list(requestList, cb)
{ {
let layers = []; let layers = [];
requestList.forEach( (request, ind) => requestList.forEach( (request, ind) =>
@ -87,17 +88,20 @@ function layers_list(requestList)
// console.log((maxY-minY)/2284); // console.log((maxY-minY)/2284);
// console.log((maxX-minX)/135); // console.log((maxX-minX)/135);
// console.log(ratio); // console.log(ratio);
const polygons = list_polygons(request, center, ratio, ind); const polygons = list_polygons(request, center, ratio, ind, cb);
layers = [...layers, <LayersControl.BaseLayer checked={ind === 1 ? true : false} name={"Etage "+String(ind+2)} key={ind}><LayerGroup> {polygons} </LayerGroup></LayersControl.BaseLayer>]; layers = [...layers, <LayersControl.BaseLayer checked={ind === 1 ? true : false} name={"Floor "+String(ind+2)} key={ind}><LayerGroup> {polygons} </LayerGroup></LayersControl.BaseLayer>];
}) })
return layers; return layers;
} }
function Map() function Map({callbackRoomSelected, selectedRoom})
{ {
const buildLayers = React.useCallback((request2, request3, request4) => { // When the user selects a room on the map, call callbackRoomSelected.
return layers_list([request2, request3, request4]); // The room that is currently selected is selectedRoom. It is null if no room
}, [request2, request3, request4]); // is selected
const buildLayers = React.useCallback((request2, request3, request4, callbackRoomSelected) => {
return layers_list([request2, request3, request4], callbackRoomSelected);
}, [request2, request3, request4, callbackRoomSelected]);
const layers = buildLayers(request2, request3, request4); const layers = buildLayers(request2, request3, request4);
return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}> return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>