mirror of
https://github.com/Findus23/vienna-cycling-quality.git
synced 2024-09-09 04:13:48 +02:00
more changes
This commit is contained in:
parent
95c6c93ca7
commit
5638f3bd77
GPG key ID:
54DE4D798D244853
16 changed files with 145 additions and 79 deletions
36
index.html
36
index.html
|
|
@ -1,13 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="position: absolute;width: 100%;height: 100%"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/bike.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Cycling Quality Index Wien</title>
|
||||
|
||||
<meta property="og:locale" content="de">
|
||||
<meta property="og:title" content="Cycling Quality Index Wien">
|
||||
<meta property="og:description"
|
||||
content="Eine Klassifizierung der Fahrradfreundlichkeit und -eignung des Straßennetzes">
|
||||
<meta property="og:image" content="/bike.svg">
|
||||
<!-- We let the Twitter (…) figure out the given URL, so we don't accidentally overwrite params and such -->
|
||||
<!-- <meta property="og:url" content="…"> -->
|
||||
<meta name="twitter:title" content="Cycling Quality Index Wien">
|
||||
<meta name="twitter:description"
|
||||
content="Eine Klassifizierung der Fahrradfreundlichkeit und -eignung des Straßennetzes">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="/social-sharing.png">
|
||||
<meta name="twitter:image:alt" content="/social-sharing.png">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="position: absolute;width: 100%;height: 100%"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
82
package-lock.json
generated
82
package-lock.json
generated
|
|
@ -12,7 +12,6 @@
|
|||
"@nanostores/react": "^0.7.2",
|
||||
"@nanostores/router": "^0.13.0",
|
||||
"@turf/turf": "^7.0.0-alpha.114",
|
||||
"immutable": "^5.0.0-beta.5",
|
||||
"maplibre-gl": "^4.1.1",
|
||||
"pmtiles": "^3.0.5",
|
||||
"react": "^18.2.0",
|
||||
|
|
@ -1398,19 +1397,6 @@
|
|||
"tailwindcss": ">=3.0.0 || insiders"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
|
||||
"version": "6.0.10",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
|
||||
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-virtual": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
|
||||
|
|
@ -3964,9 +3950,13 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
|
|
@ -5070,11 +5060,6 @@
|
|||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "5.0.0-beta.5",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.0-beta.5.tgz",
|
||||
"integrity": "sha512-1RO6wxfJdh/uyWb2MTn3RuCPXYmpRiAhoKm8vEnA50+2Gy0j++6GBtu5q6sq2d4tpcL+e1sCHzk8NkWnRhT2/Q=="
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
|
|
@ -6263,7 +6248,7 @@
|
|||
"postcss": "^8.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-selector-parser": {
|
||||
"node_modules/postcss-nested/node_modules/postcss-selector-parser": {
|
||||
"version": "6.0.16",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
|
||||
"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
|
||||
|
|
@ -6276,6 +6261,19 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-selector-parser": {
|
||||
"version": "6.0.10",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
|
||||
"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-value-parser": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
|
|
@ -6952,15 +6950,6 @@
|
|||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/sucrase/node_modules/commander": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
|
||||
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/sucrase/node_modules/glob": {
|
||||
"version": "10.3.10",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
|
||||
|
|
@ -7072,6 +7061,19 @@
|
|||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss/node_modules/postcss-selector-parser": {
|
||||
"version": "6.0.16",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
|
||||
"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||
|
|
@ -7138,6 +7140,11 @@
|
|||
"topoquantize": "bin/topoquantize"
|
||||
}
|
||||
},
|
||||
"node_modules/topojson-client/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
},
|
||||
"node_modules/topojson-server": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/topojson-server/-/topojson-server-3.0.1.tgz",
|
||||
|
|
@ -7149,6 +7156,11 @@
|
|||
"geo2topo": "bin/geo2topo"
|
||||
}
|
||||
},
|
||||
"node_modules/topojson-server/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
},
|
||||
"node_modules/ts-api-utils": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
|
||||
|
|
@ -7282,9 +7294,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.2.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.5.tgz",
|
||||
"integrity": "sha512-a+rTAqkMmJ2hQpC6dfAyyc5M0YLH3BGZKLpA6pU9AhzlcK1YZS8P/ov9OcdHxaf+j0sM0DIh/txH7ydTHUpISg==",
|
||||
"version": "5.2.6",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
|
||||
"integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.20.1",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
"@nanostores/react": "^0.7.2",
|
||||
"@nanostores/router": "^0.13.0",
|
||||
"@turf/turf": "^7.0.0-alpha.114",
|
||||
"immutable": "^5.0.0-beta.5",
|
||||
"maplibre-gl": "^4.1.1",
|
||||
"pmtiles": "^3.0.5",
|
||||
"react": "^18.2.0",
|
||||
|
|
|
|||
32
public/bike.svg
Normal file
32
public/bike.svg
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="line">
|
||||
<g>
|
||||
<path d="m31,45c-.5209-.0314-.9686.3653-1,.8862-.0023.0379-.0023.0759,0,.1138,0,5.081-4.119,9.2-9.2,9.2-5.081,0-9.2-4.119-9.2-9.2,0-5.081,4.119-9.2,9.2-9.2h0l.2-2h-.2c-6.1856,0-11.2,5.0144-11.2,11.2s5.0144,11.2,11.2,11.2,11.2-5.0144,11.2-11.2c.0314-.5209-.3653-.9686-.8862-1-.0379-.0023-.0759-.0023-.1138,0Z"/>
|
||||
<path d="m52.8,34.8c-1.3293.0205-2.6465.2569-3.9.7l.9,1.8c.9703-.3117,1.981-.4802,3-.5,5.0808-.0477,9.2383,4.0324,9.286,9.1132s-4.0324,9.2383-9.1132,9.286c-4.9198.0462-9.0051-3.7865-9.2728-8.6992l-2-.1c.2461,6.1555,5.4356,10.9461,11.5912,10.7,6.1555-.2461,10.9461-5.4356,10.7-11.5912-.2399-6-5.1865-10.7334-11.1912-10.7088Z"/>
|
||||
<path d="m48,38.2l-.9-1.8c-2.8634,1.7037-4.8094,4.6043-5.3,7.9l2,.1c.478-2.5604,1.9995-4.8065,4.2-6.2Z"/>
|
||||
<line x1="23" x2="27" y1="22" y2="22" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="42" x2="48" y1="25.7" y2="25.7" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<line x1="21.1" x2="22.8" y1="46" y2="24.6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="36" x2="23" y1="45" y2="30" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="45" x2="53" y1="30" y2="46" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="23" x2="44" y1="30" y2="30" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="46" x2="36" y1="28.4" y2="45" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="36" x2="53" y1="45" y2="46" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="color">
|
||||
<circle cx="53.2623" cy="45.9184" r="8.5632" fill="#fff"/>
|
||||
<circle cx="20.8059" cy="46.1306" r="8.5632" fill="#fff"/>
|
||||
<polygon fill="#fff" points="30.9117 33.2459 38.5365 33.3774 35.7758 39.5561 30.9117 33.2459"/>
|
||||
</g>
|
||||
<g id="color-foreground">
|
||||
<line x1="21.1" x2="22.8" y1="46" y2="24.6" fill="none" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.1"/>
|
||||
<line x1="36" x2="23" y1="45" y2="30" fill="none" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.1"/>
|
||||
<line x1="45" x2="53" y1="30" y2="46" fill="none" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.1"/>
|
||||
<line x1="23" x2="44" y1="30" y2="30" fill="none" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.1"/>
|
||||
<line x1="46" x2="36" y1="28.4" y2="45" fill="none" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.1"/>
|
||||
<line x1="36" x2="53" y1="45" y2="46" fill="none" stroke="#ea5a47" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.1"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -4,18 +4,23 @@ import "./base.css"
|
|||
|
||||
function App() {
|
||||
|
||||
const viennabbox = [16.18278, 48.11833, 16.58, 48.32306] as LngLatBoundsLike
|
||||
let viennabbox = [16.18278, 48.11833, 16.58, 48.32306]
|
||||
// const maxBounds = bbox(
|
||||
// buffer(bboxPolygon(berlinInnenstadtBbox), 250, {
|
||||
// units: 'meters',
|
||||
// }),
|
||||
// ) as LngLatBoundsLike
|
||||
// console.log(maxBounds)
|
||||
viennabbox[0]*=0.99
|
||||
viennabbox[1]*=0.999
|
||||
viennabbox[2]*=1.01
|
||||
viennabbox[3]*=1.001
|
||||
|
||||
const minZoom = 10
|
||||
|
||||
return (
|
||||
<>
|
||||
<CqiMap maxBounds={viennabbox} minZoom={minZoom}/>
|
||||
<CqiMap maxBounds={viennabbox as LngLatBoundsLike} minZoom={minZoom}/>
|
||||
<div className="absolute bottom-3 left-3 rounded bg-white/80 px-1 py-0.5 text-xs">
|
||||
Datenstand: 24.03.2024
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import {
|
|||
type SearchParamBaseMap,
|
||||
} from './store'
|
||||
import { roundPositionForURL } from './utils/roundNumber'
|
||||
import * as Immutable from "immutable";
|
||||
|
||||
type Props = {
|
||||
initialViewState: MapSearchParam
|
||||
|
|
@ -40,7 +39,12 @@ export const BaseMap = ({ initialViewState, interactiveLayerIds, boxZoom, childr
|
|||
const mapParamsRounded = roundPositionForURL({ latitude, longitude, zoom })
|
||||
const mapParamString = paramMapStringify(mapParamsRounded)
|
||||
const replaceHistory = true
|
||||
$searchParams.open({ ...params, map: mapParamString }, replaceHistory)
|
||||
$searchParams.open({
|
||||
...params,
|
||||
zoom: mapParamsRounded.zoom,
|
||||
lat: mapParamsRounded.latitude,
|
||||
lon: mapParamsRounded.longitude
|
||||
}, replaceHistory)
|
||||
}
|
||||
|
||||
// Update ?map on zoom or pan of map
|
||||
|
|
@ -51,11 +55,11 @@ export const BaseMap = ({ initialViewState, interactiveLayerIds, boxZoom, childr
|
|||
|
||||
// Set ?map to `initialViewState` if no `map` present, yet
|
||||
useEffect(() => {
|
||||
if (params.map) return
|
||||
if (params.zoom) return
|
||||
setParamsMap(initialViewState)
|
||||
}, [])
|
||||
|
||||
const latLngZoom = paramMapParse(params.map)
|
||||
const latLngZoom = params
|
||||
|
||||
const rasterAttribution='Data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, <a href="http://viewfinderpanoramas.org/">SRTM</a>, <a href="https://portal.opentopography.org/datasetMetadata?otCollectionID=OT.032021.4326.2">NASADEM</a>, <a href="https://worldcover2021.esa.int">ESA WorldCover</a>; Maps © <a href="https://www.tracestrack.com/">Tracestrack</a>'
|
||||
|
||||
|
|
@ -64,8 +68,8 @@ export const BaseMap = ({ initialViewState, interactiveLayerIds, boxZoom, childr
|
|||
initialViewState={{
|
||||
...initialViewState,
|
||||
zoom: latLngZoom.zoom || initialViewState.zoom,
|
||||
latitude: latLngZoom.latitude || initialViewState.latitude,
|
||||
longitude: latLngZoom.longitude || initialViewState.longitude,
|
||||
latitude: latLngZoom.lat || initialViewState.latitude,
|
||||
longitude: latLngZoom.lon || initialViewState.longitude,
|
||||
}}
|
||||
// Style: https://cloud.maptiler.com/maps/dataviz/
|
||||
// mapStyle="https://api.maptiler.com/maps/dataviz/style.json?key=0opClOQz7xpg46NzNSOo"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ export const $mapLoaded = atom(false)
|
|||
export const $clickedMapData = atom<MapGeoJSONFeature[] | undefined>(undefined)
|
||||
|
||||
export type SearchParamBaseMap = {
|
||||
map: string
|
||||
zoom: number
|
||||
lat: number
|
||||
lon: number
|
||||
}
|
||||
export type MapSearchParam = {
|
||||
longitude: number
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4 KiB |
|
|
@ -20,23 +20,23 @@ export const CqiMap = ({ maxBounds, minZoom, maxZoom }: Props) => {
|
|||
const params = useStore($searchParams) as SearchParamsCqiMap
|
||||
|
||||
// Guard against invalid "anzeige" param values
|
||||
if (!validAnzeigeValues.includes(params.anzeige)) {
|
||||
$searchParams.open({ ...params, ...{ anzeige: 'cqi' } })
|
||||
if (!validAnzeigeValues.includes(params.mode)) {
|
||||
$searchParams.open({ ...params, ...{ mode: 'cqi' } })
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseMap
|
||||
initialViewState={{
|
||||
longitude: 16.18278,
|
||||
latitude: 48.11833,
|
||||
zoom: 12,
|
||||
longitude: 16.37027,
|
||||
latitude: 48.20974,
|
||||
zoom: 11,
|
||||
// Only pass the props if they are implicitly present
|
||||
// Needed to get rid of Astro's strict TS settings https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes
|
||||
...(maxBounds ? { maxBounds } : {}),
|
||||
...(minZoom ? { minZoom } : {}),
|
||||
...(maxZoom ? { maxZoom } : {}),
|
||||
}}
|
||||
interactiveLayerIds={interactiveLayerIdsByGroup[params?.anzeige] || []}
|
||||
interactiveLayerIds={interactiveLayerIdsByGroup[params?.mode] || []}
|
||||
>
|
||||
<MapSourceCqi />
|
||||
<NavigationControl showCompass={false} position="top-right" />
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const MapSourceCqi = () => {
|
|||
|
||||
{Object.entries(layerByGroups).map(([groupkey, groupLayers]) => {
|
||||
return groupLayers.map((layer) => {
|
||||
const visible = params?.anzeige === groupkey
|
||||
const visible = params?.mode === groupkey
|
||||
|
||||
return (
|
||||
<Layer
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@ import { $focus, type SearchParamsCqiMap } from './storeCqi'
|
|||
export const OverlayLayerSelection = () => {
|
||||
const params = useStore($searchParams)
|
||||
// TODO: I really don't get why we need this but something prevents the rerendering of the buttons so the active state is wrong. Did not find any AstroJS Docs on this. And we are doing what we are supposed to do with nanostores.
|
||||
const [localSelected, setLocalSelected] = useState<SearchParamsCqiMap['anzeige']>('cqi')
|
||||
const [localSelected, setLocalSelected] = useState<SearchParamsCqiMap['mode']>('cqi')
|
||||
|
||||
const setSelected = (value: string) => {
|
||||
$searchParams.open({ ...params, ...{ anzeige: value } })
|
||||
$searchParams.open({ ...params, ...{ mode: value } })
|
||||
$focus.set(null)
|
||||
setLocalSelected(value as SearchParamsCqiMap['anzeige'])
|
||||
setLocalSelected(value as SearchParamsCqiMap['mode'])
|
||||
}
|
||||
|
||||
// Initialize URL with filter=none
|
||||
useEffect(() => {
|
||||
setSelected(params.anzeige || 'cqi')
|
||||
setSelected(params.mode || 'cqi')
|
||||
}, [])
|
||||
|
||||
const handleChange = (value: SearchParamsCqiMap['anzeige']) => {
|
||||
const handleChange = (value: SearchParamsCqiMap['mode']) => {
|
||||
setSelected(value)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { $focus, type SearchParamsCqiMap } from './storeCqi'
|
|||
export const OverlayLegendAndFocus = () => {
|
||||
const params = useStore($searchParams) as SearchParamsCqiMap
|
||||
const focus = useStore($focus)
|
||||
const curentLegendGroup = legendByGroups[params?.anzeige ?? 'cqi']
|
||||
const curentLegendGroup = legendByGroups[params?.mode ?? 'cqi']
|
||||
|
||||
// const map = useMap()
|
||||
// console.log(map.current?.getStyle())
|
||||
|
|
@ -40,7 +40,7 @@ export const OverlayLegendAndFocus = () => {
|
|||
<Disclosure.Panel>
|
||||
{curentLegendGroup.map((legendGroup) => {
|
||||
return (
|
||||
<div key={`${params.anzeige}-${legendGroup.title}`}>
|
||||
<div key={`${params.mode}-${legendGroup.title}`}>
|
||||
<h2 className={legendGroup.primary ? 'sr-only' : 'px-2 pb-2 text-sm'}>
|
||||
{legendGroup.title}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export const MapInspectorPrimaryInformation = ({ properties }: Props) => {
|
|||
return null
|
||||
}
|
||||
|
||||
if (params.anzeige === 'cqi') {
|
||||
if (params.mode === 'cqi') {
|
||||
// Der index berechnet sich aus base_index (Basisindex entsprechend des Wegetyps) * fac_1 (Faktor für Breite und Oberfläche) * fac_2 (Faktor für Straßenklasse und Höchstgeschwindigkeit) * fac_3 (Faktor für Physische Trennung und Sicherheitsabstand, derzeit nicht implementiert und daher immer 1) * fac_4 (Sonstige auf- oder abwertende Umgebungsvariablen). Die einzelnen Faktoren wiederum basieren insbesondere auf den proc_*-Werten, also fac_1 z.B. auf proc_width und proc_surface. Da steckt aber viel Vodoo und Gewichtungen dahinter, daher ist mMn eigentlich höchstens die Anzeige der fac_1..4 sinnvoll.
|
||||
const color = legendCqi
|
||||
.find((group) => group.primary)
|
||||
|
|
@ -35,7 +35,7 @@ export const MapInspectorPrimaryInformation = ({ properties }: Props) => {
|
|||
)
|
||||
}
|
||||
|
||||
if (params.anzeige === 'lts') {
|
||||
if (params.mode === 'lts') {
|
||||
const displayLevels = [1, 2, 3, 4]
|
||||
return (
|
||||
<div className="my-2 flex justify-center gap-1">
|
||||
|
|
@ -67,7 +67,7 @@ export const MapInspectorPrimaryInformation = ({ properties }: Props) => {
|
|||
)
|
||||
}
|
||||
|
||||
if (params.anzeige === 'incompleteness') {
|
||||
if (params.mode === 'incompleteness') {
|
||||
return (
|
||||
<div className="my-1 flex rounded bg-gray-950 p-2 text-base">
|
||||
{!properties.data_missing && <>Keine</>}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const layersSelected = [
|
|||
]
|
||||
|
||||
export const layerSelection: {
|
||||
key: SearchParamsCqiMap['anzeige']
|
||||
key: SearchParamsCqiMap['mode']
|
||||
name: string
|
||||
description: null | string
|
||||
}[] = [
|
||||
|
|
@ -59,7 +59,7 @@ export const layerSelection: {
|
|||
{ key: 'incompleteness', name: 'Datenlücken', description: null },
|
||||
]
|
||||
|
||||
export const layerByGroups: Record<SearchParamsCqiMap['anzeige'], Record<string, any>[]> = {
|
||||
export const layerByGroups: Record<SearchParamsCqiMap['mode'], Record<string, any>[]> = {
|
||||
cqi: layersCqi,
|
||||
lts: layersLts,
|
||||
incompleteness: layersIncompletness,
|
||||
|
|
@ -78,7 +78,7 @@ type Legend = {
|
|||
filterConfig: null | FilterConfig
|
||||
}
|
||||
|
||||
export const legendByGroups: Record<SearchParamsCqiMap['anzeige'], LegendGroup[]> = {
|
||||
export const legendByGroups: Record<SearchParamsCqiMap['mode'], LegendGroup[]> = {
|
||||
cqi: legendCqi,
|
||||
lts: legendLts,
|
||||
incompleteness: legendIncompletness,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const validAnzeigeValues = [
|
|||
] as const
|
||||
|
||||
export type SearchParamsCqiMap = SearchParamBaseMap & {
|
||||
anzeige: (typeof validAnzeigeValues)[number]
|
||||
mode: (typeof validAnzeigeValues)[number]
|
||||
}
|
||||
|
||||
export const $focus = atom<null | FilterConfig>(null)
|
||||
|
|
|
|||
Loading…
Reference in a new issue