feat(gmap-vue): update kml-layer component to a vue file

diegoazh · Nov 23, 2021 · ca4056a · ca4056a
1 parent 66d8064
commit ca4056a
Show file tree

Hide file tree

Showing 10 changed files with 274 additions and 75 deletions.
diff --git a/packages/documentation/docs/.vuepress/config.js b/packages/documentation/docs/.vuepress/config.js
@@ -35,10 +35,10 @@ module.exports = {
                 ['drawing-manager', 'GmapDrawingManager'],
                 ['heatmap-layer', 'Heat Map Layer'],
                 ['info-window', 'Info Window'],
+                ['kml-layer', 'Kml layer'],
                 ['cdn', 'Using a CDN'],
                 ['map-center', 'Map center'],
                 ['map-center-twoway', 'Map center two way binding'],
-                ['kml-layer', 'Kml layer'],
                 ['map-functions', 'Map functions'],
                 ['marker', 'Marker'],
                 ['basic-marker-cluster', 'Marker cluster'],

diff --git a/packages/documentation/docs/code/components/kml-layer.md b/packages/documentation/docs/code/components/kml-layer.md
@@ -0,0 +1,34 @@
+---
+title: kml-layer
+---
+# Kml-Layer
+KmlLayer component
+
+::: tip Tags
+**see**: [source code](/guide/kml-layer.html#source-code)<br />**see**: [Official documentation](https://developers.google.com/maps/documentation/javascript/kmllayer)<br />
+:::
+
+## Table of contents
+[[toc]]
+
+## Props
+
+### url (`string`)
+::: tip Tags
+**see**: [KML layer options](https://developers.google.com/maps/documentation/javascript/kmllayer#kml_layer_options)<br />
+:::
+
+
+|type|default|description|
+|:-|:-|:-|:-|
+|`string`|-|The URL of the .kml file|
+### map (`object`)
+::: tip Tags
+**see**: [KML layer options](https://developers.google.com/maps/documentation/javascript/kmllayer#kml_layer_options)<br />
+:::
+
+
+|type|default|description|
+|:-|:-|:-|:-|
+|`object`|-|Specifies the Map on which to render the KmlLayer. You can hide a KmlLayer by setting this value to null within the setMap() method|
+
diff --git a/packages/documentation/docs/code/config.js b/packages/documentation/docs/code/config.js
diff --git a/packages/documentation/docs/code/utils/helpers.md b/packages/documentation/docs/code/utils/helpers.md
@@ -47,7 +47,8 @@ emitted if the data source was external.</p>
 <a name="mappedPropsToVueProps"></a>
 
 ## mappedPropsToVueProps(props)
-Strips out the extraneous properties we have in ourprops definitions
+Strips out the extraneous properties we have in our
+props definitions
 
 **Kind**: global function  
 
@@ -58,49 +59,62 @@ Strips out the extraneous properties we have in our
props definitions
 <a name="twoWayBindingWrapper"></a>
 
 ## twoWayBindingWrapper()
-When you have two-way bindings, but the actual bound value will not equalthe value you initially passed in, then to avoid an infinite loop youneed to increment a counter every time you pass in a value, decrement thesame counter every time the bound value changed, but only bubble upthe event when the counter is zero.
-Example:
-
-Let's say DrawingRecognitionCanvas is a deep-learning backed canvas
-that, when given the name of an object (e.g. 'dog'), draws a dog.
-But whenever the drawing on it changes, it also sends back its interpretation
-of the image by way of the @newObjectRecognized event.
-
-<input
-  type="text"
-  placeholder="an object, e.g. Dog, Cat, Frog"
-  v-model="identifiedObject" />
-<DrawingRecognitionCanvas
+When you have two-way bindings, but the actual bound value will not equal
+the value you initially passed in, then to avoid an infinite loop you
+need to increment a counter every time you pass in a value, decrement the
+same counter every time the bound value changed, but only bubble up
+the event when the counter is zero.
+
+Example:
+
+Let's say DrawingRecognitionCanvas is a deep-learning backed canvas
+that, when given the name of an object (e.g. 'dog'), draws a dog.
+But whenever the drawing on it changes, it also sends back its interpretation
+of the image by way of the @newObjectRecognized event.
+
+<input
+  type="text"
+  placeholder="an object, e.g. Dog, Cat, Frog"
+  v-model="identifiedObject" />
+<DrawingRecognitionCanvas
   :object="identifiedObject"
 
 **Kind**: global function  
-**Newobjectrecognized&#x3D;&quot;identifiedobject**: = $event"
-  />
-
-new TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
-  this.$watch('identifiedObject', () => {
-    // new object passed in
-    increment()
-  })
-  this.$deepLearningBackend.on('drawingChanged', () => {
-    recognizeObject(this.$deepLearningBackend)
-      .then((object) => {
-        decrement()
-        if (shouldUpdate()) {
-          this.$emit('newObjectRecognized', object.name)
-        }
-      })
-  })
+**Newobjectrecognized&#x3D;&quot;identifiedobject**: = $event"
+  />
+
+new TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
+  this.$watch('identifiedObject', () => {
+    // new object passed in
+    increment()
+  })
+  this.$deepLearningBackend.on('drawingChanged', () => {
+    recognizeObject(this.$deepLearningBackend)
+      .then((object) => {
+        decrement()
+        if (shouldUpdate()) {
+          this.$emit('newObjectRecognized', object.name)
+        }
+      })
+  })
 })  
 <a name="watchPrimitiveProperties"></a>
 
 ## watchPrimitiveProperties()
-Watch the individual properties of a PoD object, instead of the objectper se. This is different from a deep watch where both the referenceand the individual values are watched.In effect, it throttles the multiple $watch to execute at most once per tick.
+Watch the individual properties of a PoD object, instead of the object
+per se. This is different from a deep watch where both the reference
+and the individual values are watched.
+
+In effect, it throttles the multiple $watch to execute at most once per tick.
 
 **Kind**: global function  
 <a name="bindProps"></a>
 
 ## bindProps()
-Binds the properties defined in props to the google maps instance.If the prop is an Object type, and we wish to track the propertiesof the object (e.g. the lat and lng of a LatLng), then we do a deepwatch. For deep watch, we also prevent the _changed event from beingemitted if the data source was external.
+Binds the properties defined in props to the google maps instance.
+If the prop is an Object type, and we wish to track the properties
+of the object (e.g. the lat and lng of a LatLng), then we do a deep
+watch. For deep watch, we also prevent the _changed event from being
+emitted if the data source was external.
 
 **Kind**: global function  
diff --git a/packages/documentation/docs/guide/info-window.md b/packages/documentation/docs/guide/info-window.md
@@ -208,7 +208,7 @@ If you need to know the API of this component please read it [here](/code/compon
           currentMidx: null,
 
           infoOptions: {
-        	content: '',
+          content: '',
             //optional: offset infowindow so it visually sits nicely on top of our marker
             pixelOffset: {
               width: 0,

diff --git a/packages/documentation/docs/guide/kml-layer.md b/packages/documentation/docs/guide/kml-layer.md
@@ -1,11 +1,103 @@
-## Live example
+## Description
 
-<eg-base>
-  <eg-kml-layer />
-</eg-base>
+This component helps you to create a Kml layer.
+
+For more information read the Google Maps documentation for [kml layers](https://developers.google.com/maps/documentation/javascript/kmllayer).
+
+It is exported with the name `GmapKmlLayer`.
+
+## Variables
+
+This component save the original Kml-layer object provided by Google Maps in a property called `$kmlLayerObject`, as the example below.
+
+```javascript
+  this.$kmlLayerObject = new google.maps.KmlLayer(...);
+```
 
 ## Source code
 
+:::details Click to se the source code of <code>info-window.vue</code> component
+
+```vue
+<script>
+import MapElementMixin from '../mixins/map-element';
+import { getPropsValues, bindEvents, bindProps } from '../utils/helpers';
+import { kmlLayerMappedProps } from '../utils/mapped-props-by-map-element';
+
+export default {
+  mixins: [MapElementMixin],
+  props: {
+    url: {
+      type: String,
+    },
+    map: {
+      type: Object,
+    },
+  },
+  async provide() {
+    const events = [
+      'click',
+      'rightclick',
+      'dblclick',
+      'mouseup',
+      'mousedown',
+      'mouseover',
+      'mouseout',
+    ];
+
+    this.$map = await this.$mapPromise;
+
+    const initialOptions = {
+      ...this.options,
+      map: this.$map,
+      ...getPropsValues(this, kmlLayerMappedProps),
+    };
+
+    const { options: extraOptions, ...finalOptions } = initialOptions;
+
+    this.$kmlLayerObject = new google.maps.KmlLayer(finalOptions);
+
+    bindProps(this, this.$infoWindowObject, kmlLayerMappedProps);
+    bindEvents(this, this.$infoWindowObject, events);
+
+    this.$kmlLayerPromise = this.$kmlLayerObject;
+    return { $kmlLayerPromise: this.$kmlLayerObject };
+  },
+  destroyed() {
+    if (this.$kmlLayerObject && this.$kmlLayerObject.setMap) {
+      this.$kmlLayerObject.setMap(null);
+    }
+  },
+};
+</script>
+
+```
+
+:::
+
+## How to use it
+
+```vue
+  const kmlLayers = [
+    {
+      url:
+        'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml',
+    },
+  ];
+
+  <google-kml-layer
+    v-for="l in kmlLayers"
+    :url="l.url"
+    :clickable="true"
+  ></google-kml-layer>
+```
+
+If you need to know the API of this component please read it [here](/code/components/kml-layer.html).
+
+## Html examples
+
+:::details HTML example
+
 ```html
 <body>
   <div id="root">
@@ -46,3 +138,15 @@
   </script>
 </body>
 ```
+
+:::
+
+## Test the component
+
+:::details Click to see the HTML example in action
+
+<eg-base>
+  <eg-kml-layer />
+</eg-base>
+
+:::
diff --git a/packages/gmap-vue/src/components/kml-layer.js b/packages/gmap-vue/src/components/kml-layer.js
diff --git a/packages/gmap-vue/src/components/kml-layer.vue b/packages/gmap-vue/src/components/kml-layer.vue
@@ -0,0 +1,69 @@
+<script>
+import MapElementMixin from '../mixins/map-element';
+import { getPropsValues, bindEvents, bindProps } from '../utils/helpers';
+import { kmlLayerMappedProps } from '../utils/mapped-props-by-map-element';
+
+/**
+ * KmlLayer component
+ * @displayName Kml-Layer
+ * @see [source code](/guide/kml-layer.html#source-code)
+ * @see [Official documentation](https://developers.google.com/maps/documentation/javascript/kmllayer)
+ */
+export default {
+  mixins: [MapElementMixin],
+  props: {
+    /**
+     * The URL of the .kml file
+     * @see [KML layer options](https://developers.google.com/maps/documentation/javascript/kmllayer#kml_layer_options)
+     */
+    url: {
+      type: String,
+    },
+    /**
+     * Specifies the Map on which to render the KmlLayer. You can hide a KmlLayer by setting this value to null within the setMap() method
+     * @see [KML layer options](https://developers.google.com/maps/documentation/javascript/kmllayer#kml_layer_options)
+     */
+    map: {
+      type: Object,
+    },
+  },
+  async provide() {
+    const events = [
+      'click',
+      'rightclick',
+      'dblclick',
+      'mouseup',
+      'mousedown',
+      'mouseover',
+      'mouseout',
+    ];
+
+    // Infowindow needs this to be immediately available
+    this.$map = await this.$mapPromise;
+
+    // Initialize the maps with the given options
+    const initialOptions = {
+      // TODO: analyze the below line because I think it can be removed
+      ...this.options,
+      map: this.$map,
+      ...getPropsValues(this, kmlLayerMappedProps),
+    };
+
+    const { options: extraOptions, ...finalOptions } = initialOptions;
+
+    this.$kmlLayerObject = new google.maps.KmlLayer(finalOptions);
+
+    bindProps(this, this.$infoWindowObject, kmlLayerMappedProps);
+    bindEvents(this, this.$infoWindowObject, events);
+
+    this.$kmlLayerPromise = this.$kmlLayerObject;
+    return { $kmlLayerPromise: this.$kmlLayerObject };
+  },
+  destroyed() {
+    // Note: not all Google Maps components support maps
+    if (this.$kmlLayerObject && this.$kmlLayerObject.setMap) {
+      this.$kmlLayerObject.setMap(null);
+    }
+  },
+};
+</script>