integrated map

package-lock.json

@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "leaflet": "^1.9.4",
                 "preact": "^10.13.1"
             },
             "devDependencies": {
@@ -15,6 +16,7 @@
                 "@babel/plugin-syntax-jsx": "^7.23.3",
                 "@preact/preset-vite": "^2.5.0",
                 "@tsconfig/strictest": "^2.0.2",
+                "@types/leaflet": "^1.9.8",
                 "@typescript-eslint/eslint-plugin": "^6.11.0",
                 "@typescript-eslint/parser": "^6.11.0",
                 "eslint": "^8.53.0",
@@ -1141,12 +1143,27 @@
             "integrity": "sha512-jt4jIsWKvUvuY6adJnQJlb/UR7DdjC8CjHI/OaSQruj2yX9/K6+KOvDt/vD6udqos/FUk5Op66CvYT7TBLYO5Q==",
             "dev": true
         },
+        "node_modules/@types/geojson": {
+            "version": "7946.0.13",
+            "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
+            "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==",
+            "dev": true
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
             "dev": true
         },
+        "node_modules/@types/leaflet": {
+            "version": "1.9.8",
+            "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
+            "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+            "dev": true,
+            "dependencies": {
+                "@types/geojson": "*"
+            }
+        },
         "node_modules/@types/semver": {
             "version": "7.5.5",
             "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.5.tgz",
@@ -4037,6 +4054,11 @@
             "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
             "dev": true
         },
+        "node_modules/leaflet": {
+            "version": "1.9.4",
+            "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+            "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+        },
         "node_modules/levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

package.json

@@ -11,6 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "leaflet": "^1.9.4",
         "preact": "^10.13.1"
     },
     "devDependencies": {
@@ -21,6 +22,7 @@
         "@babel/plugin-syntax-jsx": "^7.23.3",
         "@preact/preset-vite": "^2.5.0",
         "@tsconfig/strictest": "^2.0.2",
+        "@types/leaflet": "^1.9.8",
         "@typescript-eslint/eslint-plugin": "^6.11.0",
         "@typescript-eslint/parser": "^6.11.0",
         "eslint": "^8.53.0",

src/index.tsx

@@ -2,6 +2,7 @@ import { render } from 'preact';
 import { useState } from 'preact/hooks';
 import preactLogo from './assets/preact.svg';
 import './style.css';
+import { MapComponent } from './map';
 
 export function App() {
     const [value, setValue] = useState(0);
@@ -22,6 +23,9 @@ export function App() {
                 <button onClick={() => setValue(value + 1)}>Increment</button>
                 <button onClick={() => setValue(value - 1)}>Decrement</button>
             </section>
+            <section>
+                <MapComponent />
+            </section>
             <section>
                 <Resource
                     title="Learn Preact"

src/map.tsx

@@ -0,0 +1,33 @@
+import 'leaflet/dist/leaflet.css';
+import leaflet from 'leaflet';
+import { useEffect, useRef } from 'preact/hooks';
+
+export const MapComponent = () => {
+    const mapContainerRef = useRef<HTMLDivElement>(null);
+    const mapRef = useRef<leaflet.Map | undefined>(undefined);
+
+    useEffect(() => {
+        if (mapRef.current) {
+            return;
+        }
+
+        if (!mapContainerRef.current) {
+            return;
+        }
+
+        const map = leaflet.map(mapContainerRef.current);
+        map.setView([51.505, -0.09], 13);
+
+        leaflet
+            .tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution:
+                    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            })
+            .addTo(map);
+
+        mapRef.current = map;
+    });
+
+    return <div ref={mapContainerRef} style="height: 500px" />;
+};