add map component

package-lock.json

@@ -15,6 +15,8 @@
         "@tauri-apps/cli": "^1.4.0",
         "@types/node": "^18.7.10",
         "@vitejs/plugin-vue": "^4.0.0",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
+        "leaflet": "^1.9.4",
         "typescript": "^4.9.5",
         "vite": "^4.2.1",
         "vue-cli-plugin-styleguidist": "~4.72.4",
@@ -1721,6 +1723,24 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue-leaflet/vue-leaflet": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
+      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
+      "dev": true,
+      "dependencies": {
+        "vue": "^3.2.25"
+      },
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/leaflet": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/cli-overlay": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-5.0.8.tgz",
@@ -8070,6 +8090,12 @@
         "launch-editor": "^2.6.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "dev": true
+    },
     "node_modules/leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",

package.json

@@ -18,6 +18,8 @@
     "@tauri-apps/cli": "^1.4.0",
     "@types/node": "^18.7.10",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
+    "leaflet": "^1.9.4",
     "typescript": "^4.9.5",
     "vite": "^4.2.1",
     "vue-cli-plugin-styleguidist": "~4.72.4",

pnpm-lock.yaml

@@ -22,6 +22,12 @@ devDependencies:
   '@vitejs/plugin-vue':
     specifier: ^4.0.0
     version: 4.0.0(vite@4.2.1)(vue@3.2.45)
+  '@vue-leaflet/vue-leaflet':
+    specifier: ^0.10.1
+    version: 0.10.1(leaflet@1.9.4)
+  leaflet:
+    specifier: ^1.9.4
+    version: 1.9.4
   typescript:
     specifier: ^4.9.5
     version: 4.9.5
@@ -980,6 +986,19 @@ packages:
       vue: 3.2.45
     dev: true
 
+  /@vue-leaflet/vue-leaflet@0.10.1(leaflet@1.9.4):
+    resolution: {integrity: sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==}
+    peerDependencies:
+      '@types/leaflet': ^1.5.7
+      leaflet: ^1.6.0
+    peerDependenciesMeta:
+      '@types/leaflet':
+        optional: true
+    dependencies:
+      leaflet: 1.9.4
+      vue: 3.2.45
+    dev: true
+
   /@vue/cli-overlay@5.0.8:
     resolution: {integrity: sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ==}
     dev: true
@@ -5127,6 +5146,10 @@ packages:
       shell-quote: 1.8.1
     dev: true
 
+  /leaflet@1.9.4:
+    resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
+    dev: true
+
   /leven@2.1.0:
     resolution: {integrity: sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==}
     engines: {node: '>=0.10.0'}

src/App.vue

@@ -1,45 +1,14 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
+import Greet from "./components/Greet.vue";
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import Map from "./components/Map.vue";
-// import Greet from "./components/Greet.vue";
 </script>
 
 <template>
-  <div class="container">
+  <Map />
-    <h1>Welcome to Tauri!</h1>
-    <div class="row">
-      <a href="https://vitejs.dev" target="_blank">
-        <img src="/vite.svg" class="logo vite" alt="Vite logo" />
-      </a>
-      <a href="https://tauri.app" target="_blank">
-        <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
-      </a>
-      <a href="https://vuejs.org/" target="_blank">
-        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-      </a>
-    </div>
-
-    <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
-
-    <p>
-      Recommended IDE setup:
-      <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-      +
-      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-      +
-      <a href="https://github.com/tauri-apps/tauri-vscode" target="_blank"
-        >Tauri</a
-      >
-      +
-      <a href="https://github.com/rust-lang/rust-analyzer" target="_blank"
-        >rust-analyzer</a
-      >
-    </p>
-
-  </div>
 </template>
 
 <style scoped>
+
 .logo.vite:hover {
   filter: drop-shadow(0 0 2em #747bff);
 }

src/components/Map.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="map">
+    <l-map
+      ref="map"
+      v-model:zoom="zoom"
+      :use-global-leaflet="false"
+      :center="mapOrigin"
+    >
+      <l-tile-layer
+        :url="tileServer"
+        layer-type="base"
+        name="OpenStreetMap"
+      ></l-tile-layer>
+    </l-map>
+  </div>
+</template>
+
+<script lang="ts">
+import "leaflet/dist/leaflet.css";
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+
+export default {
+  components: {
+    LMap,
+    LTileLayer,
+  },
+  data() {
+    return {
+      tileServer:
+        import.meta.env.VITE_OSM_SERVER ||
+        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      mapOrigin: [34.058, -117.819],
+      zoom: 17,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.map {
+  height: 100%;
+}
+</style>

src/styles.css

@@ -1,3 +1,7 @@
+/* Set app to fill screen */
+html, body, #app {
+  height: 100%;
+}
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;