dancingCycle
/
gtfs-rt-display
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: introduce leaflet

This commit is contained in:
dancingCycle 2022-09-16 14:15:34 +02:00
parent c50ec854eb
commit 16a94e936d
5 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/map/map.css Normal file
View File

@ -0,0 +1,4 @@
/*set up the height of*/
.leaflet-container {
height: 50vh;
}

20
app/components/map/map.jsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import {MapContainer,TileLayer} from 'react-leaflet';
/*JS module import (vs cdn or style link)*/
import 'leaflet/dist/leaflet.css'
import './map.css';
export default function Map() {
const position = [53.2206976, 7.7585528]
return (
<>
{/*TODO remove debugging*/}
<h1>Map</h1>
<MapContainer center={position} zoom={7} scrollWheelZoom={false}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
</>
);
}

4
app/pages/map-page.jsx
View File

@ -1,8 +1,12 @@
import React from 'react';
import Map from '../components/map/map';
export default function MapPage() {
return (
<>
{/*TODO remove debugging*/}
<h1>MapPage</h1>
<Map />
</>
);
}

49
package-lock.json generated
View File

@ -10,9 +10,11 @@
"license": "GPL-3.0-or-later",
"dependencies": {
"bootstrap": "5.2.1",
"leaflet": "^1.8.0",
"react": "18.2.0",
"react-bootstrap": "2.5.0",
"react-dom": "18.2.0",
"react-leaflet": "^4.0.2",
"react-router-bootstrap": "0.26.2"
},
"devDependencies": {
@ -1891,6 +1893,16 @@
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
}
},
"node_modules/@react-leaflet/core": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.1.tgz",
"integrity": "sha512-XGmx01DovDt0IWsW4tqeuSYifpY19aUn9NYCqTBI3KNtjbCjj0pfiWa7krNsnJ6l2oQbv4Nt0/BabLbIvT4ocA==",
"peerDependencies": {
"leaflet": "^1.8.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/@remix-run/router": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.0.tgz",
@ -4341,6 +4353,11 @@
"node": ">=0.10.0"
}
},
"node_modules/leaflet": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"node_modules/loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@ -5198,6 +5215,19 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-leaflet": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.2.tgz",
"integrity": "sha512-pDyIf50Ek/LZ0p4Qxw2D9LMOx+LytQs2R+MY3mhTUPGzubrpP4QAgbCv2qc0L9y0qVRgx7dHavWuPFkc/WCJCw==",
"dependencies": {
"@react-leaflet/core": "^2.0.1"
},
"peerDependencies": {
"leaflet": "^1.8.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -7895,6 +7925,12 @@
"@babel/runtime": "^7.6.2"
}
},
"@react-leaflet/core": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.1.tgz",
"integrity": "sha512-XGmx01DovDt0IWsW4tqeuSYifpY19aUn9NYCqTBI3KNtjbCjj0pfiWa7krNsnJ6l2oQbv4Nt0/BabLbIvT4ocA==",
"requires": {}
},
"@remix-run/router": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.0.tgz",
@ -9813,6 +9849,11 @@
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
"dev": true
},
"leaflet": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@ -10448,6 +10489,14 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-leaflet": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.2.tgz",
"integrity": "sha512-pDyIf50Ek/LZ0p4Qxw2D9LMOx+LytQs2R+MY3mhTUPGzubrpP4QAgbCv2qc0L9y0qVRgx7dHavWuPFkc/WCJCw==",
"requires": {
"@react-leaflet/core": "^2.0.1"
}
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",

2
package.json
View File

@ -39,9 +39,11 @@
},
"dependencies": {
"bootstrap": "5.2.1",
"leaflet": "^1.8.0",
"react": "18.2.0",
"react-bootstrap": "2.5.0",
"react-dom": "18.2.0",
"react-leaflet": "^4.0.2",
"react-router-bootstrap": "0.26.2"
}
}