map

src/App.js

@@ -16,10 +16,7 @@ import Typography from '@mui/material/Typography';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 // Leaflet
-import { MapContainer } from 'react-leaflet/MapContainer'
-import { TileLayer } from 'react-leaflet/TileLayer'
-import { Marker } from 'react-leaflet/Marker'
-import { Popup } from 'react-leaflet/Popup'
+import Map from './Map.js'
 
 function RoomResearch() {
   return <>
@@ -27,7 +24,7 @@ function RoomResearch() {
       <Typography component="h2" variant="h5" gutterBottom>
         Rechercher une salle
       </Typography>
-      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth />
+      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth/>
       <Box
         marginTop={1}
         display="flex"
@@ -84,20 +81,6 @@ function TopBar() {
   </>
 }
 
-function Map() {
-  return <MapContainer center={[45.729811, 4.827768]} zoom={16} scrollWheelZoom={false} style={{flexGrow: '1'}}>
-    <TileLayer
-      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    />
-    <Marker position={[45.729811, 4.827768]}>
-      <Popup>
-        A pretty CSS3 popup. <br /> Easily customizable.
-      </Popup>
-    </Marker>
-  </MapContainer>
-}
-
 export default function App() {
   return <>
     <TopBar />
@@ -122,4 +105,4 @@ function ThemedApp() {
       <App/>
     </ThemeProvider>
   );
-}
+}

src/Map.js

@@ -0,0 +1,115 @@
+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 React from 'react';
+import request2 from "./M-GN1-2.json"
+import request3 from "./M-GN1-3.json"
+import request4 from "./M-GN1-4.json"
+
+function min_max(request)
+{
+  let minX = -1;
+  let minY = -1;
+  let maxX = -1;
+  let maxY = -1;
+  for (const k in request)
+  {
+    (request[k]).forEach( (po) =>
+    {
+      po.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, minY, maxY];
+}
+
+function list_polygons(request, center, ratio, ind)
+{
+  let polygons = [];
+  for (const k in request)
+  {
+    polygons = [...polygons, ((request[k]).map((y) => {
+      return y.map((z) => {
+        if (ind === 2)
+        {
+          return [-(z[0]-center[0])/25, (z[1]-center[1])/25]; //Centre en (0,0) + inverse verticalement car nord en bas sur map d'étage 4 + divise pour faire entrer dans l'espace dessinable (jsp pk on ne peut pas dessiner partout)
+        }
+        else if (ind === 1)
+        {
+          return [-(z[1]-center[1])/25, (z[0]-center[0])/25];
+        }
+        else
+        {
+          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>})];
+  }
+  return polygons;
+}
+
+function layers_list(requestList)
+{
+  let layers = [];
+  requestList.forEach( (request, ind) =>
+  {
+    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)
+//    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>];
+  })
+  return layers;
+}
+
+function Map()
+{
+  const buildLayers = React.useCallback((request2, request3, request4) => {
+    return layers_list([request2, request3, request4]);
+    }, [request2, request3, request4]);
+
+  const layers = buildLayers(request2, request3, request4);
+  return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>
+    <LayersControl position="topright">
+      {layers}
+    </LayersControl>
+  </MapContainer>
+/*
+  return <MapContainer center={[0,0]} zoom={0} scrollWheelZoom={true} style={{flexGrow: '1'}}>
+  <Polygon positions={[[85,-1142],[85,1142],[-85,1142],[-85,-1142]]}></Polygon>
+    <Marker position={[0,0]}>
+      <Popup>
+        CENTER OF THE MAP
+      </Popup>
+    </Marker>
+  </MapContainer>*/
+}
+
+export default Map;