✨ (transaction) add map with location

src/components/EarthMap.vue

@@ -0,0 +1,39 @@
+<template>
+  <section id="earth" class="earth-container"></section>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import mapboxgl from 'mapbox-gl/dist/mapbox-gl'
+
+@Component
+export default class EarthMap extends Vue {
+  @Prop({ type: Number, required: true })
+  private lat!: number
+  @Prop({ type: Number, required: true })
+  private lon!: number
+
+  private mounted() {
+    const center = [this.lon, this.lat]
+    mapboxgl.accessToken = process.env.VUE_APP_MAPBOX_KEY
+
+    const earth = new mapboxgl.Map({
+      container: 'earth',
+      style: 'mapbox://styles/mapbox/streets-v11',
+      center,
+      zoom: 12
+    })
+
+    earth.addControl(new mapboxgl.NavigationControl())
+    new mapboxgl.Marker().setLngLat(center).addTo(earth)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/earth-map.css';
+
+.earth-container {
+  min-height: 50vh;
+}
+</style>