feat(gmap-vue): add a heatmap layer component (#8)

* Add a Heatmap Layer component * Fix typo left over from discrete component implementation * fix(gmap-vue): update packages/gmap-vue/examples/heatmap-layer.html * fix(gmap-vue): update packages/gmap-vue/examples/heatmap-layer.html * fix(gmap-vue): update packages/gmap-vue/examples/heatmap-layer.html * fix(gmap-vue): update packages/gmap-vue/examples/heatmap-layer.html * fix(gmap-vue): update packages/gmap-vue/examples/heatmap-layer.html * fix(gmap-vue): update packages/gmap-vue/src/components/heatmap-layer.js * fix(gmap-vue): update packages/gmap-vue/src/components/heatmap-layer.js Co-authored-by: Diego A. Zapata Häntsch <diegoazh2003@gmail.com>
diegoazh · Aug 2, 2020 · 5d7d9c0 · 5d7d9c0
1 parent 19e3a1c
commit 5d7d9c0
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 1 deletion.
diff --git a/packages/gmap-vue/examples/heatmap-layer.html b/packages/gmap-vue/examples/heatmap-layer.html
@@ -0,0 +1,46 @@
+<body>
+  <div id="root">
+      <button @click="setMarkers">
+        Set markers on heatmap
+      </button>
+      <br><br>
+    <gmap-map ref="mapRef" :zoom="7" :center="center" map-type-id="roadmap" style="width: 100%; height: 500px">
+        <gmap-marker v-for="(m, index) in markers" :key="index" :position="m.location" :clickable="true" :draggable="true" @click="center=m.location" />
+        <gmap-heatmap-layer :data="markers" :options="{maxIntensity: 120, dissipating: false}" />
+    </gmap-map>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
+  <script src="gmap-vue.js"></script>
+
+  <script>
+
+    Vue.use(GmapVue, {
+      load: {
+        key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
+        libraries: 'visualization'
+      },
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+      new Vue({
+        el: '#root',
+        data: {
+          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 },
+            ];
+          }
+        },
+      });
+    });
+
+  </script>
+
+</body>
diff --git a/packages/gmap-vue/src/components/heatmap-layer.js b/packages/gmap-vue/src/components/heatmap-layer.js
@@ -0,0 +1,27 @@
+import mapElementFactory from '../factories/map-element'
+
+const props = {
+    options: {
+        type: Object,
+        twoWay: false,
+        default: () => {},
+    },
+    data: {
+        type: Array,
+        twoWay: true        
+    },
+};
+
+const events = [];
+
+/**
+ * @class Heatmap Layer
+ *
+ * Heatmap Layer class
+ */
+export default mapElementFactory({
+    mappedProps: props,
+    events,
+    name: 'heatmapLayer',
+    ctr: () => google.maps.visualization.HeatmapLayer
+});
diff --git a/packages/gmap-vue/src/main.js b/packages/gmap-vue/src/main.js
@@ -2,6 +2,7 @@ import loadGmapApi from './manager/initializer'
 import promiseLazyFactory from './factories/promise-lazy'
 
 import KmlLayer from './components/kml-layer'
+import HeatmapLayer from './components/heatmap-layer'
 import Marker from './components/marker'
 import Polyline from './components/polyline'
 import Polygon from './components/polygon'
@@ -33,7 +34,7 @@ let GmapApi = null
 
 // export everything
 export {
-  loadGmapApi, KmlLayer, Marker, Polyline, Polygon, Circle, Cluster, Rectangle,
+  loadGmapApi, HeatmapLayer, KmlLayer, Marker, Polyline, Polygon, Circle, Cluster, Rectangle,
   InfoWindow, Map, PlaceInput, MapElementMixin, MapElementFactory, Autocomplete,
   MountableMixin, StreetViewPanorama
 }
@@ -75,6 +76,7 @@ export function install (Vue, options) {
     Vue.component('GmapMap', Map)
     Vue.component('GmapMarker', Marker)
     Vue.component('GmapInfoWindow', InfoWindow)
+    Vue.component('GmapHeatmapLayer', HeatmapLayer)
     Vue.component('GmapKmlLayer', KmlLayer)
     Vue.component('GmapPolyline', Polyline)
     Vue.component('GmapPolygon', Polygon)