map component with props

gmalt · Jun 30, 2017 · 3c1d400 · 3c1d400
1 parent 1b7979e
commit 3c1d400
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 56 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,10 @@
 <template>
   <div id="app">
     <img src="./assets/logo.png">
-    <gmalt-map></gmalt-map>
+    <p>Click on the map where you want to find the elevation, look up by address with the search field or search by latitude and longitude.</p>
+    <gmalt-map :lat="lat" :lng="lng" @lookup="updatePos"></gmalt-map>
     <gmalt-search :lat="lat" :lng="lng" @search="updatePos"></gmalt-search>
-    <p>Parent : {{ lat }}, {{ lng }}</p>
+    <p>Current position : {{ lat }}, {{ lng }}</p>
     <p>Alt : {{ alt }}</p>
     <gmalt-geoloc @geoloc="updatePos"></gmalt-geoloc>
   </div>

diff --git a/src/components/GmaltMap.vue b/src/components/GmaltMap.vue
@@ -1,52 +1,29 @@
 <template>
   <div>
-    <p>Click on the map where you want to find the elevation, look up by address with the search field or search by latitude and longitude.</p>
-
     <gmap-autocomplete
       @place_changed="updatePos">
     </gmap-autocomplete>
 
     <gmap-map
-      :center="center"
+      :center="position || center"
       :zoom="7"
       style="width: 100%; height: 30vh;"
       @click="updatePos"
     >
       <gmap-marker
-        v-if="showMarker"
+        v-if="this.position.lat && this.position.lng"
         :position="position"
         :draggable="true"
         @dragend="updatePos"
       ></gmap-marker>
     </gmap-map>
-
-    <form v-on:submit.prevent="fetchAltitude">
-      <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>
-    <div>
-      <p>Altitude : <strong>{{ alt ? alt : 'No value' }}</strong></p>
-    </div>
   </div>
 </template>
 
 <script>
   import * as VueGoogleMaps from 'vue2-google-maps'
   import Vue from 'vue'
 
-  import AltService from '../services/AltService'
-
   Vue.use(VueGoogleMaps, {
     load: {
       key: process.env.GMAP_API_KEY,
@@ -59,52 +36,32 @@
 
   export default {
     name: 'gmalt-map',
+    props: ['lat', 'lng'],
     methods: {
       updatePos (newPos) {
-        this.showMarker = true
         newPos = newPos.latLng || newPos.geometry.location || defaultLatLng
-        this.position = {
-          lat: newPos.lat(),
-          lng: newPos.lng()
-        }
-        this.fetchAltitude()
-      },
-      fetchAltitude () {
-        const requestedPosition = this.position
-        this.loading = true
-        this.showMarker = true
-        this.center = this.position
-        return AltService
-          .get(this.position)
-          .then((json) => {
-            if (requestedPosition === this.position) {
-              this.loading = false
-              this.alt = json.alt
-            }
-          })
-          .catch((err) => {
-            console.log(err)
-          })
+        this.$emit('lookup', newPos.lat(), newPos.lng())
+      }
+    },
+    computed: {
+      position () {
+        return { lat: this.lat, lng: this.lng }
       }
     },
     data () {
       return {
-        showMarker: false,
-        position: { lat: null, lng: null },
-        center: defaultPos,
-        alt: null,
-        loading: false
+        center: defaultPos
       }
     }
   }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   input[type="text"] {
     width: 100%;
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
+    margin-bottom: 10px;
   }
 </style>