Skip to content

Commit

Permalink
Started to apply Third Way styling to everything. Clean up the UI and…
Browse files Browse the repository at this point in the history 
… fix a bunch of issues I was running into with the map.
  • Loading branch information
@jbowerjr
jbowerjr committed Jul 18, 2024
1 parent 113815a commit 51cab63
Show file tree
Hide file tree
Showing 5 changed files with 280 additions and 203 deletions.
176 changes: 94 additions & 82 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<title>Third Way Benefits Map</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./libraries/leaflet/leaflet.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:[email protected]&display=swap" rel="stylesheet">
<!-- This must be placed after Leaflet's CSS -->
<script src="./libraries/jquery-3.7.1.min.js"></script>
<script src="./libraries/jquery.slidereveal.min.js"></script>
Expand Down Expand Up @@ -36,89 +39,98 @@
<script src="./options.js"></script>
</head>
<body>
<div id="app-body">
<button id="layer-switch">Layers</button>
<!-- Search Bar -->
<div id="map-typeahead">
<input class="typeahead" type="text">
<span id="tt-clear">
<span>+</span>
</span>
<div id="container">
<div class="app-header">
<div class="app-logo">
<div class="logo">Third Way</div>
</div>
<div class="spacer"></div>
<!-- Search Bar -->
<div id="map-typeahead">
<input class="typeahead" type="search">
</div>
<button id="layer-switch" class="airport" title="Switch between State/Airport data">
<span></span>
</button>
</div>
<!-- Map -->
<div id="map-container"></div>
<div id="overlay"></div>
<!-- Sliding information panel -->
<div id="info-panel">
<div class="data-container">
<div class="close-button"></div>
<div class="header"></div>
<div class="sub-header toggle-link"></div>
<div class="body">
<div id="benefits" class="table main">
<div class="t-row t-header">
<div class="t-cell"></div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell"></DIV><DIV class="t-cell col-header">2050</DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Number of avoided premature deaths</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Low</DIV><DIV class="t-cell data-num_apd_le"></DIV>
</DIV>
<DIV class="t-row">
<DIV class="t-cell t-label">High</DIV><DIV class="t-cell data-num_apd_he"></DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Total monetized benefits</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Low</DIV><DIV class="t-cell data-mb_all_le"></DIV>
</DIV>
<DIV class="t-row">
<DIV class="t-cell t-label">High</DIV><DIV class="t-cell data-mb_all_he"></DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Monetized benefits - avoided premature deaths</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Low</DIV><DIV class="t-cell data-mb_deaths_le"></DIV>
</DIV>
<DIV class="t-row">
<DIV class="t-cell t-label">High</DIV><DIV class="t-cell data-mb_deaths_he"></DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Monetized benefits - avoided cases of non-fatal illness</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Avg</DIV><DIV class="t-cell data-mb_illness"></DIV>
</DIV>
</DIV>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="app-body">
<!-- Map -->
<div id="map-container"></div>
<div id="overlay"></div>
<!-- Sliding information panel -->
<div id="info-panel">
<div class="data-container">
<div class="close-button"></div>
<div class="header"></div>
<div class="sub-header toggle-link"></div>
<div class="body">
<div id="benefits" class="table main">
<div class="t-row t-header">
<div class="t-cell"></div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell"></DIV><DIV class="t-cell col-header">2050</DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Number of avoided premature deaths</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Low</DIV><DIV class="t-cell data-num_apd_le"></DIV>
</DIV>
<DIV class="t-row">
<DIV class="t-cell t-label">High</DIV><DIV class="t-cell data-num_apd_he"></DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Total monetized benefits</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Low</DIV><DIV class="t-cell data-mb_all_le"></DIV>
</DIV>
<DIV class="t-row">
<DIV class="t-cell t-label">High</DIV><DIV class="t-cell data-mb_all_he"></DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Monetized benefits - avoided premature deaths</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Low</DIV><DIV class="t-cell data-mb_deaths_le"></DIV>
</DIV>
<DIV class="t-row">
<DIV class="t-cell t-label">High</DIV><DIV class="t-cell data-mb_deaths_he"></DIV>
</DIV>
</DIV>
</div>
</div>
<div class="t-row">
<div class="t-cell t-label data-label">Monetized benefits - avoided cases of non-fatal illness</div>
<div class="t-cell">
<DIV class="table sub">
<DIV class="t-row">
<DIV class="t-cell t-label">Avg</DIV><DIV class="t-cell data-mb_illness"></DIV>
</DIV>
</DIV>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</body>
<script src="./main.js"></script>
Expand Down
Binary file added libraries/us-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 28 additions & 12 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/{id}/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tile Layer by <A HREF="http://esri.maps.arcgis.com/home/index.html" TARGET="_blank">Esri</A>',
minZoom: 4,
maxZoom: 16,
maxZoom: 7,
id: 'World_Light_Gray_Base'
}).addTo(map);

Expand Down Expand Up @@ -121,15 +121,18 @@
push: false,
position: "right",
width: 325,
speed: 500,
speed: 250,
hide: function(p, o) { p.removeClass('panel-shadow'); },
hidden: _closePanel,
show: function(p, o) { p.addClass('panel-shadow'); },
shown: function() { panelOpen = true;}
});

$('#info-panel .close-button').on('click', function(){$('#info-panel').slideReveal('hide');})
$('#layer-switch').on('click', () => _activateLayer(true));
$('#layer-switch').on('click', (e) => {
_activateLayer(true);
$(e.currentTarget).toggleClass('airport', dataCat !== 'airport');
});
$('#tt-clear').on('click', _clearTypeahead);


Expand All @@ -154,7 +157,7 @@
ftrLayers[dataCat].remove();
dataCat = dataCat === 'state' ? 'airport' : 'state';
// Recalculate the data color ranges
$select.change();
_updateFtrColors();
// Reinit the typeahead
_clearTypeahead();
ta.typeahead('destroy');
Expand Down Expand Up @@ -200,9 +203,7 @@
ranges = ranges.map(function(o) {
return Number(o.toFixed(o >= 10 ? 0 : 1));
});

colorFn = chroma.scale(option.chroma_scale).classes(ranges);

colorFn = chroma.scale(option.chroma_scale).padding([.2, 0]).classes(ranges);
if (!!legend) legend.remove();
legend.addTo(map);
}
Expand All @@ -224,6 +225,9 @@

function _resetHighlight(e) {
ftrLayers[dataCat].resetStyle();
if (dataCat === 'state' && !!layerSel?.bringToFront) {
layerSel.bringToFront();
}
}

function _selectFeatureFromMap(e) {
Expand All @@ -245,8 +249,9 @@
// Bring it to the front so it stays visible
layerSel.bringToFront();
// Fly to the selected feature
map.flyToBounds(layerSel.getBounds(),{paddingBottomRight: [450, 0], maxZoom: 8});
// map.flyToBounds(layerSel.getBounds(),{padding: [100, 100], maxZoom: 7});
} else {
// This has to happen for the marker to appear on the map
layerSel.addTo(map);
}
// Now open the side panel
Expand All @@ -262,12 +267,21 @@
);
$select.on('change', function() {
dataId = this.value;
_setChromaRanges();
ftrLayers[dataCat].clearLayers();
ftrLayers[dataCat].addData(ftrGeo[dataCat]);
_updateFtrColors();
// If we have a selected state, then we need to update its color and bring it to the front
if (!!selectedFtr && !!selectedFtr.properties['STUSPS']) {
const id = selectedFtr.properties['STUSPS'];
layerSel.setStyle(Object.assign({}, styles['selected'], {fillColor: _getColor(id)}));
layerSel.bringToFront();
}
});

}

function _updateFtrColors() {
_setChromaRanges();
ftrLayers[dataCat].clearLayers();
ftrLayers[dataCat].addData(ftrGeo[dataCat]);
};

function _initTypeahead() {
ta.typeahead({
Expand Down Expand Up @@ -296,6 +310,8 @@
panelOpen = false;
// Remove the selected layer
layerSel.remove();
layerSel = null;
selectedFtr = null;
// Fly back to the previous bounds or map bounds
map.flyToBounds(prevBounds);
}
Expand Down
36 changes: 18 additions & 18 deletions options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,76 @@ const data_config = [
ref_id: 'num_apd_he',
currency: false,
decimal_places: 2,
chroma_scale: 'Blues'
chroma_scale: ['ffffff', '003049']
},
{
name: 'Number of avoided premature deaths (low-end estimate)',
ref_id: 'num_apd_le',
currency: false,
decimal_places: 2,
chroma_scale: 'Blues'
chroma_scale: ['ffffff', '003049']
},
{
name: 'Total monetized benefits (high-end estimate)',
ref_id: 'mb_all_he',
currency: true,
decimal_places: 0,
chroma_scale: 'GnBu'
chroma_scale: ['ffffff', 'a7ccb7']
},
{
name: 'Total monetized benefits (low-end estimate)',
ref_id: 'mb_all_le',
currency: true,
decimal_places: 0,
chroma_scale: 'GnBu'
chroma_scale: ['ffffff', 'a7ccb7']
},
{
name: 'Monetized benefits - avoided premature deaths (high-end estimate)',
ref_id: 'mb_deaths_he',
currency: true,
decimal_places: 0,
chroma_scale: 'Purples'
chroma_scale: ['ffffff', '3e6991']
},
{
name: 'Monetized benefits - avoided premature deaths (low-end estimate)',
ref_id: 'mb_deaths_le',
currency: true,
decimal_places: 0,
chroma_scale: 'Purples'
chroma_scale: ['ffffff', '3e6991']
},
{
name: 'Monetized benefits - avoided cases of non-fatal illness (estimate)',
ref_id: 'mb_illness',
currency: true,
decimal_places: 0,
chroma_scale: 'Greens'
chroma_scale: ['ffffff', 'f4633a']
},
];

const styles = {
state: {
color: '#cccccc',
weight: .5,
color: '#eee',
weight: 1,
opacity: 1,
fillOpacity: .7
fillOpacity: 1
},
airport: {
radius: 4,
radius: 6,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
fillOpacity: 1
},
selected: {
weight: 5,
color: '#000',
fillOpacity: .9
color: '#ffae3b',
fillOpacity: 1
},
highlight: {
weight: 3,
color: '#666',
fillOpacity: .7
}
weight: 2,
color: '#ffae3b',
fillOpacity: 1
}
}

Loading

0 comments on commit 51cab63

Please sign in to comment.