Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix flyTo bug #34

Closed
wants to merge 38 commits into from
Closed

fix flyTo bug #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
c8a1833
add fullscreen control to bottom-right container
JoshMLeslie Jan 21, 2025
9f975cf
remove background listener that was closing and "easing" sidebar / ma…
JoshMLeslie Jan 22, 2025
37ae838
bump mapbox version to latest
JoshMLeslie Jan 22, 2025
c546c2b
bump links in header
JoshMLeslie Jan 22, 2025
319b9c4
move html out of map div
JoshMLeslie Jan 22, 2025
a87d54d
add search bar and relative error UI
JoshMLeslie Jan 22, 2025
840bfc9
refactor flyTo defaults for consistency
JoshMLeslie Jan 22, 2025
f3c14eb
add lodash debounce minified code
JoshMLeslie Jan 22, 2025
e42ef03
add geocoding API based on census.gov endpoint
JoshMLeslie Jan 22, 2025
a34c7cc
add search-bar binding / handling
JoshMLeslie Jan 22, 2025
49e716f
fix missing containerEl
JoshMLeslie Jan 22, 2025
e4f1436
maybe fix things not calling / overcalling
JoshMLeslie Jan 22, 2025
fa8f624
remove errant debug
JoshMLeslie Jan 22, 2025
bf16934
fix.import.
JoshMLeslie Jan 22, 2025
4803c53
remove census geocoder as it doesn't support CORS, only JSONP
JoshMLeslie Jan 22, 2025
b7d61cb
mapbox is powerful and frustratingly static
JoshMLeslie Jan 22, 2025
0959a44
rename file init heatmap -> load heatmap for uniformity
JoshMLeslie Jan 22, 2025
03d82b9
refactor 3d building layer block to own file
JoshMLeslie Jan 22, 2025
8632af3
refactor network animation lines to start / stop based on checkbox in…
JoshMLeslie Jan 22, 2025
02291b8
add style layer control
JoshMLeslie Jan 22, 2025
80fbb5e
fix layer (re)loading issue when switching styles
JoshMLeslie Jan 22, 2025
66a328f
reset heatmap on layer style reset
JoshMLeslie Jan 22, 2025
18ee781
refactor load icons into a promise.all as network points is dependent…
JoshMLeslie Jan 22, 2025
4a393f2
refactor loadIcons into loadNetworkPoints
JoshMLeslie Jan 22, 2025
22dfe44
refactor bindCheckboxAnimation to a single utility
JoshMLeslie Jan 22, 2025
dff204c
add firing of "layer-style-reset" custom event on style change
JoshMLeslie Jan 22, 2025
59912f4
add darkMode check to affect opacity vs light modes
JoshMLeslie Jan 22, 2025
8f5c271
add call to hide layer selection list on selected layer
JoshMLeslie Jan 22, 2025
09325b8
closes #46 update to set "streets-v12" as default
JoshMLeslie Jan 25, 2025
60c9b4a
Merge pull request #31 from phillycommunitywireless/30-add-fullscreen…
eugenethreat Jan 27, 2025
d0716f4
Merge pull request #35 from phillycommunitywireless/bump-mapbox-version
eugenethreat Jan 27, 2025
1458f21
Merge pull request #36 from phillycommunitywireless/move-html-out-of-…
eugenethreat Jan 27, 2025
6c5c22e
Merge branch 'main' into 33-address-search
eugenethreat Jan 27, 2025
51830f0
Merge pull request #37 from phillycommunitywireless/33-address-search
eugenethreat Jan 27, 2025
971e596
Merge branch 'main' into 39-add-view-layers
eugenethreat Jan 27, 2025
db5b713
Merge pull request #40 from phillycommunitywireless/39-add-view-layers
eugenethreat Jan 27, 2025
4c51468
remove background listener that was closing and "easing" sidebar / ma…
JoshMLeslie Jan 22, 2025
b28285d
Merge branch '32-fix-flyto' of https://github.com/phillycommunitywire…
JoshMLeslie Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 116 additions & 115 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,169 +7,170 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- mapbox css -->
<link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.3/mapbox-gl.css" rel="stylesheet">
<link href='https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.3/mapbox-gl-geocoder.css" type="text/css">
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.3/mapbox-gl.js"></script>
<script src='https://api.mapbox.com/mapbox-assembly/v1.5.1/assembly.js'></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.3/mapbox-gl-geocoder.min.js"></script>
</head>

<body>
<div id="loading">Loading...</div>
<div id="map">
<div id="right-sidebar" class="sidebar flex-center right collapsed">
<div class="sidebar-content rounded-rect flex-center">
<div class="bookmarks">
<div style="font-weight: bold">Select layers</div>
<div class='relative bg-gray-lighter mx6 my6 w180 round flex flex--column'>
<div id="map"></div>
<div id="right-sidebar" class="sidebar flex-center right collapsed">
<div class="sidebar-content rounded-rect flex-center">
<div class="bookmarks">
<div style="font-weight: bold">Select layers</div>
<div class='relative bg-gray-lighter mx6 my6 w180 round flex flex--column'>
<label class='checkbox-container'>
<input type='checkbox' id="layer1" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/high_sites.png">
High Sites
</label>
<label class='checkbox-container'>
<input type='checkbox' id="layer4" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/Rooftophubs2.png">
Main Router
</label>
<label class='checkbox-container'>
<input type='checkbox' id="layer2" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/RooftopHub.png">
Access Points
</label>
<label class='checkbox-container'>
<input type='checkbox' id="layer3" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/icon1.png"> Mesh
Nodes
</label>
<label class='checkbox-container'>
<input type='checkbox' id="layer5" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Heatmap
</label>
<div>
<label class='checkbox-container'>
<input type='checkbox' id="layer1" checked />
<input type='checkbox' id="neighborhood-boundaries" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/high_sites.png">
High Sites
Neighborhoods
</label>
<label class='checkbox-container'>
<input type='checkbox' id="layer4" checked />
<label class='checkbox-container ml24'>
<input type='checkbox' id="neighborhood-outline-only" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/Rooftophubs2.png">
Main Router
Outline
</label>
</div>
<div>
<label class='checkbox-container'>
<input type='checkbox' id="layer2" checked />
<input type='checkbox' id="income-blocks" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/RooftopHub.png">
Access Points
Income
</label>
<label class='checkbox-container'>
<input type='checkbox' id="layer3" checked />

<label class='checkbox-container ml24'>
<input type='checkbox' id="show-income-popup" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
<img class="layer-icon"
src="https://raw.githubusercontent.com/phillycommunitywireless/pcwnetworkmap/main/icons/icon1.png"> Mesh
Nodes
Show Popup
</label>
</div>
<div>
<label class='checkbox-container'>
<input type='checkbox' id="layer5" />
<input type='checkbox' id="heatmap-layer" />
<input type='checkbox' id="broadband-blocks" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Heatmap
Broadband Percentage
</label>
<div>
<label class='checkbox-container'>
<input type='checkbox' id="neighborhood-boundaries" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Neighborhoods
</label>
<label class='checkbox-container ml24'>
<input type='checkbox' id="neighborhood-outline-only" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Outline
</label>
</div>
<div>
<label class='checkbox-container'>
<input type='checkbox' id="income-blocks" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Income
</label>

<label class='checkbox-container ml24'>
<input type='checkbox' id="show-income-popup" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Show Popup
</label>
</div>
<div>
<label class='checkbox-container'>
<input type='checkbox' id="broadband-blocks" />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Broadband Percentage
</label>

<label class='checkbox-container ml24'>
<input type='checkbox' id="show-broadband-popup" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Show Popup
</label>
</div>
</div>
<div style="font-weight: bold">Navigate to</div>
<div class="inline-flex flex--column">
<button class="btn btn--gray btn--pill-vt" id="norris_square">Norris Sq. Park</button>
<button class="btn btn--gray btn--pill-vc" id="fairhill_square">Fairhill Sq. Park</button>
<button class="btn btn--gray btn--pill-vb" id="mcpherson_square">McPherson Sq. Park</button>
<label class='checkbox-container ml24'>
<input type='checkbox' id="show-broadband-popup" checked />
<div class='checkbox mr6 checkbox--s-label'>
<svg class='icon'>
<use xlink:href='#icon-check' />
</svg>
</div>
Show Popup
</label>
</div>
<div style="font-weight: bold">Show Connections</div>
<label class="switch-container">
<input type="checkbox" id="toggleNetworkLinks" disabled />
<div class="switch"></div>
<div class="ms-small">High Sites to Routers</div>
</label>
<label class="switch-container">
<input type="checkbox" id="toggleNetworkLinks2" disabled />
<div class="switch"></div>
<div class="ms-small">Routers to Wired APs</div>
</label>
<label class="switch-container">
<input type="checkbox" id="toggleNetworkLinks3" disabled />
<div class="switch"></div>
<div class="ms-small">Wired APs to Mesh Nodes</div>
</label>
</div>
<div class="sidebar-toggle rounded-rect right">
&larr;
<div style="font-weight: bold">Navigate to</div>
<div class="inline-flex flex--column">
<button class="btn btn--gray btn--pill-vt" id="norris_square">Norris Sq. Park</button>
<button class="btn btn--gray btn--pill-vc" id="fairhill_square">Fairhill Sq. Park</button>
<button class="btn btn--gray btn--pill-vb" id="mcpherson_square">McPherson Sq. Park</button>
</div>

<div style="font-weight: bold">Show Connections</div>
<label class="switch-container">
<input type="checkbox" id="toggleNetworkLinks" disabled />
<div class="switch"></div>
<div class="ms-small">High Sites to Routers</div>
</label>
<label class="switch-container">
<input type="checkbox" id="toggleNetworkLinks2" disabled />
<div class="switch"></div>
<div class="ms-small">Routers to Wired APs</div>
</label>
<label class="switch-container">
<input type="checkbox" id="toggleNetworkLinks3" disabled />
<div class="switch"></div>
<div class="ms-small">Wired APs to Mesh Nodes</div>
</label>
</div>
<div class="sidebar-toggle rounded-rect right">
&larr;
</div>

</div>
</div>

<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<script type="module" src="https://unpkg.com/@turf/[email protected]/turf.min.js"></script>
<script src="js/main.js" type="module"></script>
Expand Down
8 changes: 3 additions & 5 deletions js/bind-elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
setNeighborhoodLayer,
setNeighborhoodOutline,
} from './bind-elements.util.js';
import { NavBookmarks } from './const.js';
import { FlyToDefaults, NavBookmarks } from './const.js';

export const toggleSidebar = () => {
const sidebar = document.getElementById('right-sidebar');
Expand All @@ -23,15 +23,13 @@ const navigateToBookmark = (bookmarkId) => {
return;
}
map.flyTo({
...NavBookmarks[bookmarkId],
speed: 0.8,
curve: 1.2,
...FlyToDefaults,
...NavBookmarks[bookmarkId]
});
};

export default () => {
const rightSidebar = document.getElementById('right-sidebar');
rightSidebar.addEventListener('click', toggleSidebar);

// visibility bindings
document
Expand Down
13 changes: 9 additions & 4 deletions js/bind-points-visibility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ function updatePointsVisibility() {
map.setFilter('network-points-layer', filters);
}

function toggleHeatmapLayer() {
function toggleHeatmapLayer(state) {
map.setLayoutProperty(
'heatmap-layer',
'visibility',
this.checked ? 'visible' : 'none'
state ?? this.checked ? 'visible' : 'none'
);
}

Expand Down Expand Up @@ -61,6 +61,11 @@ export default () => {
updatePointsVisibility();
});

const layer5Checkbox = document.getElementById('layer5');
layer5Checkbox.addEventListener('change', toggleHeatmapLayer);
const heatmapCheckbox = document.getElementById('heatmap-layer');
heatmapCheckbox.addEventListener('change', toggleHeatmapLayer);

map.on('layer-style-reset', () => {
toggleHeatmapLayer(false);
heatmapCheckbox.checked = false;
});
};
4 changes: 4 additions & 0 deletions js/const.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
export const FlyToDefaults = {
speed: 0.8,
curve: 1.2,
}
export const NavBookmarks = {
norris_square: {
bearing: -120.83,
Expand Down
Loading