mirror of
https://gitlab.aliens-lyon.fr/encartes/web-interface.git
synced 2026-03-18 23:21:05 +01:00
Delete Map2.js
This commit is contained in:
Adrien Vannson
parent
ac7eeb21ad
commit
f25591f632
258
src/Map2.js
258
src/Map2.js
@ -1,258 +0,0 @@
|
|||||||
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 { 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 stairs from "./stairs.png";
|
|
||||||
import lift from "./lift.png";
|
|
||||||
import toilet from "./toilet.png"
|
|
||||||
import request from "./test.json"
|
|
||||||
import { useMapEvent, useMap } from 'react-leaflet/hooks';
|
|
||||||
|
|
||||||
function Stairs({position, size, body})
|
|
||||||
{
|
|
||||||
// React class (in function form) to represent stairs, takes the position where to put the stairs logo
|
|
||||||
// and the body of the popup of the stairs (list of floors accessible from that staircase)
|
|
||||||
const map = useMap();
|
|
||||||
const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: stairs, iconSize: size }));
|
|
||||||
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))});
|
|
||||||
return <Marker position={position} icon={markerIcon}>
|
|
||||||
{body}
|
|
||||||
</Marker>
|
|
||||||
}
|
|
||||||
|
|
||||||
function Lift({position, size, body})
|
|
||||||
{
|
|
||||||
// React class (in function form) to represent lifts, takes the position where to put the lift logo
|
|
||||||
// and the body of the popup of the lift (list of floors accessible from that lift)
|
|
||||||
const map = useMap();
|
|
||||||
const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: lift, iconSize: size }));
|
|
||||||
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
|
|
||||||
return <Marker position={position} icon={markerIcon}>
|
|
||||||
{body}
|
|
||||||
</Marker>
|
|
||||||
}
|
|
||||||
|
|
||||||
function Toilet({position, size, body})
|
|
||||||
{
|
|
||||||
// React class (in function form) to represent lifts, takes the position where to put the lift logo
|
|
||||||
// and the body of the popup of the lift (list of floors accessible from that lift)
|
|
||||||
const map = useMap();
|
|
||||||
const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: toilet, iconSize: size }));
|
|
||||||
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: toilet, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
|
|
||||||
return <Marker position={position} icon={markerIcon}>
|
|
||||||
{body}
|
|
||||||
</Marker>
|
|
||||||
}
|
|
||||||
|
|
||||||
function polygonCenter(polygon)
|
|
||||||
{
|
|
||||||
// Function to calculate the central point of a given polygon
|
|
||||||
let minX = -1;
|
|
||||||
let minY = -1;
|
|
||||||
let maxX = -1;
|
|
||||||
let maxY = -1;
|
|
||||||
polygon.forEach((pt) => {
|
|
||||||
if (minX === -1 || minX > pt[0]) {
|
|
||||||
minX = pt[0];
|
|
||||||
}
|
|
||||||
if (minY === -1 || minY > pt[1]) {
|
|
||||||
minY = pt[1];
|
|
||||||
}
|
|
||||||
if (maxY === -1 || maxY < pt[1]) {
|
|
||||||
maxY = pt[1];
|
|
||||||
}
|
|
||||||
if (maxX === -1 || maxX < pt[0]) {
|
|
||||||
maxX = pt[0];
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return [(minX + maxX) / 2, (maxY + minY) / 2];
|
|
||||||
}
|
|
||||||
|
|
||||||
function logoSize(polygon)
|
|
||||||
{
|
|
||||||
// function to calculate the size of a logo to display
|
|
||||||
// on a room which edges are in polygon
|
|
||||||
let minX = -1;
|
|
||||||
let minY = -1;
|
|
||||||
let maxX = -1;
|
|
||||||
let maxY = -1;
|
|
||||||
// We first calculate the maximal coordinates to then output
|
|
||||||
// 75% the size of the room
|
|
||||||
polygon.forEach((pt) => {
|
|
||||||
if (minX === -1 || minX > pt[0]) {
|
|
||||||
minX = pt[0];
|
|
||||||
}
|
|
||||||
if (minY === -1 || minY > pt[1]) {
|
|
||||||
minY = pt[1];
|
|
||||||
}
|
|
||||||
if (maxY === -1 || maxY < pt[1]) {
|
|
||||||
maxY = pt[1];
|
|
||||||
}
|
|
||||||
if (maxX === -1 || maxX < pt[0]) {
|
|
||||||
maxX = pt[0];
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// For some unknown reason we have to multiply by 10 otherwise
|
|
||||||
// it's almost invisible
|
|
||||||
return [30*(maxX - minX)/4, 30*(maxY - minY)/4];
|
|
||||||
}
|
|
||||||
|
|
||||||
function min_max(request)
|
|
||||||
{
|
|
||||||
// Function to calculate the minimal and maximal coordinates of all the points in a request
|
|
||||||
// (it being a list of polygons, a polygon being a list of points, a point being a list of 2 coordinates)
|
|
||||||
let minX = -1;
|
|
||||||
let minY = -1;
|
|
||||||
let maxX = -1;
|
|
||||||
let maxY = -1;
|
|
||||||
for (const ind in request)
|
|
||||||
{
|
|
||||||
const element = request[ind];
|
|
||||||
// element can be a room, a lift, a staircase or toilets
|
|
||||||
(element["surface"]).forEach((pt) => {
|
|
||||||
if (minX === -1 || minX > pt["x"]) {
|
|
||||||
minX = pt["x"];
|
|
||||||
}
|
|
||||||
if (minY === -1 || minY > pt["y"]) {
|
|
||||||
minY = pt["y"];
|
|
||||||
}
|
|
||||||
if (maxY === -1 || maxY < pt["y"]) {
|
|
||||||
maxY = pt["y"];
|
|
||||||
}
|
|
||||||
if (maxX === -1 || maxX < pt["x"]) {
|
|
||||||
maxX = pt["x"];
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return [minX, maxX, minY, maxY];
|
|
||||||
}
|
|
||||||
|
|
||||||
function newPolygon(element, positions, selectedRoom, callback)
|
|
||||||
{
|
|
||||||
// Auxiliary function to return the appropriate polygon depending
|
|
||||||
// on wether it is a room, a lift, a staircase or toilets
|
|
||||||
const color = selectedRoom === element["id"] ? 'red' : 'grey';
|
|
||||||
//if (element["type"] === "S")
|
|
||||||
if (element["id"] === 512 || element["id"] === 517 || element["id"] === 514 || element["id"] === 518)
|
|
||||||
{
|
|
||||||
// In this case, the room is a staircase so we add a Stairs component
|
|
||||||
return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
|
|
||||||
<Tooltip>{element["id"]}</Tooltip>
|
|
||||||
<Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
|
|
||||||
<li onClick={() => { console.log("escalier"); }}>
|
|
||||||
YAY
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
uéuéué
|
|
||||||
</li>
|
|
||||||
</Popup>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Polygon>
|
|
||||||
}
|
|
||||||
//else if (element["type"] === "L")
|
|
||||||
else if (element["id"] === 524 || element["id"] === 523)
|
|
||||||
{
|
|
||||||
// In this case the room is a lift so we add a Lift component
|
|
||||||
return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
|
|
||||||
<Tooltip>{element["id"]}</Tooltip>
|
|
||||||
<Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
|
|
||||||
<li onClick={() => { console.log("ascenseur"); }}>
|
|
||||||
YAY
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
uéuéué
|
|
||||||
</li>
|
|
||||||
</Popup>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Polygon>
|
|
||||||
}
|
|
||||||
//else if (element["type"] === "T")
|
|
||||||
else if (element["id"] === 379)
|
|
||||||
{
|
|
||||||
return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
|
|
||||||
<Tooltip>{element["id"]}</Tooltip>
|
|
||||||
<Toilet position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
|
|
||||||
<li onClick={() => { console.log("toilettes"); }}>
|
|
||||||
YAY
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
uéuéué
|
|
||||||
</li>
|
|
||||||
</Popup>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Polygon>
|
|
||||||
}
|
|
||||||
else if (element["type"] === "R")
|
|
||||||
{
|
|
||||||
// In this case it is a regular room
|
|
||||||
return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{click: () => callback(element["id"])}}>
|
|
||||||
<Tooltip>{element["id"]}</Tooltip>
|
|
||||||
</Polygon>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function list_polygons(request, center, callback, selectedRoom)
|
|
||||||
{
|
|
||||||
// Main function to calculate the list of polygons (React components)
|
|
||||||
// Taking the request as parameter, the center of the points of the request
|
|
||||||
// and a callback (callback) to interact with the global web interface
|
|
||||||
// when a room is clicked (allowing the display of room informations)
|
|
||||||
|
|
||||||
console.log(selectedRoom);
|
|
||||||
let polygons = [];
|
|
||||||
for (const ind in request)
|
|
||||||
{
|
|
||||||
const element = request[ind];
|
|
||||||
// element can be a room, a lift, a staircase or toilets
|
|
||||||
const positions = (element["surface"]).map((pt) => {
|
|
||||||
// This function rotates and recenters de the map (should not be necessary once the real data are gathered)
|
|
||||||
// It also changes the objects into lists of two coordinates to make it accepted by the "positions" attribute of
|
|
||||||
// the "Polygon" react-leaflet component
|
|
||||||
return [-(pt["y"] - center[1]) / 25, (pt["x"] - center[0]) / 25];
|
|
||||||
});
|
|
||||||
const pol = newPolygon(element, positions, selectedRoom, callback);
|
|
||||||
polygons = [...polygons, pol];
|
|
||||||
}
|
|
||||||
return polygons;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildPols(request, callback, selectedRoom)
|
|
||||||
{
|
|
||||||
// This function just calls the list_polygons one with appropriate parameters (precalculate center)
|
|
||||||
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 polygons = list_polygons(request, center, callback, selectedRoom);
|
|
||||||
return polygons;
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
console.log(request);
|
|
||||||
console.log(selectedRoom);
|
|
||||||
const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => {
|
|
||||||
return buildPols(request, callbackRoomSelected, selectedRoom);
|
|
||||||
}, [request, callbackRoomSelected, selectedRoom]);
|
|
||||||
|
|
||||||
const polygons = createPolygons(request, callbackRoomSelected, selectedRoom);
|
|
||||||
return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
|
|
||||||
{polygons}
|
|
||||||
</MapContainer>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Map;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user