diff --git a/src/Map2.js b/src/Map2.js deleted file mode 100644 index 3580c30..0000000 --- a/src/Map2.js +++ /dev/null @@ -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 - {body} - -} - -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 - {body} - -} - -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 - {body} - -} - -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 callback(element["id"])}}> - {element["id"]} - -
  • { console.log("escalier"); }}> - YAY -
    • -
  • - uéuéué -
    • - - } - /> -     - } - //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 callback(element["id"])}}> - {element["id"]} - -
  • { console.log("ascenseur"); }}> - YAY -
    • -
  • - uéuéué -
    • - - } - /> -     - } - //else if (element["type"] === "T") - else if (element["id"] === 379) - { - return callback(element["id"])}}> - {element["id"]} - -
  • { console.log("toilettes"); }}> - YAY -
    • -
  • - uéuéué -
    • - - } - /> -     - } - else if (element["type"] === "R") - { - // In this case it is a regular room - return callback(element["id"])}}> - {element["id"]} - - } -} - -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 - {polygons} - -} - -export default Map;