EV Charging Station Story Map_Shuya Guan

README.md

@@ -1,60 +1,18 @@
-## Samples from previous years
 
-* [_What's in a Vacant Lot_](examples/Vacant_Lots_AdrianLeon/), Adrián León, Max Masuda-Farkas, and Xuezhu Zhao
-* [_Surveillance in New Orleans_](examples/NoLA_Surveillance_BrianaCervantes/), Briana Cervantes
-* [_A Spatial History of House Music_](examples/House_Music_MarlanaZink/), Marlana Zink
+Pennsylvania Charging Stations Map
 
-## Samples from elsewhere on the internet
+This project presents a map of charging stations across Pennsylvania, highlighting the spatial distribution characteristics and specific locations in different regions. The map aims to provide a clear and comprehensive visualization of where charging stations are concentrated and how they are distributed in both urban and rural areas.
 
-* [_How the Air Campaign Against ISIS Grew_](http://www.nytimes.com/interactive/2014/12/31/world/middleeast/isis-airstrikes-map.html), New York Times
-* [_Philly’s Chinatown: 150 years of development, displacement, and resilience_](https://www.inquirer.com/history/inq2/chinatown-history-timeline-development-arena-20231128.html)
+Target Audience：
+This project is intended for:
+Electric vehicle (EV) owners and potential EV buyers who are looking for convenient charging station locations.
+Urban planners and policymakers interested in the spatial distribution of EV infrastructure.
+Researchers analyzing trends in clean energy and infrastructure development.
 
-## Instructions
+Data Source：
+The data used for this project is sourced from the National Renewable Energy Laboratory (NREL)'s Alternative Fueling Station Locator, providing accurate and up-to-date information on charging stations.
 
-### 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
+Code Source：
+The initial code structure for this project was forked from bairunnn/storymap-template. Significant modifications and adaptations have been made to tailor the code for mapping the spatial distribution of charging stations in Pennsylvania. All the customizations, such as data integration, visualization enhancements, and additional features, have been developed specifically for this project.
+Where applicable, attribution has been provided in the code comments to acknowledge the original template's functionality.
+>>>>>>> shuyaguan/storymap-only

css/style.css

@@ -0,0 +1,202 @@
+/*
+style.css file
+
+*/
+
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+
+#map {
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+}
+
+
+#header {
+    margin: auto;
+    min-height: 100vh; 
+    width: 100%; 
+    position: relative; 
+    z-index: 5; 
+    padding: 2vh 0vh 5vh 0vh; 
+  }
+
+
+#features {
+    padding-top: 80vh;
+    padding-bottom: 10vh;
+  }
+  @media (max-width: 750px) { 
+    #features {
+      width: 90vw;
+      margin: 0 auto;
+    }
+  }
+
+
+#footer {
+    min-height: 2vh;
+    text-align: left;
+    line-height: 25px;
+    width: 100%;
+    position: relative;
+    z-index: 5; 
+  }
+
+
+#header h1 {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-family: 'Roboto', serif;
+    text-align: left;
+    margin: auto;
+    max-width: 600px;
+}
+#header h4 {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    margin-bottom: 0.5em;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: left;
+    max-width: 600px;
+}
+#header p.byline {
+    font-weight: 300;
+    font-size: 0.9em;
+    margin: 0.5em auto 0.8em auto;
+}
+#header p {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    text-align: left;
+    font-size: 1.2em;
+    max-width: 600px;
+    margin: 1em auto 1em auto;
+}
+
+
+#features h3 {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-family: 'Roboto', serif;
+    text-align: left;
+    max-width: 50vw;
+}
+#features p {
+    font-family: 'Roboto', sans-serif;
+    text-align: left;
+    font-size: 1.2em;
+    max-width: 50vw;
+}
+#features .imageCredit {
+  font-size: 0.9em;
+  margin-top: -5px;
+}
+
+
+#footer p {
+    font-family: 'Roboto', sans-serif;
+    font-size: 0.9em;
+    max-width: 600px;
+    padding: 0.75em 0em;
+    margin: 0px auto;
+  }
+
+  a, a:hover, a:visited {
+      color: #e96138;
+    }
+
+
+.mapboxgl-popup-content h4 {
+    font-weight: 500;
+    font-size: 0.9em;
+    border-width: 0px 0px 0.5px 0px;
+    border-style: solid;
+    border-color: rgb(80, 80, 80);
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.mapboxgl-popup-content p {
+    font-weight: 300;
+    margin-top: 0.3em;
+    margin-bottom: 0em;
+}
+
+
+.hidden {
+    visibility: hidden;
+}
+
+.centered {
+    width: 50vw;
+    margin: 0 auto;
+}
+
+.lefty {
+    width: 33vw;
+    margin-left: 5vw;
+}
+
+.righty {
+    width: 33vw;
+    margin-left: 62vw;
+}
+
+.fully {
+    width: 100%;
+    margin: auto;
+}
+
+.light {
+    color: #444;
+    background-color: #ffffff;
+}
+
+.dark {
+    color: #fafafa;
+    background-color: #444;
+}
+
+.step {
+    padding-bottom: 50vh;
+    opacity: 0.15;
+}
+
+.step.active {
+    opacity: 0.99;
+}
+
+.step div {
+    padding: 25px 50px;
+    line-height: 25px;
+    font-size: 13px;
+}
+
+.step img {
+    width: 100%;
+}
+
+@media (max-width: 750px) {
+    .centered, .lefty, .righty, .fully {
+        width: 90vw;
+        margin: 0 auto;
+    }
+}
+
+
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, 
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+touch-action: unset;
+}
+
+
+
+

index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8' />
+    <title>Template for storymap</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css' rel='stylesheet' />
+
+
+    <script src="https://unpkg.com/intersection-observer@0.12.2/intersection-observer.js"></script>
+    <script src="https://unpkg.com/scrollama"></script>
+
+
+    <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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">    
+
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+
+
+    <div id="map"></div>
+
+
+    <div id='story'></div>
+
+
+    <script src='./js/config.js'></script>
+
+
+    <script src="./js/map.js"></script>
+
+</body>
+</html>