diff --git a/src/App.css b/src/App.css index 0c9bc55..aef29c0 100644 --- a/src/App.css +++ b/src/App.css @@ -104,7 +104,7 @@ h1 { bottom: 15px; } .mapboxgl-ctrl-top-left { - margin-top: 50px; + margin-top: 70px; } .mapboxgl-ctrl-geocoder--icon.mapboxgl-ctrl-geocoder--icon-search { diff --git a/src/api.ts b/src/api.ts index 1bb97ac..76e1b81 100644 --- a/src/api.ts +++ b/src/api.ts @@ -1,5 +1,5 @@ import debounce from "debounce"; -import { OverpassResponse, RawOverpassNode } from "./interfaces"; +import { LoadingStatusType, OverpassResponse, RawOverpassNode } from "./interfaces"; import * as http from "https"; import { addStreetLayers, drawMarkersAndCards, removeMarkers, removeStreetLayers } from "./drawing"; @@ -14,8 +14,10 @@ import osmtogeojson from 'osmtogeojson'; * @returns */ export async function getOSMData(overpassQuery: string): Promise { + // overpass.kumi.systems + // hostname: "overpass-api.de", const options = { - hostname: "overpass-api.de", + hostname: "overpass.kumi.systems", port: 443, path: "/api/interpreter", method: "POST", @@ -102,5 +104,3 @@ async function fetchAndDrawMarkers( // markers.current = await drawMarkersAndCards(map, nodesAndWayCenters); } - -type LoadingStatusType = "loading" | "success" | "429error" | "unknownerror"; \ No newline at end of file diff --git a/src/drawing.ts b/src/drawing.ts index 4158c83..37cbfea 100644 --- a/src/drawing.ts +++ b/src/drawing.ts @@ -113,7 +113,8 @@ export function addStreetLayers(map: mapboxgl.Map, geoJson: FeatureCollection(null); const mapRef = React.useRef(null); const markers = React.useRef([]); const [loadingStatus, setLoadingStatus] = - useState("success"); + useState("ready_to_load"); const [lng, setLng] = useState(151.2160755932166); const [lat, setLat] = useState(-33.88056647217827); @@ -41,7 +45,7 @@ export function Map() { center: [lng, lat], zoom: zoom, hash: true, - style: 'mapbox://styles/mapbox/dark-v11', + style: "mapbox://styles/mapbox/dark-v11", }); const map = mapRef.current; @@ -77,40 +81,50 @@ export function Map() { } const { lng, lat } = map.getCenter(); const zoom = map.getZoom(); + if (zoom < min_overpass_turbo_zoom) { + setLoadingStatus("too_zoomed_out"); + } else { + setLoadingStatus('ready_to_load'); + } console.log(lng, lat, zoom); setLng(map.getCenter().lng); setLat(map.getCenter().lat); 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 () => { if (map === null) { return; } - debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus); + const zoom = map.getZoom(); + if (zoom > min_overpass_turbo_zoom) { + debouncedFetchAndDrawMarkers(map, markers, setLoadingStatus); + } }); - - }); const statusMessages = { loading: "Loading from OpenStreetMap...", 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", }; - const statusText = statusMessages[loadingStatus]; return (