25-2-GIS

Map Making for Social Good: Telling Stories with Maps

（オンライン教材: 【初級編】MapLibre GL JSを使ったWebGIS作成）

---

Week 1: Orientation, Installing VS Code, and GitHub Basics

• Lecture:
  • What is GIS and Spatial Data Science?
  • Overview of web mapping and its real-world applications.
  • Introduction to version control and why GitHub is critical for collaborative development.
  • Introduction to Visual Studio Code (VS Code) as a development environment.
• Hands-On:
  • Install Visual Studio Code.
  • Set up GitHub accounts and repositories.
  • Link VS Code to GitHub using Git and practice basic workflows (commit, push, pull).
• Assignment:
  1. Create a GitHub repository (this will eventually house all your weekly submissions and your final project).
  2. Find a web map of interest and take a screenshot of it.
  3. Create a Markdown file named Week01.md in your new GitHub repository. In this file:
     • Introduce the map (provide its name or topic).
     • Include the screenshot and a link to the original site.
     • Briefly evaluate the map (strengths, weaknesses, design, functionality, etc.).
  4. Commit and push Week01.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Likely Chapters 1–2 (setting up your environment, basic project structure).

---

Week 2: Creating Your First Web Map with MapLibre GL and Deploying It Online

• Lecture:
  • Introduction to MapLibre: What it is, and how it empowers open-source web mapping.
  • Overview of GitHub Pages for hosting public-facing web projects.
  • Basics of HTML, CSS, and JavaScript to structure, style, and script a simple web map.
• Hands-On:
  1. Include MapLibre GL JS via CDN or npm (no account or API token needed).
  2. Set up a basic HTML file in your VS Code project with placeholders for a map.
  3. Use MapLibre GL to create a simple map with custom center, zoom, and style.
  4. Deploy your webpage on GitHub Pages.
  5. Test the deployed map on multiple devices.
• Assignment:
  1. Publish your simple map to GitHub Pages and share the live URL in your repo’s README.
  2. Propose a final project idea for this course. In a new file named Week02.md:
     • Summarize your chosen topic or issue (social/environmental/other).
     • Suggest potential datasets or data sources.
     • Explain the impact or purpose of your project (who will benefit? how?).
  3. Commit and push Week02.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Likely Chapters 2–3 (basic map display and setup).

---

Week 3: Adding Data Layers to Your Map

• Lecture:
  • Basics of GeoJSON: Structure, format, and use cases in mapping.
  • Loading and styling data layers in MapLibre GL.
• Hands-On:
  • Add a GeoJSON dataset to your map (e.g., points, lines, or polygons).
  • Style the data layers using MapLibre GL properties such as color, size, and opacity.
• Assignment:
  1. Integrate a relevant data layer (GeoJSON or similar) into your final project map.
  2. In Week03.md:
     • Describe why you chose this dataset.
     • Note any styling choices (colors, markers, etc.).
     • Update your GitHub Pages deployment and include a link to your new map version.
  3. Commit and push Week03.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Likely Chapter 4 (adding and styling layers).

---

Week 4: Enhancing Interactivity with MapLibre GL

• Lecture:
  • Using JavaScript for map interactions: Pop-ups, tooltips, and click events.
  • Building user-friendly controls like zoom buttons, toggles, and navigation aids.
• Hands-On:
  • Add pop-ups or tooltips to your map to display additional information.
  • Implement interactive controls to improve map usability.
• Assignment:
  1. Add at least one interactive feature (e.g., pop-up, tooltip, hover effect) to your final project map.
  2. In Week04.md:
     • Describe the interactive elements you added.
     • Explain how these interactions will help users understand your map’s data/story.
     • Provide the updated GitHub Pages link.
  3. Commit and push Week04.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Likely Chapter 5 (interactivity and event handling).

---

Week 5: Customizing Map Styles and Themes

• Lecture:
  • Customizing map styles: How style JSON works in MapLibre GL.
  • Best practices for designing thematic and visually appealing maps.
• Hands-On:
  • Create a custom map style (by editing the JSON directly or using an external style editor).
  • Apply the custom style to your MapLibre GL map.
• Assignment:
  1. Adopt or design a custom style for your final project map.
  2. In Week05.md:
     • Justify your style choices (color scheme, fonts, base map, etc.).
     • Discuss how these design changes improve clarity or aesthetics.
     • Update and share your map link.
  3. Commit and push Week05.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Likely Chapter 6 (managing and customizing styles).

---

Week 6: Creating Story Maps

• Lecture:
  • What are story maps? Examples of impactful story maps.
  • Best practices for combining narrative and visual elements.
• Hands-On:
  • Add text, images, and media to your map to build a narrative.
  • Design your webpage layout using HTML and CSS to combine visuals and storytelling.
• Assignment:
  1. Begin integrating storytelling components (text blocks, images, or media) into your final project.
  2. In Week06.md:
     • Outline your narrative structure (introduction, key points, conclusion).
     • Describe how you plan to guide users through the story.
     • Provide the updated GitHub Pages link.
  3. Commit and push Week06.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Look for sections discussing adding content/overlays or advanced layout tips.

---

Week 7: Mid-Term Presentation Preparation

• Lecture:
  • Tips for presenting technical projects effectively.
  • How to explain your map’s purpose, design choices, and interactivity.
• Hands-On:
  • Refine your map and project webpage for the mid-term presentation.
  • Practice your presentation with peers and incorporate their feedback.
• Assignment:
  1. Polish your final project map for mid-term feedback.
  2. In Week07.md:
     • Summarize the progress you’ve made.
     • List any challenges or questions you have for peer review.
     • Provide the updated map link.
  3. Commit and push Week07.md to your repository.

Relevant Textbook Chapters

• No direct new tutorial; focus on refining and reviewing.

---

Week 8: Mid-Term Presentations

• Activity:
  • Students present their projects-in-progress.
  • Peer and instructor feedback for improvement.
• Assignment:
  1. Incorporate key feedback from your presentation into your map.
  2. Update your repository and map link once changes are made.

Relevant Textbook Chapters

• Continue referencing the text as needed.

---

Week 9: Designing Beautiful and User-Friendly Maps

• Lecture:
  • The importance of design: Why design can be more important than content.
  • Choosing effective colors, fonts, and layouts to enhance user experience.
  • Designing intuitive buttons, drop-downs, and controls.
  • Accessibility in web maps: Designing for all users, including those with visual impairments.
• Hands-On:
  • Refine your map’s layout by improving its design elements.
  • Add or enhance user interface components such as legends, buttons, and drop-down menus.
• Assignment:
  1. Improve the user interface and accessibility of your final project map.
  2. In Week09.md:
     • Detail the UI/UX enhancements you introduced (legends, buttons, accessibility features, etc.).
     • Explain how these changes improve the user experience.
     • Update and share your map link.
  3. Commit and push Week09.md to your repository.

Relevant Textbook Chapters

• Check if there is a chapter discussing UI/UX considerations.

---

Week 10: Advanced Mapping Techniques

• Lecture:
  • Advanced MapLibre GL features: Clustering, heatmaps, and custom markers.
  • Deciding when and how to use advanced techniques for storytelling.
• Hands-On:
  • Add clustering or heatmaps to visualize dense datasets.
  • Experiment with custom markers and advanced interactivity.
• Assignment:
  1. Integrate at least one advanced visualization (clustering, heatmap, or custom markers) into your final project.
  2. In Week10.md:
     • Describe how this advanced feature enhances your map’s message or usability.
     • Note any technical challenges you faced.
     • Provide the updated GitHub Pages link.
  3. Commit and push Week10.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Likely Chapter 7 (clustering, heatmaps, advanced techniques).

---

Week 11: Spatial Analysis and Filtering Data

• Lecture:
  • Introduction to spatial analysis: Filtering data dynamically.
  • Use cases for time-based and category-based filtering.
• Hands-On:
  • Add filters or dynamic analysis features to your map (e.g., sliders or dropdowns).
  • Visualize spatial patterns dynamically.
• Assignment:
  1. Add a filter or analysis component to your final project (e.g., time slider, category filter).
  2. In Week11.md:
     • Explain the logic behind your filter/analysis.
     • Show how users can interact with it to glean insights.
     • Update and share your map link.
  3. Commit and push Week11.md to your repository.

Relevant Textbook Chapters

• 【初級編】MapLibre GL JSを使ったWebGIS作成
  • Look for chapters covering filtering or dynamic data handling.

---

Week 12: Finalizing and Deploying Maps

• Lecture:
  • Preparing maps for public deployment: Accessibility, performance, and mobile-friendliness.
  • Testing and debugging before final deployment.
• Hands-On:
  • Finalize map styling and interactivity.
  • Test your map on multiple devices and browsers.
• Assignment:
  1. Conduct final testing on multiple devices (desktop, mobile, tablet).
  2. In Week12.md:
     • Document any bugs found and how you resolved them.
     • Confirm the performance and responsiveness of your map.
     • Provide the latest GitHub Pages link.
  3. Commit and push Week12.md to your repository.

Relevant Textbook Chapters

• Review chapters on performance/optimization if available.

---

Week 13: Project Refinement and Feedback

• Lecture:
  • Reviewing your project’s goals and ensuring alignment with your impact objectives.
  • Debugging and polishing your web map.
• Hands-On:
  • Work on final refinements and usability testing.
  • Peer review and feedback.
• Assignment:
  1. Prepare your final map for presentation.
  2. In Week13.md:
     • Summarize all final refinements (design, data, features).
     • Note any last-minute changes or improvements.
     • Share your near-final GitHub Pages link.
  3. Commit and push Week13.md to your repository.

Relevant Textbook Chapters

• General refinement—refer back to earlier chapters as needed.

---

Week 14: Final Presentations

• Activity:
  • Students present their completed web maps.
  • Focus on project impact, technical challenges, and lessons learned.
• Feedback:
  • Group and instructor critique highlighting strengths and areas for improvement.
• Assignment (Post-Presentation):
  1. After your final presentation, update your repository’s main README with:
     • A final summary of your project.
     • Key lessons learned and potential future improvements.
     • Confirm your live map link is functional.
  2. Congratulations! You have delivered a functioning and informative web map.

---

Key Adjustments

• Use of MapLibre GL:
  All hands-on mapping exercises now rely on MapLibre GL JS instead of Mapbox, removing any need for a separate account or API token.
• New Online Textbook:
  【初級編】MapLibre GL JSを使ったWebGIS作成 – Chapters referenced each week for deeper learning.
• Week 1 & 2 Extended Assignments:
  • Week 1: Evaluate an existing web map of interest (Week01.md).
  • Week 2: Propose your own final project idea (Week02.md).
• Building Up to a Final Project:
  Each subsequent assignment refines or adds to your individual project scope, ensuring that by the end of the course you have a functioning and informative web map.
• Week 9 focuses on design:
  Students learn how to create visually appealing maps that improve user experience.
• Integration of design and interactivity:
  Students are progressively taught how design and usability contribute to impactful web maps.