kopia lustrzana https://github.com/jakecoppinger/safe-cycling-map
Porównaj commity
4 Commity
728ed63765
...
e84928e734
Autor | SHA1 | Data |
---|---|---|
Jake Coppinger | e84928e734 | |
Jake Coppinger | 98b96efce4 | |
Jake Coppinger | 06b79eb058 | |
Jake Coppinger | cb147dc5a4 |
|
@ -19,7 +19,7 @@ See instructions for setting up the backend tileserve at
|
||||||
|
|
||||||
Install packages:
|
Install packages:
|
||||||
`nvm install`
|
`nvm install`
|
||||||
`npm i`
|
`npm i --legacy-peer-deps`
|
||||||
|
|
||||||
Run dev server:
|
Run dev server:
|
||||||
`npm run start`
|
`npm run start`
|
||||||
|
|
|
@ -390,7 +390,9 @@ module.exports = function (webpackEnv) {
|
||||||
// See #6846 for context on why cacheCompression is disabled
|
// See #6846 for context on why cacheCompression is disabled
|
||||||
cacheCompression: false,
|
cacheCompression: false,
|
||||||
compact: isEnvProduction,
|
compact: isEnvProduction,
|
||||||
ignore: ['./node_modules/maplibre-gl/dist/maplibre-gl.js']
|
ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js',
|
||||||
|
|
||||||
|
'./node_modules/@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js']
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Process any JS outside of the app with Babel.
|
// Process any JS outside of the app with Babel.
|
||||||
|
@ -418,7 +420,9 @@ module.exports = function (webpackEnv) {
|
||||||
// show incorrect code and set breakpoints on the wrong lines.
|
// show incorrect code and set breakpoints on the wrong lines.
|
||||||
sourceMaps: shouldUseSourceMap,
|
sourceMaps: shouldUseSourceMap,
|
||||||
inputSourceMap: shouldUseSourceMap,
|
inputSourceMap: shouldUseSourceMap,
|
||||||
ignore: ['./node_modules/maplibre-gl/dist/maplibre-gl.js']
|
ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js',
|
||||||
|
'./node_modules/@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js'
|
||||||
|
]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// "postcss" loader applies autoprefixer to our CSS.
|
// "postcss" loader applies autoprefixer to our CSS.
|
||||||
|
|
Plik diff jest za duży
Load Diff
|
@ -4,6 +4,7 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "7.9.0",
|
"@babel/core": "7.9.0",
|
||||||
|
"@mapbox/mapbox-gl-directions": "^4.1.1",
|
||||||
"@svgr/webpack": "4.3.3",
|
"@svgr/webpack": "4.3.3",
|
||||||
"@typescript-eslint/eslint-plugin": "^2.10.0",
|
"@typescript-eslint/eslint-plugin": "^2.10.0",
|
||||||
"@typescript-eslint/parser": "^2.10.0",
|
"@typescript-eslint/parser": "^2.10.0",
|
||||||
|
@ -33,7 +34,7 @@
|
||||||
"jest-environment-jsdom-fourteen": "1.0.1",
|
"jest-environment-jsdom-fourteen": "1.0.1",
|
||||||
"jest-resolve": "24.9.0",
|
"jest-resolve": "24.9.0",
|
||||||
"jest-watch-typeahead": "0.4.2",
|
"jest-watch-typeahead": "0.4.2",
|
||||||
"maplibre-gl": "^2.4.0",
|
"mapbox-gl": "^2.9.2",
|
||||||
"mini-css-extract-plugin": "0.9.0",
|
"mini-css-extract-plugin": "0.9.0",
|
||||||
"optimize-css-assets-webpack-plugin": "5.0.3",
|
"optimize-css-assets-webpack-plugin": "5.0.3",
|
||||||
"pnp-webpack-plugin": "1.6.4",
|
"pnp-webpack-plugin": "1.6.4",
|
||||||
|
@ -65,7 +66,7 @@
|
||||||
"start": "PORT=5000 node scripts/start.js",
|
"start": "PORT=5000 node scripts/start.js",
|
||||||
"build": "node scripts/build.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/"
|
"deploy": "npm run build && rsync -r --progress build/ ../deploy-safe-cycling-map/ && pushd ../deploy-safe-cycling-map/ && git add -A && git commit -m \"Update\" && git push && popd && echo \"Deploy done\""
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "react-app"
|
"extends": "react-app"
|
||||||
|
@ -77,6 +78,7 @@
|
||||||
"@testing-library/react": "^9.3.2",
|
"@testing-library/react": "^9.3.2",
|
||||||
"@testing-library/user-event": "^7.1.2",
|
"@testing-library/user-event": "^7.1.2",
|
||||||
"@types/jest": "^24.0.0",
|
"@types/jest": "^24.0.0",
|
||||||
|
"@types/mapbox-gl": "^2.7.10",
|
||||||
"@types/node": "^12.0.0",
|
"@types/node": "^12.0.0",
|
||||||
"@types/react": "^16.9.0",
|
"@types/react": "^16.9.0",
|
||||||
"@types/react-dom": "^16.9.0",
|
"@types/react-dom": "^16.9.0",
|
||||||
|
|
|
@ -9,10 +9,7 @@
|
||||||
content="A map of safe cycling infrastructure. Uses OpenStreetMap data."
|
content="A map of safe cycling infrastructure. Uses OpenStreetMap data."
|
||||||
/>
|
/>
|
||||||
<title>Safe Cycling Map</title>
|
<title>Safe Cycling Map</title>
|
||||||
<link
|
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' />
|
||||||
href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<style>
|
<style>
|
||||||
#search_overlay {
|
#search_overlay {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
13
src/App.css
13
src/App.css
|
@ -42,7 +42,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#right {
|
#right {
|
||||||
width:70vw;
|
width: 70vw;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -75,9 +75,9 @@ h1 {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
|
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
border: 3px solid gray;
|
border: 3px solid gray;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
@ -99,7 +99,10 @@ h1 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
.mapboxgl-ctrl-bottom-left {
|
.mapboxgl-ctrl-bottom-left {
|
||||||
right:0;
|
right: 0;
|
||||||
left: initial;
|
left: initial;
|
||||||
bottom: 15px;
|
bottom: 15px;
|
||||||
}
|
}
|
||||||
|
.mapboxgl-ctrl-top-left {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
const layerToAddAfter = undefined;
|
const layerToAddAfter = undefined;
|
||||||
|
|
||||||
function addLayer(
|
function addLayer(
|
||||||
map: maplibregl.Map,
|
map: mapboxgl.Map,
|
||||||
type:
|
type:
|
||||||
| "Driving"
|
| "Driving"
|
||||||
| "Parking"
|
| "Parking"
|
||||||
|
@ -15,7 +15,7 @@ function addLayer(
|
||||||
| "LightRail"
|
| "LightRail"
|
||||||
| "Footway"
|
| "Footway"
|
||||||
| "SharedUse",
|
| "SharedUse",
|
||||||
paint: any // TODO: fix this. used to be maplibregl.FillPaint | undefined
|
paint: any // TODO: fix this. used to be mapboxgl.FillPaint | undefined
|
||||||
): void {
|
): void {
|
||||||
map.addLayer({
|
map.addLayer({
|
||||||
id: type,
|
id: type,
|
||||||
|
@ -50,7 +50,7 @@ const colours = {
|
||||||
SharedUse: "#E5E1BB",
|
SharedUse: "#E5E1BB",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const mapOnLoad = (map: maplibregl.Map) => () => {
|
export const mapOnLoad = (map: mapboxgl.Map) => () => {
|
||||||
const layers = map.getStyle().layers;
|
const layers = map.getStyle().layers;
|
||||||
// Find the index of the first symbol layer in the map style.
|
// Find the index of the first symbol layer in the map style.
|
||||||
let firstSymbolId;
|
let firstSymbolId;
|
||||||
|
|
51
src/map.tsx
51
src/map.tsx
|
@ -1,12 +1,19 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import maplibregl from 'maplibre-gl';
|
import mapboxgl from "mapbox-gl";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import { mapOnLoad } from "./layers";
|
import { mapOnLoad } from "./layers";
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import MapboxDirections from "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions";
|
||||||
|
import "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css";
|
||||||
|
|
||||||
|
const MAPBOX_TOKEN =
|
||||||
|
"pk.eyJ1IjoiamFrZWMiLCJhIjoiY2tkaHplNGhjMDAyMDJybW4ybmRqbTBmMyJ9.AR_fnEuka8-cFb4Snp3upw";
|
||||||
|
|
||||||
|
mapboxgl.accessToken = MAPBOX_TOKEN;
|
||||||
export function Map() {
|
export function Map() {
|
||||||
const mapContainer = React.useRef<HTMLDivElement>(null);
|
const mapContainer = React.useRef<HTMLDivElement>(null);
|
||||||
const mapRef = React.useRef<maplibregl.Map | null>(null);
|
const mapRef = React.useRef<mapboxgl.Map | null>(null);
|
||||||
|
|
||||||
const [lng, setLng] = useState(151.2160755932166);
|
const [lng, setLng] = useState(151.2160755932166);
|
||||||
const [lat, setLat] = useState(-33.88056647217827);
|
const [lat, setLat] = useState(-33.88056647217827);
|
||||||
|
@ -21,21 +28,49 @@ export function Map() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
mapRef.current = new maplibregl.Map({
|
mapRef.current = new mapboxgl.Map({
|
||||||
container: mapContainer.current,
|
container: mapContainer.current,
|
||||||
center: [lng, lat],
|
center: [lng, lat],
|
||||||
zoom: zoom,
|
zoom: zoom,
|
||||||
style: "./style.json",
|
hash: true,
|
||||||
|
style: {
|
||||||
|
version: 8,
|
||||||
|
sources: {
|
||||||
|
"raster-tiles": {
|
||||||
|
type: "raster",
|
||||||
|
tiles: [
|
||||||
|
"https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
|
||||||
|
],
|
||||||
|
tileSize: 256,
|
||||||
|
attribution:
|
||||||
|
'© <a target="_blank" href="https://www.cyclosm.org">CyclOSM</a>, <a target="_blank" href="https://github.com/a-b-street/osm2streets">osm2streets</a>, <a target="_blank" href="https://openstreetmap.org/">OpenStreetMap contributors</a>',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
layers: [
|
||||||
|
{
|
||||||
|
id: "simple-tiles",
|
||||||
|
type: "raster",
|
||||||
|
source: "raster-tiles",
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 22,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const map = mapRef.current;
|
const map = mapRef.current;
|
||||||
map.on("load", mapOnLoad(map));
|
map.on("load", mapOnLoad(map));
|
||||||
|
|
||||||
// TO FIX
|
map.addControl(new mapboxgl.NavigationControl());
|
||||||
// map.addControl(new maplibregl.NavigationControl());
|
map.addControl(new mapboxgl.FullscreenControl());
|
||||||
// map.addControl(new maplibregl.FullscreenControl());
|
|
||||||
map.addControl(
|
map.addControl(
|
||||||
new maplibregl.GeolocateControl({
|
new MapboxDirections({
|
||||||
|
accessToken: mapboxgl.accessToken,
|
||||||
|
}),
|
||||||
|
"top-left"
|
||||||
|
);
|
||||||
|
map.addControl(
|
||||||
|
new mapboxgl.GeolocateControl({
|
||||||
positionOptions: {
|
positionOptions: {
|
||||||
enableHighAccuracy: true,
|
enableHighAccuracy: true,
|
||||||
},
|
},
|
||||||
|
|
Ładowanie…
Reference in New Issue