diff --git a/README.md b/README.md index 32a6eb0..6c5e2e1 100644 --- a/README.md +++ b/README.md @@ -41,4 +41,4 @@ Thank you to [Mapbox](https://www.mapbox.com/) for sponsoring this project! ## Updates * **January 2022**: The [global version](https://river-runner-global.samlearner.com/) of this tool is now released and in beta! While some lingering issues are resolved and it remains in beta, it can be found on this branch, while the original, US-only version is preserved [here](https://github.com/sdl60660/river-runner/tree/us-only) in Github, and at its original URL: https://river-runner.samlearner.com/. This is to avoid any breaking changes to existing share links/paths due to any discrepancies and because minor US issues persist on the global version, mainly when paths involve dams, canals, or conduits. -If you'd like to be notified about major updates to the tool, you can sign up for an email list [here](https://tinyletter.com/samlearner) +If you'd like to be notified about major updates to the tool, you can sign up for an email list [here](https://tinyletter.com/samlearner). diff --git a/package.json b/package.json index ea86bd1..ba6e091 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "river-runner", - "version": "2.2.2", + "version": "2.3.0", "private": true, "author": "Sam Learner", "repository": { @@ -21,12 +21,14 @@ "eslint-config-airbnb-base": "^14.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-svelte3": "^3.2.0", + "node-sass": "^7.0.1", "rollup": "^2.3.4", "rollup-plugin-css-only": "^3.1.0", "rollup-plugin-livereload": "^2.0.0", "rollup-plugin-svelte": "^7.0.0", "rollup-plugin-terser": "^7.0.0", - "svelte": "^3.0.0" + "svelte": "^3.0.0", + "svelte-preprocess": "^4.10.7" }, "dependencies": { "@rollup/plugin-json": "^4.1.0", @@ -53,7 +55,7 @@ "d3-fetch": "^2.0.0", "dateformat": "^4.5.1", "fast-xml-parser": "^3.19.0", - "mapbox-gl": "2.3", + "mapbox-gl": "^2.9.1", "node-html-parser": "^3.3.5", "scrollama": "^2.2.2", "sirv-cli": "^1.0.0", diff --git a/rollup.config.js b/rollup.config.js index b0caf07..ee32619 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -6,6 +6,9 @@ import { terser } from 'rollup-plugin-terser'; import css from 'rollup-plugin-css-only'; import json from '@rollup/plugin-json'; +import autoPreprocess from 'svelte-preprocess'; + + const production = !process.env.ROLLUP_WATCH; function serve() { @@ -42,7 +45,8 @@ export default { compilerOptions: { // enable run-time checks when not in production // dev: !production - } + }, + preprocess: autoPreprocess() }), // we'll extract any component CSS out into // a separate file - better for performance diff --git a/src/components/CloseButton.svelte b/src/components/CloseButton.svelte index c9beb46..2ebb84e 100644 --- a/src/components/CloseButton.svelte +++ b/src/components/CloseButton.svelte @@ -1,96 +1,101 @@ + + \ No newline at end of file diff --git a/src/components/ContactBox.svelte b/src/components/ContactBox.svelte index 73220fc..43c2d48 100644 --- a/src/components/ContactBox.svelte +++ b/src/components/ContactBox.svelte @@ -40,19 +40,33 @@

Sources: The data used in this project comes from the River Runner API, which is based on several open source projects and - datasets and developed by - Dave Blodgett, - Kyle Onda, and - Ben Webb. - Learn about it + datasets and developed by + Dave Blodgett, + Kyle Onda, and + Ben Webb. Learn about it here.

- -

Code and data for this project lives - here. Thank you to Mapbox for sponsoring. + >. +

+ +

+ Code and data for this project lives + here. Thank you to + Mapbox for + sponsoring.

This version of the app is in beta. Report any issues you experience - diff --git a/src/components/Map.svelte b/src/components/Map.svelte index 86d9f79..9873d9c 100644 --- a/src/components/Map.svelte +++ b/src/components/Map.svelte @@ -64,9 +64,11 @@ ? { lngLat: { lat: +urlParams.get("lat"), lng: +urlParams.get("lng") } } : null; + const mobileBreakpoint = 700; + let container; let map; - let mapBounds = bounds; + // let mapBounds = bounds; let geocoder = null; let runSettings = {}; @@ -86,7 +88,8 @@ let phaseJump; // Zoom level won't be adjustable on mobile, but it will be set slightly higher to avoid jiterriness - const defaultAltitudeMultiplier = window.innerWidth < 700 ? 1.1 : 0.9; + const defaultAltitudeMultiplier = + window.innerWidth < mobileBreakpoint ? 1.1 : 0.9; let altitudeMultiplier = defaultAltitudeMultiplier; let altitudeChange = false; let paused = false; @@ -116,25 +119,21 @@ container, style: mapStyle || "mapbox://styles/mapbox/light-v10", center: [0, 0], - zoom: 9, - minZoom: 2, - maxBounds: [ - [-500, -65], - [500, 85], - ], - // projection: 'naturalEarth' + minZoom: window.innerWidth > mobileBreakpoint ? 2 : 1.4, + zoom: window.innerWidth > mobileBreakpoint ? 2.001 : 1.4001, + projection: "globe", }); - map.fitBounds(bounds, { animate: false, padding: 30 }); + map.fitBounds(bounds, { animate: false, padding: 10 }); if (startingSearch) { map.jumpTo({ center: startingSearch.lngLat, }); } - mapBounds = map.getBounds(); + // mapBounds = map.getBounds(); - map.dragRotate.disable(); - map.touchZoomRotate.disableRotation(); + // map.dragRotate.disable(); + // map.touchZoomRotate.disableRotation(); map.on("load", () => { // If there's feature data passed in as a prop (doesn't really happen anymore), render rivers on load @@ -156,12 +155,12 @@ // Initialize and add explicit zoom controls in top-left corner, if not on mobile const nav = new mapbox.NavigationControl({ - showCompass: false, + showCompass: true, visualizePitch: true, }); - if (window.innerWidth > 700) { - map.addControl(nav, "top-left"); - } + // if (window.innerWidth > mobileBreakpoint) { + map.addControl(nav, "top-left"); + // } // If starting coordinates were passed in as a parameter (from a shared link), load starting path if (startingSearch) { @@ -172,7 +171,7 @@ map.on("click", async (e) => { if (vizState === "uninitialized") { - initRunner({ map, e }); + initRunner({ map, e, searched: false }); } }); }; @@ -196,7 +195,7 @@ flyTo: false, }); - if (window.innerWidth < 700) { + if (window.innerWidth < mobileBreakpoint) { geocoderControl.setLimit(4); } @@ -208,16 +207,17 @@ }; geocoderControl.clear(); - initRunner({ map, e: result }); + initRunner({ map, e: result, searched: true }); }); - const position = window.innerWidth > 700 ? "top-right" : "bottom-left"; + const position = + window.innerWidth > mobileBreakpoint ? "top-right" : "bottom-left"; map.addControl(geocoderControl, position); return geocoderControl; }; - const initRunner = async ({ map, e }) => { + const initRunner = async ({ map, e, searched = false }) => { // If a click is in the middle of processing, just return if (map.interactive === false) { return; @@ -241,24 +241,18 @@ currentLocation = e.lngLat; startCoordinates = e.lngLat; - try { - mapBounds = map.getBounds(); - } catch (e) { - // console.error(e); - return; - } - - if (!mapBounds.contains(e.lngLat)) { + // if (!mapBounds.contains(e.lngLat)) { + if (searched === true) { map.flyTo({ center: e.lngLat, - speed: 0.9, - zoom: 4, + speed: 0.8, + zoom: 4.8, }); map.once("moveend", () => { setTimeout(() => { initializeData({ map, e }); - }, 300); + }, 400); }); } else { initializeData({ map, e }); @@ -336,9 +330,10 @@ let terrainElevationMultiplier = 1.2; let cameraBaseAltitude = 4300; + const elevationArrayStep = Math.max( 2, - Math.round(Math.min(coordinatePath.length / 4 - 1, 100)) + Math.round(Math.min(coordinatePath.length / 4 - 1, 20)) ); // Sometimes while 3D tiles are still loading, the queryTerrainElevation method doesn't hit, @@ -348,7 +343,7 @@ let attempts = 0; while ( - attempts < 10 && + attempts < 8 && (elevations === null || elevations.every((d) => d === null)) ) { await sleep(200); @@ -444,7 +439,7 @@ // When using the vizState change/return instead of startRun, it displays the overview before automatically starting the run // We'll do this with a countdown timer on desktop, and just right into it on mobile - if (window.innerWidth > 700) { + if (window.innerWidth > mobileBreakpoint) { vizState = "overview"; // map.scrollZoom.enable(); // map.dragPan.enable(); @@ -1047,7 +1042,7 @@ pitch: 0, padding: 70, maxZoom: 12, - offset: window.innerWidth < 700 ? [0, -20] : [0, 0], // On mobile, the search bar will get in the way so we actually want it a little off center + offset: window.innerWidth < mobileBreakpoint ? [0, -20] : [0, 0], // On mobile, the search bar will get in the way so we actually want it a little off center }); map.once("moveend", () => { @@ -1098,9 +1093,9 @@ clearRiverLines({ map, sourceID: "highlighted-section" }); }; - const handleResize = () => { - mapBounds = map.getBounds(); - }; + // const handleResize = () => { + // mapBounds = map.getBounds(); + // }; const exitFunction = () => { aborted = true; @@ -1187,17 +1182,18 @@ } }; - $: coordinates.update(() => { - if (mapBounds._sw) { - return [ - [mapBounds._sw.lat, mapBounds._ne.lat], - [mapBounds._sw.lng, mapBounds._ne.lng], - ]; - } - }); + // $: coordinates.update(() => { + // console.log(mapBounds) + // if (mapBounds._sw) { + // return [ + // [mapBounds._sw.lat, mapBounds._ne.lat], + // [mapBounds._sw.lng, mapBounds._ne.lng], + // ]; + // } + // }); - +

- {#if window.innerWidth > 700 && advancedFeaturesOn === true} + {#if window.innerWidth > mobileBreakpoint && advancedFeaturesOn === true} -