From d5a660ecc1553bc8cf77748d2bc4f6ff0e051c2d Mon Sep 17 00:00:00 2001 From: Gabriel Dehame Date: Sat, 18 Feb 2023 13:19:58 +0100 Subject: [PATCH] =?UTF-8?q?creation=20de=20Map2.js=20pour=20adapter=20?= =?UTF-8?q?=C3=A0=20la=20nouvelle=20structure=20des=20r=C3=A9ponses=20exem?= =?UTF-8?q?ple:=20test.json?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Map.js | 6 +- src/Map2.js | 198 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/test.json | 1 + 3 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 src/Map2.js create mode 100644 src/test.json diff --git a/src/Map.js b/src/Map.js index d78a0a3..706d188 100644 --- a/src/Map.js +++ b/src/Map.js @@ -73,7 +73,7 @@ function Stairs({position, body}) // 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: [40, 40] })); - const mmap = useMapEvent('zoomend', () => {console.log("ca zoom"); setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))}); + 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} @@ -85,7 +85,7 @@ function Lift({position, body}) // 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: [20, 20] })); - const mmap = useMapEvent('zoomend', () => {console.log("ca zoom"); setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))}); + 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} @@ -172,6 +172,8 @@ function buildPols(request, cb, selectedRoom) function Map({ callbackRoomSelected, selectedRoom }) { + const request = new Request('https://encartes.aliens-lyon.fr/api/map/get_floor/47'); + fetch(request).then((response) => {console.log(response)}); // 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 diff --git a/src/Map2.js b/src/Map2.js new file mode 100644 index 0000000..483e5b1 --- /dev/null +++ b/src/Map2.js @@ -0,0 +1,198 @@ +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 request from "./test.json" +import { useMapEvent, useMap } from 'react-leaflet/hooks'; + +function Stairs({position, 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: [40, 40] })); + 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, 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: [20, 20] })); + 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 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 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") + { + // 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") + { + // 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"] === "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 ratio and 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 ratio = Math.ceil(Math.max((maxY - minY) / 2284, (maxX - minX) / 135)); //A priori ca devrait être convenable mais là ca ne fonctionne pas, je pense que c'est pck le SVG n'utilise pas des coordonnées et ducoup y'a des trucs bizarre (notamment les étages 3 et 4 n'ont pas du tout la même longueur ni même largeur) + const polygons = list_polygons(request, center, ratio, 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; diff --git a/src/test.json b/src/test.json new file mode 100644 index 0000000..4d89670 --- /dev/null +++ b/src/test.json @@ -0,0 +1 @@ +[{"id":263,"names":["Name1"],"type":"R","surface":[{"x":255.4,"y":-0.3},{"x":255.4,"y":109.7},{"x":254.6,"y":109.7},{"x":254.6,"y":247.8},{"x":59.1,"y":247.8},{"x":60.1,"y":261.2},{"x":55.3,"y":265.4},{"x":47.2,"y":273.9},{"x":40.9,"y":282.5},{"x":36.3,"y":291},{"x":33.2,"y":299.6},{"x":31.5,"y":308},{"x":31.1,"y":316.3},{"x":31.8,"y":324.3},{"x":33.4,"y":332},{"x":35.9,"y":339.3},{"x":40.7,"y":349.4},{"x":48.6,"y":360.9},{"x":57,"y":369.7},{"x":61.1,"y":372.8},{"x":61.1,"y":385.5},{"x":1189.5,"y":386.7},{"x":1189.5,"y":430.9},{"x":1298.8,"y":430.9},{"x":1298.8,"y":782.5},{"x":1190.7,"y":782.5},{"x":1190.7,"y":823.1},{"x":68.2,"y":823.1},{"x":68.2,"y":835.7},{"x":63.2,"y":840.1},{"x":54.8,"y":849},{"x":48.5,"y":858},{"x":44.1,"y":867},{"x":41.3,"y":875.8},{"x":40,"y":884.5},{"x":40,"y":893},{"x":41.1,"y":901.2},{"x":43.1,"y":909},{"x":45.9,"y":916.3},{"x":51.1,"y":926.2},{"x":59,"y":937.2},{"x":66.5,"y":945.1},{"x":69.7,"y":947.6},{"x":69.7,"y":960},{"x":263.9,"y":960},{"x":269.7,"y":1206},{"x":481.3,"y":1206},{"x":481.3,"y":1193.6},{"x":2739.6,"y":1193.6},{"x":2739.6,"y":1101.1},{"x":2943.6,"y":1101.1},{"x":2943.6,"y":1069.4},{"x":2986.8,"y":1069.4},{"x":2986.8,"y":961.9},{"x":3130.4,"y":961.9},{"x":3130.4,"y":949.4},{"x":3132.6,"y":948.4},{"x":3139.3,"y":942.8},{"x":3147.4,"y":932.9},{"x":3153.3,"y":923.2},{"x":3156.7,"y":915.7},{"x":3159.3,"y":907.7},{"x":3161,"y":899.2},{"x":3161.5,"y":890.2},{"x":3160.6,"y":880.9},{"x":3158,"y":871.4},{"x":3153.5,"y":861.8},{"x":3146.9,"y":852.2},{"x":3138,"y":842.6},{"x":3132.5,"y":837.9},{"x":3132.5,"y":825.1},{"x":2018.6,"y":822.2},{"x":2018.6,"y":782.6},{"x":1913.9,"y":782.6},{"x":1915.7,"y":432.9},{"x":2021.1,"y":432.9},{"x":2021.1,"y":388.6},{"x":3138.9,"y":386.5},{"x":3138.9,"y":374.4},{"x":3141.8,"y":372.8},{"x":3149.1,"y":366.4},{"x":3157.1,"y":356.1},{"x":3162.6,"y":346.3},{"x":3165.7,"y":339},{"x":3167.9,"y":331},{"x":3169.3,"y":322.6},{"x":3169.5,"y":313.9},{"x":3168.3,"y":304.8},{"x":3165.7,"y":295.5},{"x":3161.2,"y":286.1},{"x":3154.8,"y":276.6},{"x":3146.2,"y":267.2},{"x":3141.1,"y":262.6},{"x":3141.1,"y":249.7},{"x":2956.1,"y":249.7},{"x":2957.1,"y":109},{"x":2957.1,"y":1.9},{"x":2747.9,"y":1.9},{"x":2747.9,"y":13.6},{"x":469.3,"y":10.1},{"x":469.3,"y":-0.3}]},{"id":264,"names":[],"type":"R","surface":[{"x":-128.1,"y":258.4},{"x":-92.2,"y":258.4},{"x":-92.2,"y":265.7},{"x":-94,"y":265.7},{"x":-94,"y":260.1},{"x":-104.8,"y":260.1},{"x":-104.8,"y":272.6},{"x":-91.8,"y":272.6},{"x":-91.8,"y":281.3},{"x":-93.5,"y":281.3},{"x":-93.5,"y":274.5},{"x":-104.6,"y":274.5},{"x":-104.6,"y":291},{"x":-93.1,"y":291},{"x":-93.1,"y":288.2},{"x":-91.7,"y":288.2},{"x":-91.7,"y":292.6},{"x":-106.4,"y":292.6},{"x":-106.4,"y":260.4},{"x":-127.9,"y":260.4}]},{"id":265,"names":[],"type":"R","surface":[{"x":198.7,"y":240.3},{"x":198.7,"y":241.9},{"x":211.3,"y":241.9},{"x":211.3,"y":240.4}]},{"id":266,"names":[],"type":"R","surface":[{"x":179.2,"y":118.1},{"x":179.2,"y":157.4},{"x":181.5,"y":157.4},{"x":181.5,"y":118.7}]},{"id":267,"names":[],"type":"R","surface":[{"x":208.5,"y":127.5},{"x":215.9,"y":127.5},{"x":215.9,"y":129.6},{"x":211,"y":129.6},{"x":211,"y":140.2},{"x":215.3,"y":140.2},{"x":215.3,"y":142.3},{"x":211,"y":142.3},{"x":211,"y":158.2},{"x":209.1,"y":158.2}]},{"id":268,"names":[],"type":"R","surface":[{"x":208.5,"y":169.9},{"x":208.5,"y":205.6},{"x":215.7,"y":205.6},{"x":215.7,"y":203.9},{"x":210.6,"y":203.9},{"x":210.6,"y":192.4},{"x":228.2,"y":192.4},{"x":228.2,"y":190.3},{"x":210.6,"y":190.3},{"x":210.6,"y":169.5}]},{"id":269,"names":[],"type":"R","surface":[{"x":179.2,"y":169.7},{"x":181.5,"y":169.7},{"x":181.5,"y":213.9},{"x":179,"y":213.9}]},{"id":270,"names":[],"type":"R","surface":[{"x":-115.5,"y":64.3},{"x":-94.4,"y":64.3},{"x":-94.4,"y":67},{"x":-112.9,"y":67},{"x":-112.9,"y":87.4},{"x":-114.8,"y":86.9}]},{"id":271,"names":[],"type":"R","surface":[{"x":199.3,"y":91.9},{"x":199.3,"y":93.9},{"x":211.5,"y":93.9},{"x":211.5,"y":91.8}]},{"id":272,"names":[],"type":"R","surface":[{"x":209,"y":41.7},{"x":209,"y":46.2},{"x":211,"y":46.7},{"x":211,"y":46.2},{"x":242.6,"y":46.2},{"x":242.6,"y":43.9},{"x":211.1,"y":43.9},{"x":211.1,"y":41.8}]},{"id":273,"names":[],"type":"R","surface":[{"x":249,"y":35.2},{"x":249,"y":45.9},{"x":251.2,"y":45.9},{"x":251.2,"y":35.5}]},{"id":274,"names":[],"type":"R","surface":[{"x":257.4,"y":43.6},{"x":257.4,"y":45.9},{"x":290.4,"y":45.9},{"x":290.4,"y":41.8},{"x":288.6,"y":41.8},{"x":288.6,"y":43.8}]},{"id":275,"names":[],"type":"R","surface":[{"x":461.7,"y":37.3},{"x":461.7,"y":39.7},{"x":468.4,"y":39.7},{"x":468.4,"y":57.5},{"x":462.5,"y":57.5},{"x":462.5,"y":59.8},{"x":468.4,"y":59.8},{"x":468.4,"y":67.9},{"x":470.4,"y":67.9},{"x":470.4,"y":39.7},{"x":474.3,"y":39.7},{"x":474.3,"y":37.5}]},{"id":276,"names":[],"type":"R","surface":[{"x":476.7,"y":65.7},{"x":476.7,"y":68},{"x":512.6,"y":68},{"x":512.6,"y":56.6},{"x":510.7,"y":56.6},{"x":510.7,"y":65.5}]},{"id":511,"names":[],"type":"R","surface":[{"x":145.4,"y":263.8},{"x":145.4,"y":327.1},{"x":195.7,"y":327.1},{"x":195.7,"y":262.6}]},{"id":512,"names":[],"type":"R","surface":[{"x":138,"y":327.6},{"x":59,"y":327.6},{"x":56.1,"y":327.4},{"x":49.5,"y":325.6},{"x":42.3,"y":322.3},{"x":35,"y":317.4},{"x":27.7,"y":311.3},{"x":20.9,"y":304.1},{"x":14.8,"y":296.1},{"x":9.8,"y":287.3},{"x":6.3,"y":278},{"x":4.5,"y":268.5},{"x":4.9,"y":258.8},{"x":7.6,"y":249.1},{"x":13.1,"y":239.8},{"x":21.8,"y":230.9},{"x":33.8,"y":222.6},{"x":49.6,"y":215.1},{"x":59,"y":211.8},{"x":138.2,"y":211.4}]},{"id":513,"names":[],"type":"R","surface":[{"x":3091.5,"y":262.4},{"x":3091.5,"y":326.9},{"x":3141.4,"y":326.9},{"x":3141.4,"y":262}]},{"id":514,"names":[],"type":"R","surface":[{"x":3133.7,"y":211.1},{"x":3134.6,"y":255.2},{"x":3147.3,"y":255.2},{"x":3147.6,"y":327.3},{"x":3239.9,"y":327.6},{"x":3244.5,"y":325.4},{"x":3253.1,"y":320.4},{"x":3260.8,"y":314.7},{"x":3267.5,"y":308.4},{"x":3273.1,"y":301.5},{"x":3277.5,"y":294.2},{"x":3280.8,"y":286.5},{"x":3282.8,"y":278.6},{"x":3283.5,"y":270.5},{"x":3282.8,"y":262.3},{"x":3280.6,"y":254},{"x":3276.9,"y":245.9},{"x":3271.7,"y":237.9},{"x":3264.8,"y":230.2},{"x":3256.1,"y":222.8},{"x":3245.7,"y":215.8},{"x":3239.9,"y":212.5}]},{"id":515,"names":[],"type":"R","surface":[{"x":1230.6,"y":779.6},{"x":1398.5,"y":778.1},{"x":1425.1,"y":804.7},{"x":1425.1,"y":890.4},{"x":1421.4,"y":892.5},{"x":1385.5,"y":892.8},{"x":1381.2,"y":891.6},{"x":1381.2,"y":866.2},{"x":1230.6,"y":866.2}]},{"id":516,"names":[],"type":"R","surface":[{"x":144.5,"y":832.3},{"x":194.6,"y":832.3},{"x":194.6,"y":895.3},{"x":188.7,"y":896.9},{"x":165.3,"y":895.3},{"x":147.8,"y":895.3},{"x":144.5,"y":892}]},{"id":517,"names":[],"type":"R","surface":[{"x":136.5,"y":832.7},{"x":137.3,"y":902.7},{"x":149.6,"y":902.7},{"x":149.6,"y":948.6},{"x":59.9,"y":948.2},{"x":51.7,"y":946},{"x":37.2,"y":940.5},{"x":25.3,"y":933.7},{"x":15.8,"y":925.8},{"x":8.7,"y":917.1},{"x":3.8,"y":907.9},{"x":1,"y":898.2},{"x":0.3,"y":888.5},{"x":1.4,"y":878.8},{"x":4.4,"y":869.5},{"x":9,"y":860.7},{"x":15.3,"y":852.7},{"x":23,"y":845.7},{"x":32,"y":840},{"x":42.3,"y":835.8},{"x":53.8,"y":833.3},{"x":59.9,"y":832.7}]},{"id":518,"names":[],"type":"R","surface":[{"x":3152.3,"y":831.3},{"x":3238.6,"y":831.3},{"x":3245,"y":833.8},{"x":3256.2,"y":839.7},{"x":3265.6,"y":846.6},{"x":3273,"y":854.5},{"x":3278.8,"y":863},{"x":3282.8,"y":871.9},{"x":3285.1,"y":881.2},{"x":3285.9,"y":890.5},{"x":3285.2,"y":899.8},{"x":3283.1,"y":908.7},{"x":3279.5,"y":917.2},{"x":3274.7,"y":925},{"x":3268.6,"y":931.9},{"x":3261.4,"y":937.8},{"x":3253.1,"y":942.5},{"x":3243.7,"y":945.7},{"x":3238.6,"y":946.6},{"x":3139,"y":946.6},{"x":3137.8,"y":901.8},{"x":3152.3,"y":901.8}]},{"id":519,"names":[],"type":"R","surface":[{"x":3097,"y":831.3},{"x":3143.5,"y":831.3},{"x":3146.2,"y":895.9},{"x":3097,"y":895.8}]},{"id":520,"names":[],"type":"R","surface":[{"x":1973.6,"y":804.1},{"x":2041.4,"y":804.1},{"x":2041.4,"y":866.6},{"x":1973.6,"y":866}]},{"id":521,"names":[],"type":"R","surface":[{"x":1898.8,"y":803.4},{"x":1898.8,"y":865.5},{"x":1966.2,"y":866},{"x":1966.2,"y":803.4}]},{"id":522,"names":[],"type":"R","surface":[{"x":1870.4,"y":259.6},{"x":1911,"y":257.4},{"x":1916.2,"y":260.4},{"x":1916.2,"y":284.8},{"x":2060.6,"y":284.8},{"x":2060.6,"y":368},{"x":1870.4,"y":368}]},{"id":523,"names":[],"type":"R","surface":[{"x":1330.2,"y":286.1},{"x":1330.2,"y":346.7},{"x":1396.6,"y":346.7},{"x":1396.6,"y":287.3}]},{"id":524,"names":[],"type":"R","surface":[{"x":1256.2,"y":286.1},{"x":1256.2,"y":346.7},{"x":1323.7,"y":346.7},{"x":1323.7,"y":286.7}]}]