feat: new "Area Map" viz type for zone maps, etc: viz-map*.yaml

Zone, TAZ, area maps: you can have it all with this new plugin

Embed in dashboard using 'type: map' or use it standalone with a
viz-map*.yaml config file.

src/charts/allCharts.ts

@@ -22,7 +22,7 @@ import video from './video.vue'
 import carriers from './carriers.vue'
 import flowmap from './flowmap.vue'
 import links from './links.vue'
-import map from './map-polygons.vue'
+import map from './area-map.vue'
 
 // ----- EXPORT CHARTS HERE ---------------------------------------------------
 // export all resizable charts here

src/charts/area-map.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+fancy-polygon-map.deck-map(
+  :files="files"
+  :fileSystemConfig="fileSystemConfig"
+  :root="fileSystemConfig.slug"
+  :subfolder="subfolder"
+  :config="config"
+  :thumbnail="false"
+  :datamanager="datamanager"
+  :yamlConfig="'funk-yaml-config.yaml'"
+  @isLoaded="isLoaded"
+)
+
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
+
+import { FileSystemConfig } from '@/Globals'
+import FancyPolygonMap from '@/plugins/shape-file/FancyPolygonMap.vue'
+import DashboardDataManager from '@/js/DashboardDataManager'
+
+@Component({ components: { FancyPolygonMap } })
+export default class VueComponent extends Vue {
+  @Prop({ required: true }) fileSystemConfig!: FileSystemConfig
+  @Prop({ required: true }) subfolder!: string
+  @Prop({ required: true }) files!: string[]
+  @Prop({ required: true }) config!: any
+  @Prop({ required: false }) datamanager!: DashboardDataManager
+  @Prop({ required: false }) yamlConfig!: string
+
+  private isLoaded() {
+    this.$emit('isLoaded')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.deck-map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 640px) {
+}
+</style>

src/charts/map-polygons.vue → src/plugins/shape-file/FancyPolygonMap.vue

@@ -47,8 +47,8 @@
       id="sliderOpacity" min="0" max="100" v-model="sliderOpacity" step="5" type="range")
 
     .map-type-buttons
-      img.img-button(@click="useCircles=false" src="../assets/btn-polygons.jpg" title="Shapes")
-      img.img-button(@click="useCircles=true" src="../assets/btn-circles.jpg" title="Circles")
+      img.img-button(@click="useCircles=false" src="../../assets/btn-polygons.jpg" title="Shapes")
+      img.img-button(@click="useCircles=true" src="../../assets/btn-circles.jpg" title="Circles")
 
 </template>
 
@@ -58,7 +58,8 @@ import { group, zip, sum } from 'd3-array'
 import * as turf from '@turf/turf'
 import YAML from 'yaml'
 
-import { DataTable, DataTableColumn, FileSystemConfig } from '@/Globals'
+import globalStore from '@/store'
+import { DataTable, DataTableColumn, FileSystemConfig, VisualizationPlugin } from '@/Globals'
 import PolygonAndCircleMap from '@/components/PolygonAndCircleMap.vue'
 import VizConfigurator from '@/components/viz-configurator/VizConfigurator.vue'
 import ZoomButtons from '@/components/ZoomButtons.vue'
@@ -546,6 +547,15 @@ export default class VueComponent extends Vue {
     this.activeColumn = 'value'
   }
 }
+
+// !register plugin!
+globalStore.commit('registerPlugin', {
+  kebabName: 'area-map',
+  prettyName: 'Area Map',
+  description: 'Area Map',
+  filePatterns: ['**/viz-map*.y?(a)ml'],
+  component: VueComponent,
+} as VisualizationPlugin)
 </script>
 
 <style scoped lang="scss">