Jinheng‘s story map project

README.md

@@ -1,53 +1,11 @@
-## Samples
+# Instructions of Jinheng's story map project
 
-Find examples from previous years and elsewhere on the internet at https://github.com/Weitzman-MUSA-JavaScript/story-map-project-examples
+## Introduction
+The US Virgin Islands (USVI), known for its vibrant culture and attractive landscape, relies heavily on tourism as its economic pillar; however, its famous cultural assets and natural treasures are at risk of both flooding and sea level rise. My story map shows areas at high flooding risks, most of which are located in coastal areas and river sides. For a more resilient development, actions must be taken. These maps clearly show the affected areas on islands, which can be used to educate residents, stakeholders, and business owners to support the costal management plan. 
 
-## Instructions
+## Data sources
+- Floodind data from USVI flooding harzard map [Link](https://www.arcgis.com/apps/mapviewer/index.html?url=https://services1.arcgis.com/s7sf6tjwacbC63i1/ArcGIS/rest/services/Riverine_Flooding_Hazard_Map_WFL1/FeatureServer&source=sd)
+- Base map style from Mapbox [link](https://www.mapbox.com/gallery)
 
-### Step 1: Choose a topic
-
-Choose a topic that is fruitfully explained with some combination of narrative and geographic elements. Think about what data you want to tell a story about. Whatever data you use, **be sure to include citations somewhere in your app interface**. You can choose a dataset from any of a number of sources, for example:
-
-* Use data you've been working with for another class
-* Create your own dataset (check out [geojson.io](https://geojson.io))
-* Find data from an open data repository...
-
-#### OpenDataPhilly.org
-
-OpenDataPhilly has lots of Philadelphia-specific data, like:
-
-- [Neighborhood Boundaries](https://opendataphilly.org/dataset/philadelphia-neighborhoods)
-- Historic [Streets](https://opendataphilly.org/dataset/historic-streets), [Districts](https://opendataphilly.org/dataset/philadelphia-registered-historic-districts), or [Properties](https://opendataphilly.org/dataset/philadelphia-registered-historic-sites)
-- [School Information](https://opendataphilly.org/dataset/school-information-data)
-- [PA Horticultural Society Land Care](https://opendataphilly.org/dataset/land-care)
-
-#### Other open data portals
-
-Many other cities, counties, states, and countries have dedicated data portals as well. Here are a couple of lists of state-sponsored open data sites:
-
-- [Data.gov - Open Government](https://data.gov/open-gov/)
-- [Open Knowledge Foundation - DataPortals.org](https://dataportals.org/)
-
-#### Independently compiled data sources
-
-Sources like [Stop Demolishing Philly](https://www.stopdemolishingphilly.com/map/) or other privately compiled data sources.
-
-
-Use one of the template story maps in the _templates/_ folder, modified as you see fit, to explain your topic. For example, open [templates/scrollytelly/](templates/scrollytelly/) and copy the contents to the root folder in this repository. You can then modify the HTML, CSS, JavaScript, and data to suit your needs.
-
-### Step 2: Think About Slide Content
-
-Your story will have multiple slides, each with a title, some additional text, maybe images, and geographic data. Your slide content will go straight into your HTML, and your map features will go in to separate GeoJSON files in the [data/](data/) folder.
-
-### Step 3: Submit your story map
-
-Commit your code and push it to your repository on GitHub. Set up GitHub pages on the repository and submit a new pull request into the original project repository in the class organization.
-
-#### Submission Checklist
-
-- [ ] Pushed latest code to the `main` branch of your repository
-- [ ] Linted JS and CSS code
-- [ ] Turned on GitHub Pages for the repository and verified that your site works when deployed
-- [ ] Submitted a pull request to the original repository in the class organization
-- [ ] In the PR **title**, included your name at least
-- [ ] In the PR **description**, included a brief description of your topic, and your target audience
+## How to view my story map?
+Please click [link](https://cenjinheng.github.io/story-map-project/) and scroll down to view floodind risk in three islands of USVI

templates/scrollytelly/css/index.css → css/index.css

@@ -1,3 +1,43 @@
+.hero {
+  min-height: 90vh;
+  display: grid;
+  place-items: center;
+  position: relative;
+}
+
+.hero-overlay h1 {
+  text-align: center;
+  font-size: 2.5rem;  
+  margin-top: -100px
+}
+
+.hero-overlay p {
+  text-align: center;
+  margin: 0 auto
+  font-size: 0.8rem; 
+  color:#888; 
+  max-width: 800px;
+  line-height: 1.6;
+  text-align: justify
+}
+
+.map-note {
+  color: #888; 
+  margin-top: 5rem
+}
+
+.map-note .flood-color {
+  color: #2551ff;    
+  font-weight: bold;
+}
+
+.Scroll {
+  margin-top: 10rem
+}
+
+html {
+  scroll-behavior: smooth;
+
 body {
   margin: 0;
   border-width: 0;
@@ -43,6 +83,13 @@ body {
   color: black;
 }
 
+.slide p {
+  color: #888;           
+  font-size: 1rem;      
+  line-height: 1.6;             
+  margin: 1rem auto 0
+}
+
 .slide:first-child {
   margin-top: 0;
 }

index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>USVI Flooding Harzard Map</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/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=Open+Sans:ital,wght@0,300;0,400;0,600;1,400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/index.css">
+</head>
+<body>
+  <main>
+    <section id="intro-hero" class="hero">
+      <div class="hero-overlay">
+        <h1>US Virgin Islands Flooding Hazard</h1>
+        <p>The US Virgin Islands (USVI), located in the Caribbean, consist of three main islands, St. Thomas, St. John, and St. Croix. Known for their stunning scenery and vibrant culture, the islands rely heavily on tourism as their primary economic driver. However, flooding and sea level rise are increasingly threatening this vital industry. Many of the region’s hotels, beaches, and historic districts are situated along the coast, making them highly vulnerable to natural disasters. The devastation caused by Hurricanes Irma and Maria in 2017 highlighted this risk, with damages estimated at $11 billion for recovery.
+Understanding flooding hazards is therefore critical for the islands’ long-term economic resilience. The following maps illustrate which areas are most at risk under a 100-year flood scenario.</p>
+        <p class="map-note"> In the following maps, the areas highlighted in <span class="flood-color">blue</span> represent regions at risk of flooding. </p>
+      </div>
+    </section>
+
+    <div class="map-container">
+      <div class="map" id="map"></div>
+    </div>
+    <section class="slide-section">
+      <article class="slide" id="title-slide">
+        <h1>St. Thomas</h1>
+        <p>St. Thomas is the gateway to the US Virgin Islands, with the main cruise ship port and airport. Thousands of visitors arrive here to explore the island, especially the historic town of Charlotte Amalie. However, both the airport and downtown are highly exposed to flooding</p>
+      </article>
+
+      <article class="slide" id="second-slide">
+        <h2>St. John</h2>
+        <p>St. John is home to the Virgin Islands National Park, protecting much of the island’s forests, beaches, and coral reefs. While it attracts thousands of visitors each year, key areas like Cruz Bay and Coral Bay remain highly vulnerable to flooding and sea level rise, threatening both local communities and the park’s natural treasures.</p>
+      </article>
+
+      <article class="slide" id="third-slide">
+        <h2>St. Croix</h2>
+        <p>St. Croix is the largest of the US Virgin Islands and has historically been a hub for agriculture and industry. Today it remains vital for food production and manufacturing, while also hosting cultural landmarks in Christiansted and Frederiksted. However, much of its coastal land—including industrial zones and farmland—faces high flooding risk, threatening both livelihoods and infrastructure.</p>
+      </article>
+    </section>
+  </main>
+
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="js/index.js" type="module"></script>
+</body>
+</html>

js/index.js

@@ -0,0 +1,61 @@
+import { SlideDeck } from './slidedeck.js';
+
+const map = L.map('map', {scrollWheelZoom: false}).setView([18.3333, -64.8167], 12);
+
+// ## The Base Tile Layer
+L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiamluaGVuZ2MiLCJhIjoiY21mZWNtczV2MDVlNjJqb2xjYzIzaG1vYyJ9.3RSRjdENKBwjuf8_hhAqUA', {
+    maxZoom: 20,
+    zoomOffset: -1,
+    tileSize: 512,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+window.map = map;
+
+
+// ## Interface Elements
+const container = document.querySelector('.slide-section');
+const slides = document.querySelectorAll('.slide');
+
+const slideOptions = {
+  'title-slide': {
+    style: (feature) => {
+      return {
+        color: 'blue',
+        weight: 0.5,
+        opacity:0.5,
+        fillColor: 'blue',
+        fillOpacity: 0.5,
+      };
+    },
+  },
+  'second-slide': {
+    style: (feature) => {
+      return {
+        color: 'blue',
+        weight: 0.5,
+        opacity:0.5,
+        fillColor: 'blue',
+        fillOpacity: 0.5,
+      };
+    },
+  },
+  'third-slide': {
+    style: (feature) => {
+      return {
+        color: 'blue',
+        weight: 0.5,
+        opacity:0.5,
+        fillColor: 'blue',
+        fillOpacity: 0.5,
+      };
+    },
+  },
+};
+
+// ## The SlideDeck object
+const deck = new SlideDeck(container, slides, map, slideOptions);
+
+document.addEventListener('scroll', () => deck.calcCurrentSlideIndex());
+
+deck.preloadFeatureCollections();
+deck.syncMapToCurrentSlide();