mirror of
https://gitlab.aliens-lyon.fr/encartes/web-interface.git
synced 2026-03-17 22:51:04 +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