Skip to content

Commit

Permalink
upload nycem header + add bootstrap + rhcr
Browse files Browse the repository at this point in the history
  • Loading branch information
@judy-huynh
judy-huynh committed May 12, 2024
1 parent 5203b4f commit 3b49f80
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 72 deletions.
0 data/nyc-boroughs.json → data/nyc-boroughs.geojson
View file
File renamed without changes.
0 data/nyc-shoreline-2024.json → data/nyc-shoreline-2024.geojson
View file
File renamed without changes.
1 change: 1 addition & 0 deletions data/rhcr-project.geojson
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"coordinates":[[-74.0060170191621,40.68328988515532],[-74.0067029241664,40.683674334286565],[-74.00789580243477,40.6827471296655],[-74.00852206352567,40.68304112277113],[-74.01102710788928,40.680756988390044],[-74.01063942245204,40.68048560088505],[-74.01168319093689,40.679580967888455],[-74.01216034224424,40.67980712728854],[-74.01245856181134,40.67964881578902],[-74.01400930356023,40.68064391039721],[-74.01618630640003,40.67872155517037]],"type":"LineString"}},{"type":"Feature","properties":{},"geometry":{"coordinates":[[-74.01672310162078,40.676052781898306],[-74.01737918466839,40.675396880587016],[-74.01600737465976,40.67456003161445],[-74.01535129161215,40.675148088746454],[-74.01114639571614,40.672343461959116],[-74.00905885874646,40.671777998719676],[-74.0088799270062,40.67220775121899],[-74.00831330982871,40.672072040202664]],"type":"LineString"}}]}
Binary file added img/favicon.ico
View file
Binary file not shown.
Binary file added img/nycem-header.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.
16 changes: 11 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@

<head>
<meta charset="UTF-8">
<title>NYC Hazard Mitigation Plan 2024 - Climate Gentrification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Climate Gentrification and its Impact on New York City</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon"
href="https://raw.githubusercontent.com/mapbox/assembly/publisher-staging/src/svgs/mapbox.svg">
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/intersection-observer@0.12.0/intersection-observer.js"></script>
<script src="https://unpkg.com/scrollama"></script>
<script src="https://kit.fontawesome.com/b395f523c2.js" crossorigin="anonymous"></script>
</head>

<body>
Expand All @@ -34,6 +36,10 @@
<div class="dark" id="header">
<script src="js/chapters.js"></script>
<script src="js/layers.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

</body>

</html>
116 changes: 58 additions & 58 deletions js/chapters.js
View file

Large diffs are not rendered by default.

36 changes: 34 additions & 2 deletions js/layers.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// SCRIPTS PART 2/2
// Mapbox adding layers
// MAPBOX SCROLLYTELLING LAYERS
let initLoad = true;
const layerTypes = {
'fill': ['fill-opacity'],
Expand Down Expand Up @@ -38,7 +38,7 @@ const setLayerOpacity = (layer) => {



// Stories configuration
// STORIES CONFIURATION LIKE TITLE, SUBTITLE, FOOTER, CUSTOM STYLE AVAILABLE

const story = document.getElementById('story');
const features = document.createElement('div');
Expand Down Expand Up @@ -255,6 +255,10 @@ map.on("load", function () {
if (chapterId === 'climate-gent-intro') {
map.setLayoutProperty('borough-boundaries-layer', 'visibility', 'visible');
}
// ACTIVATE RHCR PROJECT ON CLIMATE-GENT-RHCR CHAPTER
if (chapterId === 'climate-gent-rhcr') {
map.setLayoutProperty('redhook-coastal-project', 'visibility', 'visible');
}
// ACTIVATE BOROUGH BOUNDARIES PURPLE OUTLINE CLIMATE-GENT-REDHOOK CHAPTER
if (chapterId === 'climate-gent-redhook') {
map.setLayoutProperty('redhook-zoning-layer', 'visibility', 'visible');
Expand Down Expand Up @@ -319,6 +323,10 @@ map.on("load", function () {
if (chapterId === 'climate-gent-intro') {
map.setLayoutProperty('borough-boundaries-layer', 'visibility', 'none');
}
// Deactivate RHCR PROJECT ON CLIMATE-GENT-RHCR CHAPTER
if (chapterId === 'climate-gent-rhcr') {
map.setLayoutProperty('redhook-coastal-project', 'visibility', 'none');
}
// Deactivate purple borough boundaries when exiting 'climate-gent-redhook'
if (chapterId === 'climate-gent-redhook') {
map.setLayoutProperty('redhook-zoning-layer', 'visibility', 'none');
Expand Down Expand Up @@ -379,6 +387,30 @@ map.on("load", function () {




// CHAPTER CLIMATE-GENT-RHCR -- Add the GeoJSON for FLOOD BARRIERS
map.addSource('redhook-coastal-project', {
type: 'geojson',
data: 'data/rhcr-project.geojson'
});

// Add a layer to display the borough boundaries
map.addLayer({
id: 'redhook-coastal-project',
type: 'line',
source: 'redhook-coastal-project',
layout: {
'visibility': 'none' // Layer is initially hidden
},
paint: {
'line-color': '#9935ff', // Sets the line color to purple
'line-width': 8 // Sets the line width to be thick
}
});




// CHAPTER CLIMATE-GENT-REDHOOK WITH ZONING INFORMATION
map.addSource('redhook-zoning', {
type: 'geojson',
Expand Down
14 changes: 7 additions & 7 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ a:hover { /* Hover link color */
background-color: #000; /* Fallback color */
background-image: linear-gradient(to right, #4a0096, #5b00b9);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 5px; /* Add some padding for better spacing */
padding: 0px; /* Add some padding for better spacing */
}

#header h1,
Expand Down Expand Up @@ -66,7 +66,7 @@ a:hover { /* Hover link color */
/* Story features padding */
#features {
padding-top: 10vh;
padding-bottom: 10vh;
padding-bottom: 5vh;
}

.hidden {
Expand Down Expand Up @@ -104,7 +104,7 @@ a:hover { /* Hover link color */
}

.step {
padding-bottom: 50vh;
padding-bottom: 30vh;
/* margin-bottom: 10vh; */
opacity: 0.25;
}
Expand All @@ -114,7 +114,7 @@ a:hover { /* Hover link color */
}

.step div {
padding: 10px 25px;
padding: 25px 25px;
line-height: 20px;
font-size: 13px;
}
Expand Down Expand Up @@ -144,7 +144,7 @@ a:hover { /* Hover link color */
/* Scroll to explore more on bottom of page for user tips*/
.scroll-prompt {
position: fixed;
left: 10px;
right: 10px;
bottom: 20px;
transform: none; /* Remove the transform that centers it horizontally */
text-align: center;
Expand All @@ -156,7 +156,7 @@ a:hover { /* Hover link color */
padding: 8px; /* Add padding for better visibility */
border-radius: 4px; /* Optional: rounded corners for better aesthetics */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */
font-size: 14px; /* Smaller font size */
font-size: 20px; /* Smaller font size */
}

@keyframes bounce {
Expand Down Expand Up @@ -185,7 +185,7 @@ a:hover { /* Hover link color */
.toggle-chapters {
position: fixed;
bottom: 20px;
right: 20px;
left: 20px;
z-index: 10;
color: #fff;
background-image: linear-gradient(to right, #8D93FC, #8D93FC);
Expand Down

0 comments on commit 3b49f80

Please sign in to comment.