Jinheng‘s story map project#29
Jinheng‘s story map project#29CenJinHeng wants to merge 7 commits intoWeitzman-MUSA-JavaScript:mainfrom
Conversation
mjumbewu
left a comment
mjumbewu
left a comment
There was a problem hiding this comment.
Overall, this is simple but focused; I'm a fan 👍🏾. From a narrative perspective, my one thought is that it would benefit from being a little more graphical -- maybe choosing a relevant graphic for the hero section, and images representative of each of the islands for the slides.
| font-weight: bold; | ||
| } | ||
|
|
||
| .Scroll { |
There was a problem hiding this comment.
suggestion: Generally, classes and IDs start with lowercase characters.
| .Scroll { | |
| .scroll { |
There was a problem hiding this comment.
suggestion: I recommend using more descriptive names for these slides, e.g. st-thomas.json, st-john.json, and st-croix.json.
| const container = document.querySelector('.slide-section'); | ||
| const slides = document.querySelectorAll('.slide'); | ||
|
|
||
| const slideOptions = { |
There was a problem hiding this comment.
suggestion: There's a principal in software called DRY (don't repeat yourself). Generally, I would say if you have something short that's repeated more than twice (or something long that's repeated more than once) then you should find some way to reduce the duplication. Here, you could do something like this:
| const slideOptions = { | |
| const floodZoneStyle = { | |
| color: 'blue', | |
| weight: 0.5, | |
| opacity:0.5, | |
| fillColor: 'blue', | |
| fillOpacity: 0.5, | |
| }; | |
| 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, | ||
| }; | ||
| }, | ||
| }, |
There was a problem hiding this comment.
suggestion: With the descriptive names and the reduced duplication, this would become something like:
| '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, | |
| }; | |
| }, | |
| }, | |
| 'st-thomas': { | |
| style: (feature) => floodZoneStyle, | |
| }, | |
| 'st-john': { | |
| style: (feature) => floodZoneStyle, | |
| }, | |
| 'st-croix': { | |
| style: (feature) => floodZoneStyle, | |
| }, |
| <div class="map" id="map"></div> | ||
| </div> | ||
| <section class="slide-section"> | ||
| <article class="slide" id="title-slide"> |
There was a problem hiding this comment.
| <article class="slide" id="title-slide"> | |
| <article class="slide" id="st-thomas"> |
| <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"> |
There was a problem hiding this comment.
| <article class="slide" id="second-slide"> | |
| <article class="slide" id="st-john"> |
| <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"> |
There was a problem hiding this comment.
| <article class="slide" id="third-slide"> | |
| <article class="slide" id="st-croix"> |
| maxZoom: 20, | ||
| zoomOffset: -1, | ||
| tileSize: 512, | ||
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' |
There was a problem hiding this comment.
suggestion: Be sure to use proper attribution for your map -- See Mapbox's guidance on the matter at https://docs.mapbox.com/help/dive-deeper/attribution/#other-mapping-frameworks
2 participants
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.
Link: https://cenjinheng.github.io/story-map-project/