Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-17 22:51:04 +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 request3 from "./M-GN1-3.json"
import request4 from "./M-GN1-4.json"
import { useMapEvent, useMap } from 'react-leaflet/hooks'
function polygonCenter(polygon) {
let minX = -1;
@ -62,6 +63,25 @@ function min_max(request) {
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) {
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") {
return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}>
<Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: stairs, iconSize: [40, 40] })}>
<Popup>
<li onClick={() => { console.log("escalier"); }}>
YAY
</li>
<li>
uéuéué
</li>
</Popup>
</Marker>
<Stairs position={polygonCenter(x)} body={<Popup>
<li onClick={() => { console.log("escalier"); }}>
YAY
</li>
<li>
uéuéué
</li>
</Popup>
}
/>
</Polygon>
}
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)}}>
<Tooltip>{k}</Tooltip>
<Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: lift, iconSize: [20, 20] })}>
<Popup>
<li onClick={() => { console.log("ascenseur"); }}>
YAY
</li>
<li>
uéuéué
</li>
</Popup>
</Marker>
<Lift position={polygonCenter(x)} body={<Popup>
<li onClick={() => { console.log("ascenseur"); }}>
YAY
</li>
<li>
uéuéué
</li>
</Popup>
}
/>
</Polygon>
}
else {