✨ (account) add a new tab with all locations in a map

src/components/EarthMap.vue

@@ -6,26 +6,49 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import mapboxgl from 'mapbox-gl/dist/mapbox-gl'
 
+interface Location {
+  name?: string
+  lat: number
+  lon: number
+}
+
 @Component
 export default class EarthMap extends Vue {
-  @Prop({ type: Number, required: true })
-  private lat!: number
-  @Prop({ type: Number, required: true })
-  private lon!: number
+  @Prop({ type: Array, default: () => [] })
+  private locations!: Location[]
 
   private mounted() {
-    const center = [this.lon, this.lat]
     mapboxgl.accessToken = process.env.VUE_APP_MAPBOX_KEY
 
+    const markers = this.locations.map((location) => [
+      location.lon,
+      location.lat
+    ])
+    const latitudes = this.locations.map((location: Location) => location.lat)
+    const longitudes = this.locations.map((location: Location) => location.lon)
+    const minLat = Math.min(...latitudes)
+    const maxLat = Math.min(...latitudes)
+    const minLon = Math.min(...longitudes)
+    const maxLon = Math.min(...longitudes)
+
     const earth = new mapboxgl.Map({
       container: 'earth',
       style: 'mapbox://styles/mapbox/streets-v11',
-      center,
-      zoom: 12
+      bounds: [
+        [minLon, minLat],
+        [maxLon, maxLat]
+      ],
+      fitBoundsOptions: {
+        padding: 15,
+        maxZoom: 12
+      }
     })
 
     earth.addControl(new mapboxgl.NavigationControl())
-    new mapboxgl.Marker().setLngLat(center).addTo(earth)
+
+    markers.forEach((marker) => {
+      new mapboxgl.Marker().setLngLat(marker).addTo(earth)
+    })
   }
 }
 </script>
@@ -35,5 +58,6 @@ export default class EarthMap extends Vue {
 
 .earth-container {
   min-height: 50vh;
+  height: 100%;
 }
 </style>