Merge pull request #78 from readingdancer/Improving-Marker-Selection

Various improvements to the UX when selecting markers or from the list.
code-for-chapel-hill · Apr 3, 2020 · 017671a · 017671a
2 parents 5355559 + 8a1a912
commit 017671a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 21 deletions.
diff --git a/covid-19-support/src/App.vue b/covid-19-support/src/App.vue
@@ -9,7 +9,7 @@
         :day="day"
         :filteredMarkers="filteredMarkers"
         :location="locationData"
-        :showlist="showList"
+        :show-list="showList"
         @location-selected="passLocation"
         @toggle="isFilterOpen = !isFilterOpen"
         @need-selected="(val) => (need = val)"

diff --git a/covid-19-support/src/components/BusinessDetails.vue b/covid-19-support/src/components/BusinessDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <span>
     <div class="list-group list-group-flush">
-      <div class="list-group-item list-group-item-action bg-light" :class="backtolist" @click="$emit('close-details')">
+      <div class="list-group-item list-group-item-action bg-light backtolist" @click="$emit('close-details')">
         <i class="fas fa-arrow-left" />
         {{ $t('label.backtolist') }}
       </div>
@@ -22,7 +22,8 @@
           <span v-if="!!business.gsx$provideraddloc.$t">{{ business.gsx$provideraddloc.$t }}, </span>{{ business.gsx$address.$t }},
           {{ business.gsx$city.$t }}, {{ business.gsx$state.$t }} {{ business.gsx$zip.$t }}<br />
           <span v-if="!!business.gsx$contact.$t" class="metaData">
-            <b>{{ $t('label.phone') }}:</b> <a :href="'tel:' + business.gsx$contact.$t">{{ business.gsx$contact.$t }}</a><br />
+            <b>{{ $t('label.phone') }}:</b> <a :href="'tel:' + business.gsx$contact.$t">{{ business.gsx$contact.$t }}</a>
+            <br />
           </span>
           <span v-if="!!business.gsx$email.$t" class="metaData">
             <b>{{ $t('label.email') }}:</b> {{ business.gsx$email.$t }}<br />
@@ -130,7 +131,10 @@ export default {
 .backtolist i {
   margin-right: 0.375rem;
 }
-
+.backtolist:hover {
+  background: rgba(0, 0, 0, 0.05) !important;
+  cursor: pointer;
+}
 .title {
   margin: 0 0 0.75rem 0;
   display: inline-block;
@@ -159,6 +163,6 @@ export default {
 
 .green > div {
   /* display: inline-block; */
-  width: 270px;
+  width: 260px;
 }
 </style>
diff --git a/covid-19-support/src/components/ResourceMap.vue b/covid-19-support/src/components/ResourceMap.vue
@@ -2,6 +2,7 @@
   <b-container class="bv-example-row px-0" fluid>
     <div class="map">
       <l-map
+        ref="covidMap"
         v-if="showMap"
         :zoom="zoom"
         :center="center"
@@ -12,7 +13,7 @@
       >
         <l-tile-layer :url="url" :attribution="attribution" />
 
-        <v-marker-cluster :options="clusterOptions" @clusterclick="click()" @ready="ready">
+        <v-marker-cluster ref="marks" :options="clusterOptions" @clusterclick="click()" @ready="ready">
           <l-marker
             :lat-lng="latLng(item.gsx$lat.$t, item.gsx$lon.$t)"
             :icon="selectedIcon(index === location.locValue)"
@@ -92,6 +93,14 @@ export default {
   mounted() {
     this.editZoomControl()
   },
+  updated: function () {
+    this.$nextTick(function () {
+      // eslint-disable-next-line no-console
+      // console.log('Updated Yay!')
+      // var bounds = latLng.latLngBounds(this.$refs.mar)
+      // this.$refs.covidMap.mapObject.fitBounds(bounds)
+    })
+  },
   methods: {
     editZoomControl() {
       const zoomControl = this.$el.querySelector('.leaflet-top.leaflet-left')
@@ -126,13 +135,13 @@ export default {
     return {
       center: latLng(35.91371, -79.057919),
       zoom: 13,
-      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png',
       showParagraph: true,
       mapOptions: { zoomSnap: 0.5, setView: true },
       showMap: true,
       attribution,
       locationData: location,
-      clusterOptions: { spiderfyOnMaxZoom: true, maxClusterRadius: 40 }
+      clusterOptions: { spiderfyOnMaxZoom: true, maxClusterRadius: 40, disableClusteringAtZoom: 16 }
     }
   },
   computed: {},
@@ -145,12 +154,14 @@ export default {
     'v-marker-cluster': Vue2LeafletMarkerCluster
   },
   watch: {
-    // location: function (locationVal) {
-    //   if (!locationVal.isSetByMap) {
-    //     this.$refs['mapmark' + locationVal.locValue][0].mapObject.openPopup()
-    //     // var latLng = this.$refs['mapmark' + locationVal.locValue[0]]
-    //   }
-    // }
+    // https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
+    location: function (locationVal) {
+      if (locationVal.isSetByMap) {
+        return
+      }
+      var item = this.filteredMarkers[locationVal.locValue]
+      this.$refs.covidMap.mapObject.setView(latLng(item.gsx$lat.$t, item.gsx$lon.$t), 16, { duration: 1 })
+    }
   }
 }
 </script>

diff --git a/covid-19-support/src/components/SearchFilter.vue b/covid-19-support/src/components/SearchFilter.vue
@@ -15,7 +15,7 @@
       </div>
     </div>
 
-    <InfoPanel :infotype="'note'" :icon="'fa-info-circle'" v-if="currentBusiness == null || showList">
+    <InfoPanel :infotype="'note'" :icon="'fa-info-circle'" v-if="currentBusiness == null || showListing">
       {{ $t('sidebar.info-about-us') }} <a href="#" @click="$bvModal.show()">{{ $t('sidebar.info-link-text') }}</a>
       {{ $t('sidebar.info-end-text') }}
     </InfoPanel>
@@ -32,11 +32,11 @@
       :infotype="'green'"
       :icon="'fa-tractor'"
       :business="currentBusiness"
-      v-if="currentBusiness != null && showList != true"
+      v-if="currentBusiness != null && showListing != true"
       @close-details="closeDetails"
     ></BusinessDetails>
 
-    <results-list :filteredMarkers="filteredMarkers" :location="location" @location-selected="passLocation" v-if="showList" />
+    <results-list :filteredMarkers="filteredMarkers" :location="location" @location-selected="passLocation" v-if="showListing" />
   </div>
 </template>
 
@@ -92,22 +92,27 @@ export default {
   },
   methods: {
     closeDetails: function () {
-      this.showList = true
+      this.showListing = true
     },
     passLocation: function (val) {
       this.locationData = val
+      this.showListing = false
       this.$emit('location-selected', val)
-      this.showList = false
     }
   },
   watch: {
     need: function (val) {
       this.locationData = null
       if (val == 'none') {
-        this.showList = false
+        this.showListing = false
       } else {
-        this.showList = true
+        this.showListing = true
       }
+    },
+    location: function (val) {
+      console.log('location: showList' + this.showList)
+      console.log(val)
+      this.showListing = false
     }
   }
 }