Fetched data to display markers with tooltips

src/App.vue

@@ -1,9 +1,17 @@
 <template>
   <v-app>
-    <side-bar />
+    <side-bar
+      @send-form-data="
+        (starttime, endtime, minmagnitude) =>
+          fetchData(starttime, endtime, minmagnitude)
+      "
+    />
     <v-main>
       <v-container fluid fill-height d-flex pa-0>
-        <main-map class="flex-grow-1 fill-height" />
+        <main-map
+          class="flex-grow-1 fill-height"
+          :requestedData="this.requestedData"
+        />
       </v-container>
     </v-main>
   </v-app>
@@ -20,5 +28,27 @@ export default {
     SideBar,
     MainMap,
   },
+
+  data() {
+    return {
+      requestedData: null,
+      dataUrl: "",
+      cosa: 0,
+    };
+  },
+
+  methods: {
+    async fetchData(starttime, endtime, minmagnitude) {
+      fetch(
+        `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${starttime}&endtime=${endtime}&minmagnitude=${minmagnitude}`
+      )
+        .then((response) => {
+          response.json().then((res) => (this.requestedData = res.features));
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
 };
 </script>

src/components/Form.vue

@@ -0,0 +1,117 @@
+<template>
+  <form class="px-4" action="">
+    <!-- Start Time -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        <v-text-field
+          readonly
+          label="Start Date"
+          v-model="formattedStartDate"
+          v-on="on"
+          prepend-inner-icon="mdi-calendar"
+          :max="maxDate"
+        >
+        </v-text-field>
+      </template>
+      <v-date-picker
+        v-model="formData.starttime"
+        no-title
+        :max="maxDate"
+      ></v-date-picker>
+    </v-menu>
+
+    <!-- End Time -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        <v-text-field
+          readonly
+          label="End Date"
+          v-model="formattedEndDate"
+          v-on="on"
+          prepend-inner-icon="mdi-calendar"
+        >
+        </v-text-field>
+      </template>
+      <v-date-picker
+        v-model="formData.endtime"
+        no-title
+        :min="this.formData.starttime"
+        :max="maxDate"
+      ></v-date-picker>
+    </v-menu>
+
+    <!-- Magnitude -->
+    <v-text-field
+      label="Min Magnitude"
+      v-model="formData.minmagnitude"
+    ></v-text-field>
+
+    <v-btn
+      @click="submit"
+      elevation="2"
+      primary
+      block
+      :disabled="
+        !(
+          this.formData.starttime ||
+          this.formData.endtime ||
+          this.formData.minmagnitude
+        )
+      "
+      >Search</v-btn
+    >
+  </form>
+</template>
+
+<script>
+export default {
+  name: "Form",
+
+  data() {
+    return {
+      maxDate: null,
+      formData: {
+        starttime: "",
+        endtime: "",
+        minmagnitude: "",
+      },
+    };
+  },
+
+  computed: {
+    formattedStartDate() {
+      // This could be used to format the value shown in the input
+      return this.formData.starttime;
+    },
+    formattedEndDate() {
+      // This could be used to format the value shown in the input
+      return this.formData.endtime;
+    },
+  },
+
+  methods: {
+    submit() {
+      this.$emit(
+        "send-form-data",
+        this.formData.starttime,
+        this.formData.endtime,
+        this.formData.minmagnitude
+      );
+    },
+    formatMaxDate(date) {
+      /**
+       * Format js Date() into YYYY-MM-DD format
+       * @param date Date() Sun Jan 01 2023 20:38:20 GMT-0300
+       * @returns 2023-01-01
+       */
+      return date.toISOString().split("T")[0];
+    },
+  },
+
+  mounted() {
+    // Set maximum available date for datepickers (today) when component mounts
+    const today = new Date();
+    this.maxDate = this.formatMaxDate(today);
+  },
+};
+</script>

src/components/Map.vue

@@ -1,38 +1,72 @@
 <template>
   <mapbox-map
+    ref="mapboxMap"
     access-token="pk.eyJ1IjoibWF1cmltaXJhbmRhIiwiYSI6ImNqc3FsZ2JpaDE5OWI0NHA2dDI5aG5vdTcifQ.dQsXVmW2MgVsj0FhDrSeQA"
     map-style="mapbox://styles/mapbox/light-v10"
     :center="[0, 0]"
     :zoom="2"
     @mb-created="(mapInstance) => (map = mapInstance)"
   >
-    <mapbox-source id="usgs" :options="sourceOptions" />
-    <mapbox-layer id="earthquakes" :options="layerOptions" />
+    <MapboxMarker
+      v-for="marker in requestedData"
+      :key="marker.id"
+      :lng-lat="[
+        marker.geometry.coordinates[0],
+        marker.geometry.coordinates[1],
+      ]"
+      popup
+    >
+      <!-- Custom Marker Circle -->
+      <div
+        class="red-circle"
+        :style="`width: ${marker.properties.mag * 5}px; height: ${
+          marker.properties.mag * 5
+        }px;`"
+      ></div>
+
+      <!-- Popup data -->
+      <template v-slot:popup>
+        <div style="padding: 8px 10px 2px">
+          <info-item
+            label="Place"
+            :value="marker.properties.place"
+            :withMarginBottom="true"
+          />
+          <info-item
+            label="Time"
+            :value="marker.properties.time"
+            :withMarginBottom="true"
+          />
+          <info-item label="Magnitude" :value="marker.properties.mag" />
+        </div>
+      </template>
+    </MapboxMarker>
   </mapbox-map>
 </template>
 
 <script>
+import InfoItem from "./ui/InfoItem.vue";
+
 export default {
   name: "Map",
 
+  props: ["requestedData"],
+
+  components: { InfoItem },
+
   data() {
     return {
       map: null,
-      sourceOptions: {
-        type: "geojson",
-        data: "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson",
-      },
-      layerOptions: {
-        type: "circle",
-        source: "usgs",
-        paint: {
-          "circle-radius": 8,
-          "circle-stroke-width": 1,
-          "circle-color": "red",
-          "circle-stroke-color": "white",
-        },
-      },
     };
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.red-circle {
+  background-color: red;
+  border-radius: 50%;
+  border: 4px solid #ffdfdf;
+  box-sizing: content-box;
+}
+</style>

src/components/SideBar.vue

@@ -3,12 +3,25 @@
     <v-app-bar dark>
       <v-toolbar-title>Earthquakes Map</v-toolbar-title>
     </v-app-bar>
-    <div class="ma-4 grey--text">The form goes here...</div>
+    <div class="ma-4 grey--text">What data would you like to check?</div>
+
+    <Form
+      @send-form-data="
+        (starttime, endtime, minmagnitude) =>
+          $emit('send-form-data', starttime, endtime, minmagnitude)
+      "
+    ></Form>
   </v-navigation-drawer>
 </template>
 
 <script>
+import Form from "./Form.vue";
+
 export default {
   name: "SideBar",
+
+  components: {
+    Form,
+  },
 };
 </script>

src/components/ui/InfoItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <p
+      :class="
+        this.withMarginBottom
+          ? 'text-body-2 with-margin-bottom'
+          : ' text-body-2 no-margin'
+      "
+    >
+      <b class="font-weight-bold">{{ this.label }}:</b> {{ this.value || '-' }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InfoItem",
+
+  props: ["label", "value", "withMarginBottom"],
+};
+</script>
+
+<style lang="scss" scoped>
+.with-margin-bottom {
+  margin-bottom: 4px;
+}
+
+.no-margin {
+  margin: 0;
+}
+</style>