update: [email protected] (#14)

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"devToolbar": {
+		"enabled": false
+	}
+}

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 tsconfig.app.tsbuildinfo
+test-results

docs/astro.config.mjs

@@ -2,7 +2,15 @@ import react from "@astrojs/react";
 import { defineConfig } from "astro/config";
 
 export default defineConfig({
-	integrations: [react()],
-	site: "https://behoney.github.io",
-	base: process.env.NODE_ENV === "production" ? "/react-geojson-map" : "/",
+  integrations: [react()],
+  site: "https://behoney.github.io",
+  base: process.env.NODE_ENV === "production" ? "/react-geojson-map" : "/",
+  vite: {
+    watch: {
+      include: ["./**"],
+    },
+  },
+  devToolbar: {
+    enabled: false,
+  },
 });

docs/public/sample.geojson

@@ -421,5 +421,19 @@
         ]
       }
     }
+    ,
+    {
+      "type": "Feature",
+      "properties": {
+        "name": "Sample Point"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -20,
+          20
+        ]
+      }
+    }
   ]
 }

docs/src/examples/DataSourceExample.css

@@ -0,0 +1,30 @@
+.data-source-example-map {
+  --data-source-polygon-fill-color: #f00;
+  --data-source-polygon-stroke-color: #000;
+  --data-source-polygon-stroke-width: 2;
+
+  /* NOTE:: below are the styles for the circle. */
+  --data-source-circle-radius: 10;
+  --data-source-circle-fill-color: #f00;
+  --data-source-circle-stroke-color: #000;
+  --data-source-circle-stroke-width: 2;
+}
+
+.data-source-example-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 300px;
+}
+
+.data-source-example-option input[type="color"],
+.data-source-example-option input[type="number"] {
+  width: 60px;
+}
+
+.data-source-example-option {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 0.5rem;
+}

docs/src/examples/DataSourceExample.tsx

@@ -1,13 +1,65 @@
 import React from "react";
 import { GeoDataSource, GeoMap } from "../../../src/lib";
+import "./DataSourceExample.css";
+
+const options = [
+  {
+    title: "Update fill color",
+    property: "--data-source-polygon-fill-color",
+    defaultValue: "#ff0000",
+    type: "color",
+  },
+  {
+    title: "Update stroke color",
+    property: "--data-source-polygon-stroke-color",
+    defaultValue: "#000000",
+    type: "color",
+  },
+  {
+    title: "Update stroke width",
+    property: "--data-source-polygon-stroke-width",
+    type: "number",
+    defaultValue: "2",
+  },
+];
 
 const DataSourceExample: React.FC = () => {
   return (
-    <div style={{ width: "300px", height: "300px" }}>
-      <GeoMap>
-        <GeoDataSource url="sample.geojson" />
-      </GeoMap>
-    </div>
+    <>
+      <section style={{ width: "300px", height: "300px" }}>
+        <GeoMap className="data-source-example-map">
+          <GeoDataSource
+            fitViewToData={true}
+            url={`${import.meta.env.BASE_URL}sample.geojson`}
+          />
+        </GeoMap>
+      </section>
+      <section>
+        <h3>Update CSS Variables</h3>
+        <div className="data-source-example-options">
+          {options.map((item, index) => (
+            <div className="data-source-example-option" key={index}>
+              <label>{item.title}</label>
+              <input
+                defaultValue={item.defaultValue}
+                title={item.title}
+                type={item.type}
+                onChange={(e) => {
+                  const map = document.querySelector(
+                    `.data-source-example-map`
+                  ) as HTMLElement;
+
+                  map.style.setProperty(
+                    item.property,
+                    e.target.value + (item.type === "number" ? "px" : "")
+                  );
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
   );
 };
 

docs/src/examples/DefaultMapExample.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import { GeoDataSource, GeoMap } from '../../../src/lib';
+import { GeoMap } from "../../../src/lib";
 
 const DefaultMapExample: React.FC = () => {
   return (
     <div style={{ width: "300px", height: "300px" }}>
-      <GeoMap>
-        <GeoDataSource url="sample.geojson" />
-      </GeoMap>
+      <GeoMap />
     </div>
   );
 };

docs/src/layouts/ExampleLayout.astro

@@ -0,0 +1,37 @@
+---
+import "../styles/global.css";
+
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    </head>
+  <body>
+    <main>
+      <slot />
+    </main>
+    <nav>
+      <a href="/examples">Back to examples</a>
+    </nav>
+
+    <style>
+      nav {
+        position: fixed;
+        top: 0;
+        right: 0;
+        padding: 1rem;
+        background-color: var(--color-background);
+      }
+    </style>
+  </body>
+</html>

docs/src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import "../styles/global.css";
+
 export interface Props {
   title: string;
 }
@@ -22,69 +24,4 @@ const { title } = Astro.props;
       <p>&copy; {new Date().getFullYear()} <a href="https://github.com/behoney">behoney</a>. All rights reserved.</p>
     </footer>
   </body>
-  <style is:global>
-    :root {
-      --color-primary: #7ebc6f;     /* Green for vegetation */
-      --color-secondary: #5b7cba;   /* Blue for water bodies */
-      --color-accent: #f5d76e;      /* Yellow for highlighted areas */
-      --color-background: #f0f0f0;  /* Light gray for background */
-      --color-text: #333333;        /* Dark gray for text */
-      --color-text-light: #666666;  /* Medium gray for secondary text */
-      --color-road: #ffffff;        /* White for roads */
-      --color-building: #d9d0c9;    /* Light brown for buildings */
-      --color-code-background: #f4f4f4; /* Light gray for code background */
-      --color-code-text: #333333;   /* Dark gray for code text */
-    }
-
-    body {
-      font-family: 'Open Sans', Arial, sans-serif;
-      background-color: var(--color-background);
-      color: var(--color-text);
-      line-height: 1.6;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      font-family: 'Roboto', 'Helvetica Neue', sans-serif;
-      font-weight: 700;
-      color: var(--color-primary);
-    }
-
-    p {
-      font-size: 16px;
-      margin-bottom: 1rem;
-    }
-
-    a {
-      color: var(--color-secondary);
-      text-decoration: none;
-      transition: color 0.3s ease;
-    }
-
-    a:hover {
-      color: var(--color-accent);
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 0 1rem;
-    }
-    pre {
-      background-color: var(--color-code-background);
-      padding: 1rem;
-      border-radius: 5px;
-      overflow-x: auto;
-      margin-bottom: 1rem;
-    }
-
-    code {
-      font-family: 'Courier New', Courier, monospace;
-      background-color: var(--color-code-background);
-      color: var(--color-code-text);
-      padding: 0.2em 0.4em;
-      border-radius: 3px;
-      font-size: 0.9em;
-    }
-
-  </style>
 </html>

docs/src/pages/examples.astro

@@ -0,0 +1,26 @@
+---
+const examples = await Astro.glob('./examples/*.astro');
+
+const pageList = examples.map(page => ({
+  name: page.file?.split('/').pop()?.replace('.astro', '') || 'Untitled',
+  path: page.url
+}));
+---
+
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Examples</title>
+</head>
+<body>
+  <h1>Examples</h1>
+  <ul>
+    {pageList.map((page) => (
+      <li>
+        <a href={page.path}>{page.name}</a>
+      </li>
+    ))}
+  </ul>
+</body>
+</html>

docs/src/pages/examples/test-data-source.astro

@@ -0,0 +1,8 @@
+---
+import DataSourceExample from "../../../src/examples/DataSourceExample";
+import ExampleLayout from "../../layouts/ExampleLayout.astro";
+---
+
+<ExampleLayout title="Data Source Example">
+  <DataSourceExample client:only="react" />
+</ExampleLayout>

docs/src/pages/examples/test-map.astro

@@ -0,0 +1,8 @@
+---
+import DefaultMapExample from "../../../src/examples/DefaultMapExample";
+import ExampleLayout from "../../layouts/ExampleLayout.astro";
+---
+
+<ExampleLayout title="Default Map Example">
+  <DefaultMapExample client:load />
+</ExampleLayout>