kopia lustrzana https://github.com/jakecoppinger/safe-cycling-map
Improve loading notifications
rodzic
7fbd8ac1d3
commit
a7110eef7f
|
@ -104,7 +104,7 @@ h1 {
|
||||||
bottom: 15px;
|
bottom: 15px;
|
||||||
}
|
}
|
||||||
.mapboxgl-ctrl-top-left {
|
.mapboxgl-ctrl-top-left {
|
||||||
margin-top: 50px;
|
margin-top: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mapboxgl-ctrl-geocoder--icon.mapboxgl-ctrl-geocoder--icon-search {
|
.mapboxgl-ctrl-geocoder--icon.mapboxgl-ctrl-geocoder--icon-search {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import debounce from "debounce";
|
import debounce from "debounce";
|
||||||
import { OverpassResponse, RawOverpassNode } from "./interfaces";
|
import { LoadingStatusType, OverpassResponse, RawOverpassNode } from "./interfaces";
|
||||||
|
|
||||||
import * as http from "https";
|
import * as http from "https";
|
||||||
import { addStreetLayers, drawMarkersAndCards, removeMarkers, removeStreetLayers } from "./drawing";
|
import { addStreetLayers, drawMarkersAndCards, removeMarkers, removeStreetLayers } from "./drawing";
|
||||||
|
@ -14,8 +14,10 @@ import osmtogeojson from 'osmtogeojson';
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export async function getOSMData(overpassQuery: string): Promise<OverpassResponse> {
|
export async function getOSMData(overpassQuery: string): Promise<OverpassResponse> {
|
||||||
|
// overpass.kumi.systems
|
||||||
|
// hostname: "overpass-api.de",
|
||||||
const options = {
|
const options = {
|
||||||
hostname: "overpass-api.de",
|
hostname: "overpass.kumi.systems",
|
||||||
port: 443,
|
port: 443,
|
||||||
path: "/api/interpreter",
|
path: "/api/interpreter",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
@ -102,5 +104,3 @@ async function fetchAndDrawMarkers(
|
||||||
|
|
||||||
// markers.current = await drawMarkersAndCards(map, nodesAndWayCenters);
|
// markers.current = await drawMarkersAndCards(map, nodesAndWayCenters);
|
||||||
}
|
}
|
||||||
|
|
||||||
type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror";
|
|
|
@ -113,7 +113,8 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Ge
|
||||||
'layout': {},
|
'layout': {},
|
||||||
'paint': {
|
'paint': {
|
||||||
"line-color": "red",
|
"line-color": "red",
|
||||||
"line-width": 3
|
"line-width": 3,
|
||||||
|
'line-opacity': 0.3
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -124,12 +125,12 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Ge
|
||||||
'layout': {},
|
'layout': {},
|
||||||
'paint': {
|
'paint': {
|
||||||
"line-color": "orange",
|
"line-color": "orange",
|
||||||
"line-width": 3
|
"line-width": 3,
|
||||||
|
'line-opacity': 0.5
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Add a new layer to visualize the polygon.
|
// Add a new layer to visualize the polygon.
|
||||||
map.addLayer({
|
map.addLayer({
|
||||||
'id': 'greenRoadsId',
|
'id': 'greenRoadsId',
|
||||||
|
@ -137,8 +138,9 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection<Ge
|
||||||
'source': 'greenRoads', // reference the data source
|
'source': 'greenRoads', // reference the data source
|
||||||
'layout': {},
|
'layout': {},
|
||||||
'paint': {
|
'paint': {
|
||||||
"line-color": "green",
|
"line-color": "#00FF00",
|
||||||
"line-width": 7
|
"line-width": 7,
|
||||||
|
'line-opacity': 0.8
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -33,4 +33,4 @@ export type OverpassResponse = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror";
|
export type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror" | "too_zoomed_out" | "ready_to_load"
|
36
src/map.tsx
36
src/map.tsx
|
@ -15,13 +15,17 @@ import { LoadingStatusType } from "./interfaces";
|
||||||
const MAPBOX_TOKEN =
|
const MAPBOX_TOKEN =
|
||||||
"pk.eyJ1IjoiamFrZWMiLCJhIjoiY2tkaHplNGhjMDAyMDJybW4ybmRqbTBmMyJ9.AR_fnEuka8-cFb4Snp3upw";
|
"pk.eyJ1IjoiamFrZWMiLCJhIjoiY2tkaHplNGhjMDAyMDJybW4ybmRqbTBmMyJ9.AR_fnEuka8-cFb4Snp3upw";
|
||||||
|
|
||||||
|
const min_overpass_turbo_zoom = 15;
|
||||||
|
/** Also the min zoom of the vector tileserver */
|
||||||
|
// const max_overpass_turbo_zoom = 15;
|
||||||
|
|
||||||
mapboxgl.accessToken = MAPBOX_TOKEN;
|
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<mapboxgl.Map | null>(null);
|
const mapRef = React.useRef<mapboxgl.Map | null>(null);
|
||||||
const markers = React.useRef<mapboxgl.Marker[]>([]);
|
const markers = React.useRef<mapboxgl.Marker[]>([]);
|
||||||
const [loadingStatus, setLoadingStatus] =
|
const [loadingStatus, setLoadingStatus] =
|
||||||
useState<LoadingStatusType>("success");
|
useState<LoadingStatusType>("ready_to_load");
|
||||||
|
|
||||||
const [lng, setLng] = useState(151.2160755932166);
|
const [lng, setLng] = useState(151.2160755932166);
|
||||||
const [lat, setLat] = useState(-33.88056647217827);
|
const [lat, setLat] = useState(-33.88056647217827);
|
||||||
|
@ -41,7 +45,7 @@ export function Map() {
|
||||||
center: [lng, lat],
|
center: [lng, lat],
|
||||||
zoom: zoom,
|
zoom: zoom,
|
||||||
hash: true,
|
hash: true,
|
||||||
style: 'mapbox://styles/mapbox/dark-v11',
|
style: "mapbox://styles/mapbox/dark-v11",
|
||||||
});
|
});
|
||||||
|
|
||||||
const map = mapRef.current;
|
const map = mapRef.current;
|
||||||
|
@ -77,40 +81,50 @@ export function Map() {
|
||||||
}
|
}
|
||||||
const { lng, lat } = map.getCenter();
|
const { lng, lat } = map.getCenter();
|
||||||
const zoom = map.getZoom();
|
const zoom = map.getZoom();
|
||||||
|
if (zoom < min_overpass_turbo_zoom) {
|
||||||
|
setLoadingStatus("too_zoomed_out");
|
||||||
|
} else {
|
||||||
|
setLoadingStatus('ready_to_load');
|
||||||
|
}
|
||||||
console.log(lng, lat, zoom);
|
console.log(lng, lat, zoom);
|
||||||
|
|
||||||
setLng(map.getCenter().lng);
|
setLng(map.getCenter().lng);
|
||||||
setLat(map.getCenter().lat);
|
setLat(map.getCenter().lat);
|
||||||
setZoom(map.getZoom());
|
setZoom(map.getZoom());
|
||||||
});
|
});
|
||||||
debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
|
|
||||||
|
|
||||||
|
if (zoom < min_overpass_turbo_zoom) {
|
||||||
|
setLoadingStatus("too_zoomed_out");
|
||||||
|
} else {
|
||||||
|
debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
|
||||||
|
}
|
||||||
|
|
||||||
map.on("moveend", async () => {
|
map.on("moveend", async () => {
|
||||||
if (map === null) {
|
if (map === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
|
const zoom = map.getZoom();
|
||||||
|
if (zoom > min_overpass_turbo_zoom) {
|
||||||
|
debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
const statusMessages = {
|
const statusMessages = {
|
||||||
loading: "Loading from OpenStreetMap...",
|
loading: "Loading from OpenStreetMap...",
|
||||||
success: "Done loading",
|
success: "Done loading",
|
||||||
unknownerror: "Error loading data. Please wait a bit",
|
ready_to_load: "About to load...",
|
||||||
|
too_zoomed_out: "Zoom in to see street safety",
|
||||||
|
unknownerror: "Error loading. Please wait a bit",
|
||||||
"429error": "Too many requests, please try in a bit",
|
"429error": "Too many requests, please try in a bit",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const statusText = statusMessages[loadingStatus];
|
const statusText = statusMessages[loadingStatus];
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="sidebar">
|
<div className="sidebar">
|
||||||
<label>
|
<label>
|
||||||
{" "}
|
{" "}
|
||||||
{statusText} |{" "}
|
{statusText}<br></br> A work in progress side project by{" "}
|
||||||
A work in progress side project by{" "}
|
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
|
|
@ -23,7 +23,7 @@ export const safeCycleways = (boundsStr: string) => `
|
||||||
/* Select road types to display */
|
/* Select road types to display */
|
||||||
|
|
||||||
(
|
(
|
||||||
way[highway]["highway"!~"cycleway|path|footway|pedestrian"]["bicycle"!~"no"];
|
way[highway];
|
||||||
way["highway"="residential"];
|
way["highway"="residential"];
|
||||||
|
|
||||||
way[highway=cycleway];
|
way[highway=cycleway];
|
||||||
|
|
Ładowanie…
Reference in New Issue