feat(gmap-vue): add a drawing manager component (#19)

* Add a Drawing Manager component This is a drawing manager component that brings up a UI for drawing shapes on your map. If you leave it empty, it will bring up the default DrawingManager toolbar, but you can also add your own toolbar into the default slot. In this case, slot scoped methods are provided to change the drawing mode, and delete selected shapes. The mandatory shapes prop will contain all the drawn shapes. If this has existing shape data in it, they will be drawn onto the map when the editor is displayed. Please test the examples first! * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/examples/drawing-manager.html * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/examples/drawing-manager2.html * fix(gmap-vue): update packages/gmap-vue/examples/drawing-manager2.html * feat(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * feat(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * feat(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * feat(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/src/components-implementation/drawing-manager.js * fix(gmap-vue): update packages/gmap-vue/examples/drawing-manager2.html * fix(gmap-vue): update packages/gmap-vue/examples/drawing-manager2.html * fix(gmap-vue): update packages/gmap-vue/examples/drawing-manager2.html Co-authored-by: Diego A. Zapata Häntsch <diegoazh2003@gmail.com>
diegoazh · Aug 2, 2020 · d7afa94 · d7afa94
1 parent 5d7d9c0
commit d7afa94
Show file tree

Hide file tree

Showing 5 changed files with 467 additions and 1 deletion.
diff --git a/packages/gmap-vue/examples/drawing-manager.html b/packages/gmap-vue/examples/drawing-manager.html
@@ -0,0 +1,137 @@
+<body>
+  <div id="root">
+    <h1>Drawing Manager Example</h1>
+    <div style="width:100%">
+      <span style="width:auto" />
+      {{ mapMode }} - {{ toolbarPosition }}
+      <span style="width:auto" />
+      <button @click="setPos">Position</button>
+      <button @click="mapMode='edit'">Edit</button>
+    </div>
+    <br />
+	  <gmap-map
+	    ref="mapRef"
+	    :center="mapCenter"
+	    :zoom="17"
+	    map-type-id="roadmap"
+	    style="width: 100%; height: 100%"
+	    :options="{
+	      zoomControl: true,
+	      mapTypeControl: true,
+	      scaleControl: false,
+	      streetViewControl: false,
+	      rotateControl: false,
+	      fullscreenControl: false,
+	      disableDefaultUi: false,
+	      draggable: mapDraggable,
+	      draggableCursor: mapCursor
+	    }"
+	  >
+	    <template #visible>
+	      <gmap-drawing-manager
+	        v-if="mapMode==='edit'"
+	        :position="toolbarPosition"
+	        :rectangle-options="rectangleOptions"
+	        :circle-options="circleOptions"
+	        :polyline-options="polylineOptions"
+	        :shapes="shapes"
+	      />
+	    </template>
+	  </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: 'places,drawing'
+      },
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+      new Vue({
+        el: '#root',
+        data: {
+			mapCenter: {lat: 0, lng: 0},
+			mapMode: null,
+			toolbarPosition: 'TOP_CENTER',
+		    mapDraggable: true,
+		    mapCursor: null,
+		    shapes: [],
+		    rectangleOptions: {
+		      fillColor: '#777',
+		      fillOpacity: 0.4,
+		      strokeWeight: 2,
+		      strokeColor: '#999',
+		      draggable: false,
+		      editable: false,
+		      clickable: true
+		    },
+		    circleOptions: {
+		      fillColor: '#777',
+		      fillOpacity: 0.4,
+		      strokeWeight: 2,
+		      strokeColor: '#999',
+		      draggable: false,
+		      editable: false,
+		      clickable: true
+		    },
+		    polylineOptions: {
+		      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') {
+						this.mapDraggable = true;
+						this.mapCursor = null;
+						return;
+					}
+				}
+
+				if (newMode === 'edit') {
+					this.mapDraggable = false;
+					this.mapCursor = 'default';
+				}
+			}
+		},
+		mounted () {
+			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'
+		      ];
+
+		      this.toolbarPosition = posTypes[Math.floor(Math.random() * posTypes.length)];
+		    }
+        }
+      });
+    });
+
+  </script>
+
+</body>
diff --git a/packages/gmap-vue/examples/drawing-manager2.html b/packages/gmap-vue/examples/drawing-manager2.html
@@ -0,0 +1,111 @@
+<body>
+  <div id="root">
+    <h1>Drawing Manager Example</h1>
+    <div style="width:100%">
+      <span style="width:auto" />
+      {{ mapMode }}
+      <span style="width:auto" />
+      <button @click="mapMode='edit'">Edit</button>
+    </div>
+    <br />
+	  <gmap-map
+	    ref="mapRef"
+	    :center="mapCenter"
+	    :zoom="17"
+	    map-type-id="roadmap"
+	    style="width: 100%; height: 100%"
+	    :options="{
+	      zoomControl: true,
+	      mapTypeControl: true,
+	      scaleControl: false,
+	      streetViewControl: false,
+	      rotateControl: false,
+	      fullscreenControl: false,
+	      disableDefaultUi: false,
+	      draggable: mapDraggable,
+	      draggableCursor: mapCursor
+	    }"
+	  >
+	    <template #visible>
+	      <gmap-drawing-manager
+	        v-if="mapMode==='edit'"
+	        :rectangle-options="rectangleOptions"
+	        :circle-options="circleOptions"
+	        :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>
+	      </gmap-drawing-manager>
+	    </template>
+	  </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: 'places,drawing'
+      },
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+      new Vue({
+        el: '#root',
+        data: {
+			mapCenter: {lat: 0, lng: 0},
+			mapMode: null,
+		    mapDraggable: true,
+		    mapCursor: null,
+		    shapes: [],
+		    rectangleOptions: {
+		      fillColor: '#777',
+		      fillOpacity: 0.4,
+		      strokeWeight: 2,
+		      strokeColor: '#999',
+		      draggable: false,
+		      editable: false,
+		      clickable: true
+		    },
+		    circleOptions: {
+		      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") {
+                this.mapDraggable = true;
+                this.mapCursor = null;
+                return;
+              }
+            }
+
+            if (newMode === "edit") {
+              this.mapDraggable = false;
+              this.mapCursor = "default";
+            }
+          },
+        },
+        mounted() {
+          this.mapMode = "ready";
+        },
+        methods: {},
+      });
+    });
+  </script>
+
+</body>