Add World Airports example to GeoPoint

Author: techniq

packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { geoAlbersUsa } from 'd3-geo';
+  import { geoAlbersUsa, geoNaturalEarth1 } from 'd3-geo';
   import { feature } from 'topojson-client';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -8,15 +8,15 @@
   import GeoPoint from '$lib/components/GeoPoint.svelte';
   import Text from '$lib/components/Text.svelte';
 
-  import capitals from '../_data/geo/us-state-capitals.csv';
-
   export let data;
-  const states = feature(data.geojson, data.geojson.objects.states);
+
+  const states = feature(data.us.geojson, data.us.geojson.objects.states);
+  const countries = feature(data.world.geojson, data.world.geojson.objects.countries);
 </script>
 
 <h1>Examples</h1>
 
-<h2>SVG</h2>
+<h2>US State Capitals</h2>
 
 <Preview data={states}>
   <div class="h-[600px]">
@@ -36,9 +36,9 @@
           {/each}
         </g>
         <g class="points pointer-events-none">
-          {#each capitals as capital}
+          {#each data.us.stateCaptitals as capital}
             <GeoPoint lat={capital.latitude} long={capital.longitude}>
-              <circle r="2" class="fill-white stroke-red-500" />
+              <circle r="2" class="fill-white stroke-danger" />
               <Text
                 y="-6"
                 value={capital.description}
@@ -53,6 +53,34 @@
   </div>
 </Preview>
 
+<h2>World Airports</h2>
+
+<Preview data={states}>
+  <div class="h-[600px]">
+    <Chart
+      geo={{
+        projection: geoNaturalEarth1,
+        fitGeojson: countries,
+      }}
+    >
+      <Svg>
+        <g class="states">
+          {#each countries.features as feature}
+            <GeoPath geojson={feature} class="fill-surface-content/10 stroke-surface-100" />
+          {/each}
+        </g>
+        <g class="points pointer-events-none">
+          {#each data.world.airports as airport}
+            <GeoPoint lat={airport.latitude} long={airport.longitude}>
+              <circle r="1" class="fill-primary" />
+            </GeoPoint>
+          {/each}
+        </g>
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>Canvas</h2>
 
 <Preview data={states}>
@@ -66,7 +94,7 @@
       <Canvas>
         <GeoPath geojson={states} fill="#e5e7eb" stroke="white" />
       </Canvas>
-      {#each capitals as capital}
+      {#each data.us.stateCaptitals as capital}
         <Canvas>
           <GeoPoint
             lat={capital.latitude}

packages/layerchart/src/routes/docs/examples/GeoPoint/+page.ts

@@ -1,10 +1,25 @@
+import { autoType, csvParse } from 'd3-dsv';
 import pageSource from './+page.svelte?raw';
 
 export async function load() {
   return {
-    geojson: await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json').then((r) =>
-      r.json()
-    ),
+    us: {
+      geojson: await fetch('https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json').then((r) =>
+        r.json()
+      ),
+      stateCaptitals: await fetch('/data/examples/geo/us-state-capitals.csv').then(async (r) =>
+        csvParse(await r.text(), autoType)
+      ),
+    },
+    world: {
+      geojson: await fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then(
+        (r) => r.json()
+      ),
+
+      airports: await fetch('/data/examples/geo/world-airports.csv').then(async (r) =>
+        csvParse(await r.text(), autoType)
+      ),
+    },
     meta: {
       pageSource,
     },