write chapter about web gis

docs/.vitepress/config.ts

@@ -16,6 +16,10 @@ export default defineConfig({
   },
   cleanUrls: true,
   themeConfig: {
+    editLink: {
+      pattern: "https://github.com/InteractiveLearner/interactivelearner-gis/edit/main/docs/:path",
+      text: "Edit this page on GitHub",
+    },
     outline: [2, 4],
     logo: { src: "/logo192.png", width: 28, height: 28 },
     socialLinks: [
@@ -41,8 +45,8 @@ export default defineConfig({
           { text: "Misleading maps", link: "/lessons/misleading" },
           { text: "Remote sensing", link: "/lessons/remote-sensing" },
           { text: "Relational databases", link: "/lessons/relational-db" },
+          { text: "Web GIS", link: "/lessons/web-gis" },
           { text: "Spatial autocorrelation", link: "/lessons/spatial-stats" },
-          { text: "Next Steps", link: "/lessons/NextSteps" },
         ],
       },
       {
@@ -168,7 +172,6 @@ export default defineConfig({
         date: frontmatter.date,
       });
     }
-
     writeFileSync(path.join(config.outDir, "feed.rss"), feed.rss2());
   },
 });

docs/.vitepress/theme/index.js

@@ -11,6 +11,8 @@ import VisualVariables from "../../components/mapping/VisualVariables.vue";
 import RasterUHI from "../../components/mapping/RasterUHI.vue";
 import ReferenceMap from "../../components/mapping/ReferenceMap.vue";
 import ArcgisCalciteMap from "../../components/mapping/ArcgisCalciteMap.vue";
+import LeafletMarker from "../../components/mapping/LeafletMarker.vue";
+import BasicArcgisMap from "../../components/mapping/BasicArcgisMap.vue";
 import ClassifiedMap from "../../components/mapping/ClassifiedMap.vue";
 import VectorAndRaster from '../../components/mapping/VectorAndRaster.vue';
 import MisleadingProjection from "../../components/mapping/MisleadingProjection.vue";
@@ -35,6 +37,8 @@ export default {
     app.component("ReferenceMap", ReferenceMap);
     app.component("RasterUHI", RasterUHI);
     app.component("ArcgisCalciteMap", ArcgisCalciteMap);
+    app.component("LeafletMarker", LeafletMarker);
+    app.component("BasicArcgisMap", BasicArcgisMap);
     app.component("ClassifiedMap", ClassifiedMap);
     app.component("VectorAndRaster", VectorAndRaster);
     app.component("MisleadingProjection", MisleadingProjection);

docs/components/mapping/ArcgisCalciteMap.vue

@@ -89,6 +89,7 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+/* TODO: Stylesheets */
 @import "https://js.arcgis.com/4.32/@arcgis/core/assets/esri/themes/dark/main.css";
 @import "https://js.arcgis.com/calcite-components/3.1.0/calcite.css";
 

docs/components/mapping/BasicArcgisMap.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { onMounted } from 'vue';
+
+onMounted(async () => {
+  await import("@arcgis/map-components/dist/components/arcgis-map");
+  await import("@arcgis/map-components/dist/components/arcgis-search");
+  await import("@arcgis/map-components/dist/components/arcgis-legend");
+});
+</script>
+
+<template>
+  <arcgis-map
+    item-id="11e173a4e2f040ae80d39e44ee29467a"
+    style="height: 500px; width: 100%;"
+  >
+    <arcgis-search position="top-right" />
+    <arcgis-legend position="bottom-left" />
+  </arcgis-map>
+</template>

docs/components/mapping/LeafletMarker.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="map"></div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+let Leaflet;
+
+onMounted(async () => {
+  // Import dynamically to avoid window not defined error in SSR
+  Leaflet = await import("leaflet");
+
+  // Check if window is defined
+  if (typeof window !== "undefined") {
+    const map = Leaflet.map("map").setView([48.43, -123.36], 14);
+
+    Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    Leaflet.marker([48.43, -123.36])
+      .addTo(map)
+      .bindPopup("Find our cafe here!")
+      .openPopup();
+  }
+});
+</script>
+
+<style scoped>
+@import "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; /* Explicitly import Leaflet CSS */
+
+.leaflet-container {
+  height: 225px;
+  width: 100%;
+  z-index: 1;
+}
+
+/* Address VitePress link styling */
+:deep(.leaflet-control-zoom-in),
+:deep(.leaflet-control-zoom-out) {
+  text-decoration: none;
+  color: black;
+}
+</style>

docs/lessons/classification.md

@@ -23,6 +23,8 @@ This is useful for showing population density, income levels, or other socio-eco
 You can apply the logic from choropleth maps to **proportional symbol maps**.
 Proportional symbol maps use symbols of varying sizes to represent data values, with larger symbols indicating higher values and smaller symbols indicating lower values. 
 
+See the [types of maps lesson](/lessons/map-types#types-of-thematic-maps) for more information on these map types.
+
 ## Methods for classifying data
 
 Thematic maps, such as choropleth maps, shade areas in proportion to how data are classified.

docs/lessons/relational-db.md

@@ -8,6 +8,7 @@ date: 2025-06-15
 order: 8
 ---
 
+<!-- TODO: ETL -->
 ::: warning
 Interactive examples are a work in progress for this page.
 :::

docs/lessons/spatial-stats.md

@@ -73,8 +73,8 @@ Spatial clusters
 - low low (blue) indicates a low concentration when surrounding areas have more concentration
 
 Spatial outliers
-- high low (light red) indicates a high concentration when surrounding areas have low conc
-- low high (light blue) indicates a low concentration when surrounding areas have high conc
+- high low (light red) indicates a high concentration when surrounding areas have low concentration
+- low high (light blue) indicates a low concentration when surrounding areas have high concentration
 
 ### Spatiotemporal dependence (space and time)