add map component

src/App.vue

@@ -1,45 +1,14 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-// import Greet from "./components/Greet.vue";
+import Greet from "./components/Greet.vue";
+import Map from "./components/Map.vue";
 </script>
 
 <template>
-  <div class="container">
-    <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>
+  <Map />
 </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>