Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-18 07:01: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 { LayerGroup } from 'react-leaflet/LayerGroup'
import { Tooltip } from 'react-leaflet/Tooltip'
import { useState } from "react";
import React from 'react';
import L from 'leaflet';
import request2 from "./M-GN1-2.json"
@ -45,7 +46,7 @@ function min_max(request)
return [minX, maxX, minY, maxY];
}
function list_polygons(request, center, ratio, ind)
function list_polygons(request, center, ratio, ind, cb)
{
let polygons = [];
//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];
}
})
})).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>})];
}
return polygons;
}
function layers_list(requestList)
function layers_list(requestList, cb)
{
let layers = [];
requestList.forEach( (request, ind) =>
@ -87,17 +88,20 @@ function layers_list(requestList)
// console.log((maxY-minY)/2284);
// console.log((maxX-minX)/135);
// console.log(ratio);
const polygons = list_polygons(request, center, ratio, ind);
layers = [...layers, <LayersControl.BaseLayer checked={ind === 1 ? true : false} name={"Etage "+String(ind+2)} key={ind}><LayerGroup> {polygons} </LayerGroup></LayersControl.BaseLayer>];
const polygons = list_polygons(request, center, ratio, ind, cb);
layers = [...layers, <LayersControl.BaseLayer checked={ind === 1 ? true : false} name={"Floor "+String(ind+2)} key={ind}><LayerGroup> {polygons} </LayerGroup></LayersControl.BaseLayer>];
})
return layers;
}
function Map()
function Map({callbackRoomSelected, selectedRoom})
{
const buildLayers = React.useCallback((request2, request3, request4) => {
return layers_list([request2, request3, request4]);
}, [request2, request3, request4]);
// 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
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);
return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>