play with a dedicated search component

src/App.vue

@@ -2,16 +2,46 @@
   <div id="app">
     <img src="./assets/logo.png">
     <gmalt-map></gmalt-map>
+    <gmalt-search :lat="position.lat" :lng="position.lng" @search="updatePos"></gmalt-search>
+    <p>Parent : {{ position.lat }}, {{ position.lng }}</p>
+    <p>Alt : {{ alt }}</p>
   </div>
 </template>
 
 <script>
 import GmaltMap from './components/GmaltMap'
+import GmaltSearch from './components/GmaltSearch'
+
+import AltService from './services/AltService'
 
 export default {
   name: 'app',
   components: {
-    GmaltMap
+    GmaltMap,
+    GmaltSearch
+  },
+  methods: {
+    updatePos (position) {
+      this.position = position
+      const requestedPosition = position
+      return AltService
+        .get(this.position)
+        .then((json) => {
+          if (requestedPosition === this.position) {
+            this.loading = false
+            this.alt = json.alt
+          }
+        })
+        .catch((err) => {
+          this.alt = err + ''
+        })
+    }
+  },
+  data () {
+    return {
+      position: {lat: null, lng: null},
+      alt: null
+    }
   }
 }
 </script>

src/components/GmaltMap.vue

@@ -44,6 +44,7 @@
 <script>
   import * as VueGoogleMaps from 'vue2-google-maps'
   import Vue from 'vue'
+
   import AltService from '../services/AltService'
 
   Vue.use(VueGoogleMaps, {

src/components/GmaltSearch.vue

@@ -0,0 +1,38 @@
+<template>
+  <form v-on:submit.prevent="search()">
+      <div>
+        <label for="form-latitude">Latitude</label>
+        <input type="number" step="any" min="-90" max="90" id="form-latitude" v-model.number="position.lat" required />
+      </div>
+
+      <div>
+        <label for="form-longitude">Longitude</label>
+        <input type="number" step="any" min="-180" max="180" id="form-longitude" v-model.number="position.lng"  required />
+      </div>
+
+      <div>
+        <input type="submit" value="Search" />
+      </div>
+    </form>
+</template>
+
+<script>
+  export default {
+    name: 'gmalt-search',
+    props: ['lat', 'lng'],
+    methods: {
+      search () {
+        this.$emit('search', this.position)
+      }
+    },
+    data () {
+      return {
+        position: {lat: this.lat, lng: this.lng}
+      }
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>