From 213bad05e9cbbd52ef77f732bbffd62839d94058 Mon Sep 17 00:00:00 2001
From: Leaversa <mtkwong@cpp.edu>
Date: Tue, 27 Feb 2024 23:38:48 -0800
Subject: [PATCH] add map component

---
 src/App.vue            | 39 ++++----------------------------------
 src/components/Map.vue | 43 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Map.vue

diff --git a/src/App.vue b/src/App.vue
index 6102e69..1c8bf05 100644
--- a/src/App.vue
+++ b/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);
 }
diff --git a/src/components/Map.vue b/src/components/Map.vue
new file mode 100644
index 0000000..88ce9b0
--- /dev/null
+++ b/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>