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

Use Leaflet

Browse Source
This commit is contained in:
Adrien Vannson 2022-10-07 11:16:54 +02:00
parent c3a4a99a88
commit e51a5797ad
No known key found for this signature in database
GPG Key ID: FE2E66FD978C1A55
4 changed files with 73 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
package-lock.json generated
View File

@ -14,8 +14,10 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"leaflet": "^1.9.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.1.0",
"react-scripts": "5.0.1",
"react-simple-maps": "^3.0.0",
"web-vitals": "^2.1.4"
@ -3505,6 +3507,16 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@react-leaflet/core": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
"peerDependencies": {
"leaflet": "^1.9.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -11960,6 +11972,11 @@
"language-subtag-registry": "~0.3.2"
}
},
"node_modules/leaflet": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.2.tgz",
"integrity": "sha512-Kc77HQvWO+y9y2oIs3dn5h5sy2kr3j41ewdqCMEUA4N89lgfUUfOBy7wnnHEstDpefiGFObq12FdopGRMx4J7g=="
},
"node_modules/leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -14551,6 +14568,19 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-leaflet": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.1.0.tgz",
"integrity": "sha512-i+V9pX5lywJ48O2+K3USeeTdYLIhxnLMweH+YLd/UPqVIj3uKzE3Q29bzt83PBtViyZmxDlulzC6uoR3JLiE9A==",
"dependencies": {
"@react-leaflet/core": "^2.1.0"
},
"peerDependencies": {
"leaflet": "^1.9.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -19732,6 +19762,12 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
},
"@react-leaflet/core": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
"requires": {}
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -25928,6 +25964,11 @@
"language-subtag-registry": "~0.3.2"
}
},
"leaflet": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.2.tgz",
"integrity": "sha512-Kc77HQvWO+y9y2oIs3dn5h5sy2kr3j41ewdqCMEUA4N89lgfUUfOBy7wnnHEstDpefiGFObq12FdopGRMx4J7g=="
},
"leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -27621,6 +27662,14 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-leaflet": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.1.0.tgz",
"integrity": "sha512-i+V9pX5lywJ48O2+K3USeeTdYLIhxnLMweH+YLd/UPqVIj3uKzE3Q29bzt83PBtViyZmxDlulzC6uoR3JLiE9A==",
"requires": {
"@react-leaflet/core": "^2.1.0"
}
},
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

2
package.json
View File

@ -10,8 +10,10 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"leaflet": "^1.9.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.1.0",
"react-scripts": "5.0.1",
"react-simple-maps": "^3.0.0",
"web-vitals": "^2.1.4"

6
public/index.html
View File

@ -24,10 +24,14 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
crossorigin=""/>
<title>ENcarteS</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" style="height: 100vh; display:flex; flex-direction: column; overflow: hidden"></div>
<div id="root" style="height: 100vh; display:flex; flex-direction: column;"></div>
</body>
</html>

31
src/App.js
View File

@ -12,7 +12,11 @@ import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps"
// 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'
function RoomResearch() {
return <>
@ -78,20 +82,17 @@ function TopBar() {
}
function Map() {
const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
return (
<ComposableMap>
<ZoomableGroup center={[0, -20]} zoom={1}>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map((geo) => (
<Geography key={geo.rsmKey} geography={geo} />
))
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
)
return <MapContainer center={[51.505, -0.09]} zoom={13} 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={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
}
export default function App() {