Merge pull request #56 from scaife-viewer/fix-map-mode

Fix map mode
scaife-viewer · Jul 31, 2020 · 0d6c925 · 0d6c925
2 parents 76e22f3 + d11eefa
commit 0d6c925
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 35 deletions.
diff --git a/src/components/EntityMap.vue b/src/components/EntityMap.vue
@@ -7,8 +7,8 @@
     @load="onMapLoaded"
   >
     <EntityMapMarker
-      v-for="(coordinates, index) in coordinatesList"
-      :key="`${coordinates[2]}-${coordinates[3]}-${index}`"
+      v-for="(coordinates, idx) in coordinatesList"
+      :key="getMarkerKey(coordinates[2], idx)"
       :lat="coordinates[0]"
       :lng="coordinates[1]"
       :placeId="coordinates[2]"
@@ -44,6 +44,13 @@
           this.map.fitBounds(bbox);
         }
       },
+      getMarkerKey(entityId, idx) {
+        // constructs a key that will be recomputed
+        // when the value of `selectedNamedEntities` changes in the store
+        const isSelected =
+          this.selectedEntities.filter(id => entityId === id).length > 0;
+        return `${entityId}::${idx}::${isSelected}`;
+      },
     },
     watch: {
       coordinatesList: {
@@ -74,6 +81,9 @@
       mapStyle() {
         return this.config.mapStyle;
       },
+      selectedEntities() {
+        return this.$store.state.selectedNamedEntities;
+      },
     },
   };
 </script>
diff --git a/src/components/EntityMapMarker.vue b/src/components/EntityMapMarker.vue
@@ -1,6 +1,11 @@
 <template>
   <MglMarker ref="marker" :coordinates="[lat, lng]" @click="onMarkerClick">
-    <MglPopup ref="popup" :closeButton="false" :closeOnClick="false">
+    <MglPopup
+      ref="popup"
+      :showed="selected"
+      :closeButton="false"
+      :closeOnClick="false"
+    >
       <div class="label">{{ placeLabel }}</div>
     </MglPopup>
   </MglMarker>
@@ -27,35 +32,6 @@
         }
       },
     },
-    watch: {
-      selected: {
-        immediate: true,
-        handler() {
-          // eslint-disable-next-line no-console
-          console.log('selected', this.selected, this.placeLabel);
-          if (this.selected) {
-            this.$nextTick(() => {
-              // eslint-disable-next-line no-console
-              console.log('open', this.$refs.popup.open, this.placeLabel);
-              if (this.$refs.popup.open) {
-                this.$refs.popup.remove();
-              }
-              // eslint-disable-next-line no-console
-              console.log('toggle', this.placeLabel);
-              this.$refs.marker.togglePopup();
-              // eslint-disable-next-line no-console
-              console.log('now open?', this.$refs.popup.open, this.placeLabel);
-            });
-          } else {
-            this.$nextTick(() => {
-              // eslint-disable-next-line no-console
-              console.log('remove it', this.placeLabel);
-              this.$refs.popup.remove();
-            });
-          }
-        },
-      },
-    },
     computed: {
       selected() {
         return (

diff --git a/src/reader/components/NamedEntitiesModeReader.vue b/src/reader/components/NamedEntitiesModeReader.vue
@@ -12,7 +12,7 @@
       </ErrorMessage>
       <template v-else>
         <EntityMapToolbar
-          v-if="enabled && data.coordinatesList.length > 0"
+          v-if="data.coordinatesList.length > 0"
           :mapState="mapState"
           @show="onShowMap"
         />
@@ -56,8 +56,6 @@
     },
     data() {
       return {
-        // @@@ remove `enabled` when we're ready to expose map mode again
-        enabled: false,
         mapState: MAP_STATE_NONE,
       };
     },