Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-18 23:21:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

adaptation de la taille des logos avec le zoom

Browse Source
This commit is contained in:
Gabriel Dehame 2023-01-24 17:56:32 +01:00
parent 73b85e1910
commit 8b6dea9964
1 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/Map.js
View File

@ -13,6 +13,7 @@ import lift from "./lift.png";
import request2 from "./M-GN1-2.json" import request2 from "./M-GN1-2.json"
import request3 from "./M-GN1-3.json" import request3 from "./M-GN1-3.json"
import request4 from "./M-GN1-4.json" import request4 from "./M-GN1-4.json"
import { useMapEvent, useMap } from 'react-leaflet/hooks'
function polygonCenter(polygon) { function polygonCenter(polygon) {
let minX = -1; let minX = -1;
@ -62,6 +63,25 @@ function min_max(request) {
return [minX, maxX, minY, maxY]; return [minX, maxX, minY, maxY];
} }
function Stairs({position, body})
{
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)]}))});
return <Marker position={position} icon={markerIcon}>
{body}
</Marker>
}
function Lift({position, body})
{
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)]}))});
return <Marker position={position} icon={markerIcon}>
{body}
</Marker>
}
function list_polygons(request, center, ratio, cb, selectedRoom) { function list_polygons(request, center, ratio, cb, selectedRoom) {
console.log(selectedRoom); console.log(selectedRoom);
@ -77,31 +97,31 @@ function list_polygons(request, center, ratio, cb, selectedRoom) {
if (k === "salle-M-GN1-X-aa" || k === "salle-M-GN1-X-ab" || k === "salle-M-GN1-X-ac" || k === "salle-M-GN1-X-ad") { if (k === "salle-M-GN1-X-aa" || k === "salle-M-GN1-X-ab" || k === "salle-M-GN1-X-ac" || k === "salle-M-GN1-X-ad") {
return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}> return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}>
<Tooltip>{k}</Tooltip> <Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: stairs, iconSize: [40, 40] })}> <Stairs position={polygonCenter(x)} body={<Popup>
<Popup> <li onClick={() => { console.log("escalier"); }}>
<li onClick={() => { console.log("escalier"); }}> YAY
YAY </li>
</li> <li>
<li> uéuéué
uéuéué </li>
</li> </Popup>
</Popup> }
</Marker> />
</Polygon> </Polygon>
} }
else if (k === "salle-M-GN1-X-ag" || k === "salle-M-GN1-X-ah") { else if (k === "salle-M-GN1-X-ag" || k === "salle-M-GN1-X-ah") {
return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}> return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}>
<Tooltip>{k}</Tooltip> <Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: lift, iconSize: [20, 20] })}> <Lift position={polygonCenter(x)} body={<Popup>
<Popup> <li onClick={() => { console.log("ascenseur"); }}>
<li onClick={() => { console.log("ascenseur"); }}> YAY
YAY </li>
</li> <li>
<li> uéuéué
uéuéué </li>
</li> </Popup>
</Popup> }
</Marker> />
</Polygon> </Polygon>
} }
else { else {