@worksafevictoria/wcl7.5 1.1.0-beta.109 → 1.1.0-beta.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.109",
+  "version": "1.1.0-beta.110",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Paragraphs/Map/index.vue

@@ -22,62 +22,50 @@
     </row>
     <row>
       <column>
-        <div>
-          <GoogleMap
-            api-key="AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c"
-            :style="`width: 100%; height: ${mapHeight}`"
-            :center="center"
-            :zoom="zoom"
-            :zoom-control="true"
-            :mapTypeControl="false"
-            :streetViewControl="false"
-            :fullscreenControl="true"
-          >
-            <!-- <CustomControl
-              position="TOP_CENTER"
-              class="mt-4"
-              style="background-color: rgba(0, 0, 0, 0.2); border-radius: 5px"
-              ><row>
-                <column class="py-2 px-3">
-                  <single-taxonomy
-                    v-for="(t, i) in computedPropFilters"
-                    :key="i"
-                    :ref="`${t.record_id}`"
-                    :data="t"
-                    :results="filteredList.length"
-                    :loading="isFiltering"
-                    class="wcl-directory-filters__filterButton"
-                    @onFilter="onFilter"
-                  />
-                  <filter-button
-                    v-if="!hideReset"
-                    :is-reset="true"
-                    class="wcl-directory-filters__filterButton"
-                    @clicked="reset"
-                  />
-                </column>
-              </row>
-            </CustomControl> -->
-            <!-- <MarkerCluster> -->
-            <Marker
-              v-for="(location, i) in postcodes"
-              :options="{
-                position: location.center,
-                label: `${location.deaths}`,
-                title: `${location.deaths} ${location.deaths > 1 ? 'deaths' : 'death'}`,
-              }"
-              :key="i"
-            />
-            <!-- </MarkerCluster> -->
-          </GoogleMap>
-        </div>
+        <GoogleMap
+          api-key="AIzaSyD76GAmQQ6DuxKWf-aLXPZ9pwdz4nOvs2c"
+          map-id="18650d0e6b0daeb1"
+          :style="`width: 100%; height: ${mapHeight}`"
+          :center="center"
+          :zoom="zoom"
+          :zoom-control="true"
+          :mapTypeControl="false"
+          :streetViewControl="false"
+          :fullscreenControl="true"
+        >
+          <Polygon
+            v-for="(location, i) in lgaBoundaries"
+            :options="location"
+            :key="i + polygonKey"
+          />
+          <CustomControl position="BOTTOM_CENTER">
+            <h4 v-if="unknownLGA">
+              <BBadge variant="light"> Unknown LGA {{ unknownLGA }} </BBadge>
+            </h4>
+          </CustomControl>
+          <AdvancedMarker
+            v-for="(location, i) in centerLGA"
+            :options="{
+              position: location.center,
+              title: `${location.lga} (${location.deaths} ${location.deaths > 1 ? 'fatalities' : 'fatality'})`,
+            }"
+            :key="i"
+            :pin-options="{
+              background: '#fdcd59',
+              glyph: `${location.deaths}`,
+              glyphColor: 'black',
+              borderColor: '#000000',
+              scale: 1,
+            }"
+          />
+        </GoogleMap>
       </column>
     </row>
   </container>
 </template>
 
 <script>
-import postcode from './postcode_location.json'
+import lga from './lga-map.json'
 import {
   GoogleMap,
   Marker,
@@ -85,13 +73,15 @@ import {
   Circle,
   CustomControl,
   InfoWindow,
+  Polygon,
+  AdvancedMarker,
 } from 'vue3-google-map'
 import Container from '../../Containers/Container/index.vue'
 import Column from '../../Containers/Column/index.vue'
 import Row from '../../Containers/Row/index.vue'
 import FilterButton from '../../Common/FilterButton/index.vue' // Reset
 import SingleTaxonomy from '../../Global/DirectoryFilters/SingleTaxonomy/index.vue'
-import { BFormGroup, BFormSelect, BButton } from 'bootstrap-vue-next'
+import { BFormGroup, BFormSelect, BButton, BBadge } from 'bootstrap-vue-next'
 
 export default {
   name: 'GeoChart',
@@ -110,6 +100,9 @@ export default {
     CustomControl,
     InfoWindow,
     BButton,
+    Polygon,
+    AdvancedMarker,
+    BBadge,
   },
   props: {
     statsData: { type: Array, default: () => [] },
@@ -118,7 +111,7 @@ export default {
   },
   data() {
     return {
-      postcode,
+      lga,
       zoom: 7,
       mapHeight: '700px',
       center: { lat: -36.5, lng: 145.3 },
@@ -129,6 +122,8 @@ export default {
         selected: {},
         availableBundles: [],
       },
+      unknownLGA: 0,
+      polygonKey: 1,
     }
   },
   mounted() {
@@ -209,27 +204,50 @@ export default {
       })
       return list
     },
-    postcodes: function () {
+    centerLGA: function () {
       if (this.filteredList.length > 1) {
         let location = {}
+        this.unknownLGA = 0
         this.filteredList.forEach((item) => {
-          if (location[item.POSTCODE]) {
-            location[item.POSTCODE].deaths++
+          if (location[item.LGA]) {
+            location[item.LGA].deaths++
           } else {
-            let pc = this.postcode.find((obj) => obj.postcode == item.POSTCODE)
+            let pc = this.lga.find(
+              (obj) =>
+                obj.name ==
+                item.LGA.replace('-', ' ')
+                  .toUpperCase()
+                  .substring(0, obj.name.length),
+            )
             if (pc) {
-              location[item.POSTCODE] = {
-                center: { lat: pc.lat, lng: pc.long },
+              location[item.LGA] = {
+                center: { lat: pc.labelpoint[0], lng: pc.labelpoint[1] },
                 deaths: 1,
+                lga: pc.name,
               }
             } else {
-              console.log('🚀 ~ item.POSTCODE:', item.POSTCODE)
+              this.unknownLGA++
             }
           }
         })
         return location
       }
     },
+    lgaBoundaries: function () {
+      let lgaData = lga.map((item) => {
+        return {
+          strokeColor: '#000000',
+          strokeOpacity: 0.8,
+          strokeWeight: 1,
+          fillColor: '#bababa',
+          fillOpacity: 0.5,
+          paths: item.boundaries.map((item) => {
+            return { lng: item[0], lat: item[1] }
+          }),
+        }
+      })
+      return lgaData
+    },
   },
   methods: {
     resize() {