fix(gmap-vue): fix hit and drawer map components and examples (#56) (#57

) * fix(documentation): change heatmap and drawing map examples We change examples and fix the drawing-manager.js adding the previously removed line 68. close: #44 * docs(documentation): add documentation for lazy loading and slots close: #44 * docs(documentation): upgrade documentation version and gmap-vue version on examples * docs(gmap-vue): upgrade gmap-vue version * test(gmap-vue): fix tests to the new api name * docs(documentation): add documentation explain how to access google maps api * chore(all): update package-lock * chore(root): add script test to travis yaml file
diegoazh · Aug 5, 2020 · 778a927 · 778a927
1 parent f9019f9
commit 778a927
Show file tree

Hide file tree

Showing 68 changed files with 672 additions and 512 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -5,6 +5,7 @@ cache: npm
 install:
   - npm ci
 script:
+  - npm run test
   - npm run build
 deploy:
   provider: pages

diff --git a/packages/documentation/docs/.vuepress/components/eg-custom-drawing-toolbar.vue b/packages/documentation/docs/.vuepress/components/eg-custom-drawing-toolbar.vue
@@ -0,0 +1,10 @@
+<template>
+  <div style="background-color: #040404; display: flex; position: absolute; padding: 8px">
+    <div><button @click="$emit('drawingmode_changed', 'rectangle')">Rectangle</button></div>
+    <div><button @click="$emit('drawingmode_changed', 'circle')">Circle</button></div>
+    <div><button @click="$emit('drawingmode_changed', 'polyline')">Line</button></div>
+    <div><button @click="$emit('drawingmode_changed', 'polygon')">Polygon</button></div>
+    <div><button @click="$emit('delete_selection')">Delete</button></div>
+    <div><button @click="$emit('save')">Save</button></div>
+  </div>
+</template>
diff --git a/packages/documentation/docs/.vuepress/components/eg-drawing-manager-with-slot.vue b/packages/documentation/docs/.vuepress/components/eg-drawing-manager-with-slot.vue
@@ -1,23 +1,23 @@
 <template>
   <div id="container">
     <h3>Drawing Manager Example</h3>
-    <div style="width: 100%;">
+    <div style="width: 100%; display: flex; flex-direction: column;">
       <span style="width: auto;" />
       <ul>
         <li><strong>Mode:</strong> {{ mapMode }}</li>
       </ul>
       <span style="width: auto;" />
-      <button @click="setMapMode">
-        {{ mapMode === "ready" ? "Edit" : "Ready" }}
-      </button>
+      <div>
+        <button @click="mapMode = 'edit'">Edit</button>
+      </div>
     </div>
     <br />
     <gmap-map
       ref="mapRef"
       :center="mapCenter"
-      :zoom="17"
+      :zoom="7"
       map-type-id="roadmap"
-      style="width: 100%; height: 100%;"
+      style="width: 100%; height: 500px; display:flex; justify-content: center; align-items: flex-start;"
       :options="{
         zoomControl: true,
         mapTypeControl: true,
@@ -35,85 +35,97 @@
           v-if="mapMode === 'edit'"
           :rectangle-options="rectangleOptions"
           :circle-options="circleOptions"
+          :polyline-options="polylineOptions"
+          :polygon-options="polygonOptions"
           :shapes="shapes"
         >
-          <div>
-            <button @click="setDrawingMode('rectangle')">Rectangle</button>
-            <button @click="setDrawingMode('circle')">Circle</button>
-            <button @click="deleteSelection()">Delete</button>
-            <button @click="mapMode = 'ready'">Save</button>
-          </div>
+          <template v-slot="on">
+            <eg-custom-drawing-toolbar
+              @drawingmode_changed="on.setDrawingMode($event)"
+              @delete_selection="on.deleteSelection()"
+              @save="mapMode = 'ready'"
+            />
+          </template>
         </gmap-drawing-manager>
       </template>
     </gmap-map>
   </div>
 </template>
 
 <script>
+
 export default {
-  name: "eg-drawing-manager-with-slot",
+  name: 'eg-drawing-manager-with-slot',
   data() {
     return {
-      mapCenter: { lat: 0, lng: 0 },
+      mapCenter: { lat: 4.5, lng: 99 },
       mapMode: null,
       mapDraggable: true,
       mapCursor: null,
       shapes: [],
       rectangleOptions: {
-        fillColor: "#777",
+        fillColor: '#777',
         fillOpacity: 0.4,
         strokeWeight: 2,
-        strokeColor: "#999",
+        strokeColor: '#999',
         draggable: false,
         editable: false,
         clickable: true
       },
       circleOptions: {
-        fillColor: "#777",
+        fillColor: '#777',
         fillOpacity: 0.4,
         strokeWeight: 2,
-        strokeColor: "#999",
+        strokeColor: '#999',
         draggable: false,
         editable: false,
         clickable: true
-      }
+      },
+      polylineOptions: {
+        fillColor: '#777',
+        fillOpacity: 0.4,
+        strokeWeight: 2,
+        strokeColor: '#999',
+        draggable: false,
+        editable: false,
+        clickable: true
+      },
+      polygonOptions: {
+        fillColor: '#777',
+        fillOpacity: 0.4,
+        strokeWeight: 2,
+        strokeColor: '#999',
+        draggable: false,
+        editable: false,
+        clickable: true
+      },
     };
   },
   watch: {
     mapMode(newMode, oldMode) {
-      if (newMode === "ready") {
-        if (oldMode === "edit") {
+      if (newMode === 'ready') {
+        if (oldMode === 'edit') {
           this.mapDraggable = true;
           this.mapCursor = null;
           return;
         }
       }
 
-      if (newMode === "edit") {
+      if (newMode === 'edit') {
         this.mapDraggable = false;
-        this.mapCursor = "default";
+        this.mapCursor = 'default';
       }
     }
   },
   mounted() {
-    this.mapMode = "ready";
-  },
-  methods: {
-    setMapMode() {
-      if (this.mapMode === "edit") {
-        this.mapMode = "ready";
-      } else {
-        this.mapMode = "edit";
-      }
-    }
+    this.mapMode = 'ready';
   }
 };
 </script>
 
 <style scoped>
 #container {
   width: 700px;
-  height: 300px;
-  margin-bottom: 9rem;
+  margin-bottom: 1rem;
 }
 </style>
diff --git a/packages/documentation/docs/.vuepress/components/eg-drawing-manager.vue b/packages/documentation/docs/.vuepress/components/eg-drawing-manager.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="container">
     <h3>Drawing Manager Example</h3>
-    <div style="width: 100%;">
+    <div style="width: 100%; display: flex; flex-direction: column;">
       <span style="width: auto;" />
       <ul>
         <li>
@@ -12,16 +12,18 @@
         </li>
       </ul>
       <span style="width: auto;" />
-      <button @click="setPos">Position</button>
-      <button @click="setMapMode">{{mapMode === 'ready' ? 'Edit' : 'Ready'}}</button>
+      <div>
+        <button @click="setPos">Position</button>
+        <button @click="setMapMode">{{mapMode === 'ready' ? 'change to Edit' : 'change to Ready'}}</button>
+      </div>
     </div>
     <br />
     <gmap-map
       ref="mapRef"
       :center="mapCenter"
-      :zoom="17"
+      :zoom="7"
       map-type-id="roadmap"
-      style="width: 100%; height: 100%;"
+      style="width: 100%; height: 500px"
       :options="{
         zoomControl: true,
         mapTypeControl: true,
@@ -53,35 +55,35 @@ export default {
   name: "eg-drawing-manager",
   data() {
     return {
-      mapCenter: { lat: 0, lng: 0 },
+      mapCenter: { lat: 4.5, lng: 99 },
       mapMode: null,
-      toolbarPosition: "TOP_CENTER",
+      toolbarPosition: 'TOP_CENTER',
       mapDraggable: true,
       mapCursor: null,
       shapes: [],
       rectangleOptions: {
-        fillColor: "#777",
+        fillColor: '#777',
         fillOpacity: 0.4,
         strokeWeight: 2,
-        strokeColor: "#999",
+        strokeColor: '#999',
         draggable: false,
         editable: false,
         clickable: true
       },
       circleOptions: {
-        fillColor: "#777",
+        fillColor: '#777',
         fillOpacity: 0.4,
         strokeWeight: 2,
-        strokeColor: "#999",
+        strokeColor: '#999',
         draggable: false,
         editable: false,
         clickable: true
       },
       polylineOptions: {
-        fillColor: "#777",
+        fillColor: '#777',
         fillOpacity: 0.4,
         strokeWeight: 2,
-        strokeColor: "#999",
+        strokeColor: '#999',
         draggable: false,
         editable: false,
         clickable: true
@@ -90,38 +92,38 @@ export default {
   },
   watch: {
     mapMode(newMode, oldMode) {
-      if (newMode === "ready") {
-        if (oldMode === "edit") {
+      if (newMode === 'ready') {
+        if (oldMode === 'edit') {
           this.mapDraggable = true;
           this.mapCursor = null;
           return;
         }
       }
 
-      if (newMode === "edit") {
+      if (newMode === 'edit') {
         this.mapDraggable = false;
-        this.mapCursor = "default";
+        this.mapCursor = 'default';
       }
     }
   },
   mounted() {
-    this.mapMode = "ready";
+    this.mapMode = 'ready';
   },
   methods: {
     setPos() {
       const posTypes = [
-        "TOP_CENTER",
-        "TOP_LEFT",
-        "TOP_RIGHT",
-        "LEFT_TOP",
-        "RIGHT_TOP",
-        "LEFT_CENTER",
-        "RIGHT_CENTER",
-        "LEFT_BOTTOM",
-        "RIGHT_BOTTOM",
-        "BOTTOM_CENTER",
-        "BOTTOM_LEFT",
-        "BOTTOM_RIGHT"
+        'TOP_CENTER',
+        'TOP_LEFT',
+        'TOP_RIGHT',
+        'LEFT_TOP',
+        'RIGHT_TOP',
+        'LEFT_CENTER',
+        'RIGHT_CENTER',
+        'LEFT_BOTTOM',
+        'RIGHT_BOTTOM',
+        'BOTTOM_CENTER',
+        'BOTTOM_LEFT',
+        'BOTTOM_RIGHT'
       ];
 
       this.toolbarPosition =
@@ -141,7 +143,6 @@ export default {
 <style scoped>
 #container {
   width: 700px;
-  height: 300px;
-  margin-bottom: 9rem;
+  margin-bottom: 1rem;
 }
 </style>
diff --git a/packages/documentation/docs/.vuepress/components/eg-heat-map-layer.vue b/packages/documentation/docs/.vuepress/components/eg-heat-map-layer.vue
@@ -1,9 +1,5 @@
 <template>
   <div>
-    <button @click="setMarkers">
-      Set markers on heatmap
-    </button>
-    <br /><br />
     <gmap-map
       ref="mapRef"
       :zoom="7"
@@ -29,30 +25,29 @@
 
 <script>
 export default {
-  name: "eg-heat-map-layer",
+  name: 'eg-heat-map-layer',
   data() {
     return {
       center: { lat: 4.5, lng: 99 },
       markers: [],
     }
   },
-  methods: {
-    setMarkers() {
-      this.markers = [
-        {
-          location: new google.maps.LatLng({ lat: 3, lng: 101 }),
-          weight: 100
-        },
-        {
-          location: new google.maps.LatLng({ lat: 5, lng: 99 }),
-          weight: 50
-        },
-        {
-          location: new google.maps.LatLng({ lat: 6, lng: 97 }),
-          weight: 80
-        }
-      ];
-    }
+  async mounted() {
+    await this.$gmapApiPromiseLazy();
+    this.markers = [
+      {
+        location: new google.maps.LatLng({ lat: 3, lng: 101 }),
+        weight: 100
+      },
+      {
+        location: new google.maps.LatLng({ lat: 5, lng: 99 }),
+        weight: 50
+      },
+      {
+        location: new google.maps.LatLng({ lat: 6, lng: 97 }),
+        weight: 80
+      }
+    ];
   }
 };
 </script>
diff --git a/packages/documentation/docs/.vuepress/components/set-valid-api-key.vue b/packages/documentation/docs/.vuepress/components/set-valid-api-key.vue
@@ -58,7 +58,6 @@ export default {
         googleMapScript.setAttribute('async', '')
         googleMapScript.setAttribute('defer', '')
         document.head.appendChild(googleMapScript)
-        document.head.appendChild(googleMapScript)
       }
 
       this.stateProcess = 'Gmap is ready :)'