Skip to content

Commit

Permalink
Clean up title, network, and neighbourhood modes...
Browse files Browse the repository at this point in the history
  • Loading branch information
@dabreegster
dabreegster committed Jan 13, 2024
1 parent 8a7dd76 commit c3e744a
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 68 deletions.
13 changes: 5 additions & 8 deletions web/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import { FillLayer, GeoJSON, MapLibre } from "svelte-maplibre";
import { Layout } from "./common";
import { RouteTool } from "./common/route_tool";
import ManageSavefiles from "./ManageSavefiles.svelte";
import NeighbourhoodMode from "./NeighbourhoodMode.svelte";
import NetworkMode from "./NetworkMode.svelte";
import RouteMode from "./RouteMode.svelte";
Expand Down Expand Up @@ -79,20 +78,18 @@

<Layout>
<div slot="left">
<div bind:this={sidebarDiv} />

<hr />

{#if $app}
<div><button on:click={zoomToFit}>Zoom to fit</button></div>
<div><button on:click={zoomToFit}>Zoom to fit study area</button></div>
{/if}
<div>
<label
><input type="checkbox" bind:checked={$showBasemap} />Show basemap</label
>
</div>
{#if $app}
<ManageSavefiles />
{/if}
<hr />

<div bind:this={sidebarDiv} />
</div>
<div slot="main" style="position:relative; width: 100%; height: 100vh;">
<MapLibre
Expand Down
27 changes: 15 additions & 12 deletions web/src/ManageSavefiles.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,20 @@
}
</script>

<div><button on:click={saveGj}>Save to GJ</button></div>
<div>
<label>
Load edits from GJ
<input bind:this={fileInput} on:change={loadFile} type="file" />
</label>
</div>
<div>
<button on:click={saveLocalStorage}>Save to local storage</button><button
on:click={loadLocalStorage}>Load from local storage</button
>
</div>
<details>
<summary>Save / load project</summary>
<div><button on:click={saveGj}>Save to GJ</button></div>
<div>
<label>
Load edits from GJ
<input bind:this={fileInput} on:change={loadFile} type="file" />
</label>
</div>
<div>
<button on:click={saveLocalStorage}>Save to local storage</button><button
on:click={loadLocalStorage}>Load from local storage</button
>
</div>
</details>

<Loading {msg} />
64 changes: 31 additions & 33 deletions web/src/MapLoader.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,38 +77,36 @@

<Loading {msg} />

<div style="border: 1px solid black; padding: 8px;">
<div>
<label>
Load an osm.xml or a .pbf file:
<input bind:this={fileInput} on:change={loadFile} type="file" />
</label>
</div>

<div>
<label>
Or load an example:
<select bind:value={$example}>
<option value="">Custom file loaded</option>
<option value="akihabara">Akihabara</option>
<option value="hanegi">Hanegi Park</option>
<option value="harujuku">Harujuku</option>
<option value="taipei_main_station">Taipei main station</option>
<option value="ximending">Ximending</option>
<option value="hong_kong">Hong Kong</option>
<option value="kowloon">Kowloon</option>
<option value="bristol">Bristol</option>
<option value="elephant_castle">Elephant & Castle</option>
<option value="westminster">Westminster</option>
<option value="montlake">Montlake</option>
</select>
</label>
</div>
<div>
<label>
Load an example:
<select bind:value={$example}>
<option value="">Custom file loaded</option>
<option value="akihabara">Akihabara</option>
<option value="hanegi">Hanegi Park</option>
<option value="harujuku">Harujuku</option>
<option value="taipei_main_station">Taipei main station</option>
<option value="ximending">Ximending</option>
<option value="hong_kong">Hong Kong</option>
<option value="kowloon">Kowloon</option>
<option value="bristol">Bristol</option>
<option value="elephant_castle">Elephant & Castle</option>
<option value="westminster">Westminster</option>
<option value="montlake">Montlake</option>
</select>
</label>
</div>

<OverpassSelector
map={$map}
on:gotXml={gotXml}
on:loading={(e) => (msg = e.detail)}
on:error={(e) => window.alert(e.detail)}
/>
<div>
<label>
Load an osm.xml or a .pbf file:
<input bind:this={fileInput} on:change={loadFile} type="file" />
</label>
</div>

<OverpassSelector
map={$map}
on:gotXml={gotXml}
on:loading={(e) => (msg = e.detail)}
on:error={(e) => window.alert(e.detail)}
/>
52 changes: 41 additions & 11 deletions web/src/NeighbourhoodMode.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
import ChangeModalFilter from "./ChangeModalFilter.svelte";
import { notNull, PropertiesTable } from "./common";
import FreehandLine from "./FreehandLine.svelte";
import ManageSavefiles from "./ManageSavefiles.svelte";
import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
import SplitComponent from "./SplitComponent.svelte";
import { app, map, mode } from "./stores";
Expand Down Expand Up @@ -98,21 +99,45 @@
addingMultipleFilters = false;
}
function resetTitle() {
// TODO Confirm
$mode = { mode: "title" };
$app = null;
}
</script>

<svelte:window on:keydown={onKeyDown} />

<SplitComponent>
<div slot="sidebar">
<h1>Editing modal filters</h1>
<p>
Now that you've defined a neighbourhood boundary, you can see the possible
shortcuts that vehicles are currently able to take through it. You can add
a new modal filter to try and solve this. The colored "cell" areas show
what's reachable for drivers without leaving the boundary you've drawn.
</p>

<div>
<button on:click={resetTitle}
>Start over and change your study area</button
>
</div>
<div>
<button on:click={pickNewNeighbourhood}>Pick new neighbourghood</button>
<button on:click={pickNewNeighbourhood}
>Pick a different neighbourhood boundary</button
>
</div>
<div>
<button
on:click={() => ($mode = { mode: "set-boundary", existing: boundary })}
>Edit boundary</button
>Change this neighbourhood boundary</button
>
</div>

<hr />

<div>
<button
on:click={() => (addingFilter = true)}
Expand All @@ -130,15 +155,6 @@
>Change modal filter type</button
>
</div>
<div>
<button on:click={() => ($mode = { mode: "view-shortcuts" })}
>View shortcuts</button
>
</div>
<div>
<button on:click={() => ($mode = { mode: "route" })}>Route</button>
</div>

<div>
<button disabled={undoLength == 0} on:click={undo}>
{#if undoLength == 0}
Expand All @@ -162,6 +178,20 @@
on:close={() => (settingFilterType = false)}
/>
{/if}

<hr />

<div>
<button on:click={() => ($mode = { mode: "view-shortcuts" })}
>View shortcuts</button
>
</div>
<div>
<button on:click={() => ($mode = { mode: "route" })}>Route</button>
</div>

<hr />
<ManageSavefiles />
</div>

<div slot="map">
Expand Down
28 changes: 27 additions & 1 deletion web/src/NetworkMode.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,44 @@
<script lang="ts">
import { GeoJSON, LineLayer, Popup } from "svelte-maplibre";
import { notNull, PropertiesTable } from "./common";
import ManageSavefiles from "./ManageSavefiles.svelte";
import SplitComponent from "./SplitComponent.svelte";
import { app, mode } from "./stores";
function resetTitle() {
$mode = { mode: "title" };
$app = null;
}
</script>

<SplitComponent>
<div slot="sidebar">
<h1>Define neighbourhood boundaries</h1>
<p>
Inside the neighbourhood you define, the goal is to eliminate (or
deliberately permit) through-traffic. An appropriate neighbourhood
boundary depends on many factors. The simplest approach is to find the
area bounded on all sides by "main" roads, which are designed for higher
traffic volumes. There are many other considerations, though -- maybe
severances like rivers or rail should be part of a boundary. Bridges and
tunnels near a boundary may be confusing as well. And note that your
boundary may not match the conventional definition of "neighbourhood."
</p>

<div>
<button on:click={resetTitle}
>Start over and change your study area</button
>
</div>
<div>
<button
on:click={() => ($mode = { mode: "set-boundary", existing: null })}
>Set boundary</button
>Draw a new boundary</button
>
</div>

<hr />
<ManageSavefiles />
</div>

<div slot="map">
Expand Down
4 changes: 3 additions & 1 deletion web/src/SetBoundaryMode.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
};
route_tool.clearEventListeners();
} catch (err) {
window.alert("Known georust bug hit, sorry");
window.alert(
"Known georust bug hit, sorry. You may need to just refresh the page now."
);
$mode = {
mode: "network",
};
Expand Down
37 changes: 35 additions & 2 deletions web/src/TitleMode.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,49 @@
<div slot="sidebar">
{#if showModal}
<Modal on:close={() => (showModal = false)} let:dialog>
<h1>The LTN tool</h1>
<p>...</p>
<h1>The Low-traffic neighbourhood (LTN) tool, v2</h1>
<p>
This is an <b>experimental</b> version of the
<a
href="https://a-b-street.github.io/docs/software/ltn/index.html"
target="_blank">A/B Street LTN tool</a
>. Most parts of it do not work yet, and you should probably use the
other version of the tool instead.
</p>
<p>To use this tool, you need to:</p>
<ol>
<li>Choose your study area to analyze</li>
<li>Define one or more neighbourhood boundaries</li>
<li>
Optionally, to fix the basemap data on existing modal filters, turn
restrictions, one-ways, etc
</li>
<li>
To create one or more proposals with new modal filters, and explore
their effects
</li>
</ol>
<p>
This tool is created by <a
href="https://github.com/dabreegster/"
target="_blank">Dustin Carlino</a
>
and relies heavily on
<a href="https://www.openstreetmap.org/about" target="_blank"
>OpenStreetMap</a
> data.
</p>
<center
><button on:click={() => notNull(dialog).close()}>Start!</button
></center
>
</Modal>
{/if}

<h1>Choose your study area</h1>
<button on:click={() => (showModal = true)}>About the LTN tool</button>
<hr />

{#if $map && wasmReady}
<MapLoader />
{:else}
Expand Down

0 comments on commit c3e744a

Please sign in to comment.