Porównaj commity

...

5 Commity

Autor SHA1 Wiadomość Data
Jake Coppinger 728ed63765 Adjust start location 2023-01-15 22:32:49 +11:00
Jake Coppinger 9f12a7ce10 Adjust max/min zoom 2023-01-15 22:28:50 +11:00
Jake Coppinger 4e61372e26 Add deploy script and clean up 2023-01-15 22:18:39 +11:00
Jake Coppinger 71641eeaeb Add server url 2023-01-15 22:18:28 +11:00
Jake Coppinger d9d752a1f7 Use maplibre-gl instead of mapbox-gl 2023-01-11 21:30:59 +11:00
9 zmienionych plików z 12672 dodań i 119 usunięć

Wyświetl plik

@ -390,7 +390,7 @@ module.exports = function (webpackEnv) {
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction,
ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js']
ignore: ['./node_modules/maplibre-gl/dist/maplibre-gl.js']
},
},
// Process any JS outside of the app with Babel.
@ -418,7 +418,7 @@ module.exports = function (webpackEnv) {
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js']
ignore: ['./node_modules/maplibre-gl/dist/maplibre-gl.js']
},
},
// "postcss" loader applies autoprefixer to our CSS.

152
package-lock.json wygenerowano
Wyświetl plik

@ -38,7 +38,7 @@
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"mapbox-gl": "^2.9.2",
"maplibre-gl": "^2.4.0",
"mini-css-extract-plugin": "0.9.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
@ -71,7 +71,6 @@
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/mapbox-gl": "^2.7.6",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
@ -1809,11 +1808,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@mapbox/geojson-types": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
},
"node_modules/@mapbox/jsonlint-lines-primitives": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@ -1837,11 +1831,6 @@
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
},
"node_modules/@mapbox/unitbezier": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
},
"node_modules/@mapbox/vector-tile": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
@ -2267,8 +2256,7 @@
"node_modules/@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"dev": true
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
},
"node_modules/@types/glob": {
"version": "7.1.3",
@ -2325,13 +2313,19 @@
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
"integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ=="
},
"node_modules/@types/mapbox-gl": {
"version": "2.7.6",
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.7.6.tgz",
"integrity": "sha512-EPIfNO7WApXaFM7DuJBj+kpXmqffqJHMJ3Q9gbV/nNL23XHR0PC5CCDYbAFa4tKErm0xJd9C5kPLF6KvA/cRcA==",
"dev": true,
"node_modules/@types/mapbox__point-geometry": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz",
"integrity": "sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA=="
},
"node_modules/@types/mapbox__vector-tile": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.0.tgz",
"integrity": "sha512-kDwVreQO5V4c8yAxzZVQLE5tyWF+IPToAanloQaSnwfXmIcJ7cyOrv8z4Ft4y7PsLYmhWXmON8MBV8RX0Rgr8g==",
"dependencies": {
"@types/geojson": "*"
"@types/geojson": "*",
"@types/mapbox__point-geometry": "*",
"@types/pbf": "*"
}
},
"node_modules/@types/minimatch": {
@ -2349,6 +2343,11 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"node_modules/@types/pbf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.2.tgz",
"integrity": "sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ=="
},
"node_modules/@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@ -7870,11 +7869,6 @@
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
"integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
},
"node_modules/grid-index": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
},
"node_modules/growly": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@ -10259,35 +10253,43 @@
"node": ">=0.10.0"
}
},
"node_modules/mapbox-gl": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz",
"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==",
"node_modules/maplibre-gl": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.4.0.tgz",
"integrity": "sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==",
"hasInstallScript": true,
"dependencies": {
"@mapbox/geojson-rewind": "^0.5.1",
"@mapbox/geojson-types": "^1.0.2",
"@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
"@mapbox/mapbox-gl-supported": "^2.0.1",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/tiny-sdf": "^2.0.5",
"@mapbox/unitbezier": "^0.0.0",
"@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0",
"@types/geojson": "^7946.0.10",
"@types/mapbox__point-geometry": "^0.1.2",
"@types/mapbox__vector-tile": "^1.3.0",
"@types/pbf": "^3.0.2",
"csscolorparser": "~1.0.3",
"earcut": "^2.2.4",
"geojson-vt": "^3.2.1",
"gl-matrix": "^3.4.3",
"grid-index": "^1.1.0",
"global-prefix": "^3.0.0",
"murmurhash-js": "^1.0.0",
"pbf": "^3.2.1",
"potpack": "^1.0.2",
"quickselect": "^2.0.0",
"rw": "^1.3.3",
"supercluster": "^7.1.4",
"supercluster": "^7.1.5",
"tinyqueue": "^2.0.3",
"vt-pbf": "^3.1.3"
}
},
"node_modules/maplibre-gl/node_modules/@mapbox/unitbezier": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
},
"node_modules/md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -14099,11 +14101,6 @@
"aproba": "^1.1.1"
}
},
"node_modules/rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
},
"node_modules/rxjs": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",
@ -18896,11 +18893,6 @@
}
}
},
"@mapbox/geojson-types": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
},
"@mapbox/jsonlint-lines-primitives": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@ -18921,11 +18913,6 @@
"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
},
"@mapbox/unitbezier": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
},
"@mapbox/vector-tile": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
@ -19259,8 +19246,7 @@
"@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"dev": true
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
},
"@types/glob": {
"version": "7.1.3",
@ -19317,13 +19303,19 @@
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
"integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ=="
},
"@types/mapbox-gl": {
"version": "2.7.6",
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.7.6.tgz",
"integrity": "sha512-EPIfNO7WApXaFM7DuJBj+kpXmqffqJHMJ3Q9gbV/nNL23XHR0PC5CCDYbAFa4tKErm0xJd9C5kPLF6KvA/cRcA==",
"dev": true,
"@types/mapbox__point-geometry": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz",
"integrity": "sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA=="
},
"@types/mapbox__vector-tile": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.0.tgz",
"integrity": "sha512-kDwVreQO5V4c8yAxzZVQLE5tyWF+IPToAanloQaSnwfXmIcJ7cyOrv8z4Ft4y7PsLYmhWXmON8MBV8RX0Rgr8g==",
"requires": {
"@types/geojson": "*"
"@types/geojson": "*",
"@types/mapbox__point-geometry": "*",
"@types/pbf": "*"
}
},
"@types/minimatch": {
@ -19341,6 +19333,11 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"@types/pbf": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.2.tgz",
"integrity": "sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ=="
},
"@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@ -23862,11 +23859,6 @@
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
"integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
},
"grid-index": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
},
"growly": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@ -25758,33 +25750,42 @@
"object-visit": "^1.0.0"
}
},
"mapbox-gl": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz",
"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==",
"maplibre-gl": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.4.0.tgz",
"integrity": "sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==",
"requires": {
"@mapbox/geojson-rewind": "^0.5.1",
"@mapbox/geojson-types": "^1.0.2",
"@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
"@mapbox/mapbox-gl-supported": "^2.0.1",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/tiny-sdf": "^2.0.5",
"@mapbox/unitbezier": "^0.0.0",
"@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0",
"@types/geojson": "^7946.0.10",
"@types/mapbox__point-geometry": "^0.1.2",
"@types/mapbox__vector-tile": "^1.3.0",
"@types/pbf": "^3.0.2",
"csscolorparser": "~1.0.3",
"earcut": "^2.2.4",
"geojson-vt": "^3.2.1",
"gl-matrix": "^3.4.3",
"grid-index": "^1.1.0",
"global-prefix": "^3.0.0",
"murmurhash-js": "^1.0.0",
"pbf": "^3.2.1",
"potpack": "^1.0.2",
"quickselect": "^2.0.0",
"rw": "^1.3.3",
"supercluster": "^7.1.4",
"supercluster": "^7.1.5",
"tinyqueue": "^2.0.3",
"vt-pbf": "^3.1.3"
},
"dependencies": {
"@mapbox/unitbezier": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
}
}
},
"md5.js": {
@ -28890,11 +28891,6 @@
"aproba": "^1.1.1"
}
},
"rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
},
"rxjs": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",

Wyświetl plik

@ -33,7 +33,7 @@
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"mapbox-gl": "^2.9.2",
"maplibre-gl": "^2.4.0",
"mini-css-extract-plugin": "0.9.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
@ -64,7 +64,8 @@
"scripts": {
"start": "PORT=5000 node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
"test": "node scripts/test.js",
"deploy": "npm run build && rsync -r --progress build/ ../deploy-safe-cycling-map/"
},
"eslintConfig": {
"extends": "react-app"
@ -76,7 +77,6 @@
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/mapbox-gl": "^2.7.6",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",

1
public/CNAME 100644
Wyświetl plik

@ -0,0 +1 @@
safecyclingmap.com

File diff suppressed because one or more lines are too long

Wyświetl plik

@ -9,7 +9,10 @@
content="A map of safe cycling infrastructure. Uses OpenStreetMap data."
/>
<title>Safe Cycling Map</title>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<link
href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
#search_overlay {
border-radius: 3px;
@ -48,13 +51,10 @@
#search_overlay p {
margin: 20px 0 10px 0 !important;
}
}
</style>
</head>
<body>
<h1>Safe<br />Cycling<br />Map.</h1>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

12557
public/style.json 100644

Plik diff jest za duży Load Diff

Wyświetl plik

@ -1,5 +1,8 @@
// TODO: Find the layer of the road labels for the maptiler background
const layerToAddAfter = undefined;
function addLayer(
map: mapboxgl.Map,
map: maplibregl.Map,
type:
| "Driving"
| "Parking"
@ -12,7 +15,7 @@ function addLayer(
| "LightRail"
| "Footway"
| "SharedUse",
paint: mapboxgl.FillPaint | undefined
paint: any // TODO: fix this. used to be maplibregl.FillPaint | undefined
): void {
map.addLayer({
id: type,
@ -22,7 +25,7 @@ function addLayer(
paint,
filter: ["==", "type", type],
// filter: ["==", "$type", "Polygon"],
}, 'road-label');
}, layerToAddAfter);
}
const colours = {
@ -47,7 +50,7 @@ const colours = {
SharedUse: "#E5E1BB",
};
export const mapOnLoad = (map: mapboxgl.Map) => () => {
export const mapOnLoad = (map: maplibregl.Map) => () => {
const layers = map.getStyle().layers;
// Find the index of the first symbol layer in the map style.
let firstSymbolId;
@ -67,9 +70,11 @@ export const mapOnLoad = (map: mapboxgl.Map) => () => {
// Add a new vector tile source with ID 'mapillary'.
map.addSource("osm2streets-vector-tileserver", {
type: "vector",
tiles: ["http://localhost:3000/tile/{z}/{x}/{y}"],
minzoom: 15,
maxzoom: 20,
tiles: ["https://api.safecyclingmap.com/tile/{z}/{x}/{y}"],
// tiles: ["http://localhost:3000/tile/{z}/{x}/{y}"],
minzoom: 16,
maxzoom: 19,
});
// addLayer(map, "LightRail", {
@ -156,7 +161,7 @@ export const mapOnLoad = (map: mapboxgl.Map) => () => {
- control": "Signed" | "Signalled" | "Uncontrolled"
*/
filter: ["==", "type", "intersection"],
}, 'road-label');
}, layerToAddAfter);
// // Currently on the wrong side of ways??
// addLayer(map, "Parking", {
@ -175,7 +180,7 @@ export const mapOnLoad = (map: mapboxgl.Map) => () => {
},
filter: ["==", "type", "Biking"],
// filter: ["==", "type", "Biking"],
}, 'road-label');
}, layerToAddAfter);
map.addLayer({
id: "intersectionMarkings",
@ -188,7 +193,7 @@ export const mapOnLoad = (map: mapboxgl.Map) => () => {
"fill-opacity": 0.8,
},
filter: ["==", "$type", "Polygon"],
}, 'road-label');
}, layerToAddAfter);
map.addLayer({
id: "laneMarkings",
@ -201,5 +206,5 @@ export const mapOnLoad = (map: mapboxgl.Map) => () => {
"fill-opacity": 1,
},
filter: ["==", "$type", "Polygon"],
}, 'road-label');
}, layerToAddAfter);
};

Wyświetl plik

@ -1,23 +1,16 @@
import React, { useRef, useEffect, useState } from "react";
// @ts-ignore
// eslint-disable-next-line
// import mapboxgl from "!mapbox-gl";
import mapboxgl from "mapbox-gl";
import React, { useEffect, useState } from "react";
import maplibregl from 'maplibre-gl';
import "./App.css";
import { mapOnLoad } from "./layers";
const MAPBOX_TOKEN =
"pk.eyJ1IjoiamFrZWMiLCJhIjoiY2tkaHplNGhjMDAyMDJybW4ybmRqbTBmMyJ9.AR_fnEuka8-cFb4Snp3upw";
mapboxgl.accessToken = MAPBOX_TOKEN;
export function Map() {
const mapContainer = React.useRef<HTMLDivElement>(null);
const mapRef = React.useRef<mapboxgl.Map | null>(null);
const mapRef = React.useRef<maplibregl.Map | null>(null);
const [lng, setLng] = useState(151.21084276742022);
const [lat, setLat] = useState(-33.8720286260115);
const [zoom, setZoom] = useState(17);
const [lng, setLng] = useState(151.2160755932166);
const [lat, setLat] = useState(-33.88056647217827);
const [zoom, setZoom] = useState(17.504322191852786);
useEffect(() => {
// This is called on every pan
@ -28,21 +21,21 @@ export function Map() {
return;
}
mapRef.current = new mapboxgl.Map({
mapRef.current = new maplibregl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/streets-v12",
// style: "mapbox://styles/mapbox/dark-v10",
center: [lng, lat],
zoom: zoom,
style: "./style.json",
});
const map = mapRef.current;
map.on("load", mapOnLoad(map));
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());
// TO FIX
// map.addControl(new maplibregl.NavigationControl());
// map.addControl(new maplibregl.FullscreenControl());
map.addControl(
new mapboxgl.GeolocateControl({
new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
},
@ -68,7 +61,7 @@ export function Map() {
<div>
<div className="sidebar">
<label>
A work in progrss side project by{" "}
A work in progress side project by{" "}
<a
target="_blank"
rel="noopener noreferrer"