Merge pull request #32 from scaife-viewer/develop

Prepare for v2020-06-19-001 release
scaife-viewer · Jun 19, 2020 · 78161fa · 78161fa
2 parents 3efe5d6 + 829310b
commit 78161fa
Show file tree

Hide file tree

Showing 5 changed files with 275 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -20,12 +20,14 @@
     "graphql-tag": "^2.10.3",
     "loaders.css": "^0.1.2",
     "lodash.clonedeep": "^4.5.0",
+    "mapbox-gl": "^1.11.0",
     "node-sass": "^4.14.0",
     "openseadragon": "^2.4.2",
     "path": "^0.12.7",
     "sass-loader": "^8.0.2",
     "scaife-skeleton": "^0.7.0",
     "vue": "^2.6.11",
+    "vue-mapbox": "^0.4.1",
     "vue-router": "^3.1.6",
     "vuex": "^3.3.0",
     "webpack": "^4.43.0"

diff --git a/src/main.js b/src/main.js
@@ -3,6 +3,8 @@ import {
   faChevronLeft,
   faChevronDown,
   faChevronRight,
+  faUser,
+  faMapMarkerAlt,
 } from '@fortawesome/free-solid-svg-icons';
 
 import SkeletonPlugin from 'scaife-skeleton';
@@ -13,14 +15,17 @@ import App from '@/App.vue';
 import router from '@/router';
 import store from '@/store';
 
-const iconMap = [faChevronLeft, faChevronDown, faChevronRight].reduce(
-  (map, obj) => {
-    // eslint-disable-next-line no-param-reassign
-    map[obj.iconName] = obj;
-    return map;
-  },
-  {},
-);
+const iconMap = [
+  faChevronLeft,
+  faChevronDown,
+  faChevronRight,
+  faUser,
+  faMapMarkerAlt,
+].reduce((map, obj) => {
+  // eslint-disable-next-line no-param-reassign
+  map[obj.iconName] = obj;
+  return map;
+}, {});
 
 Vue.use(SkeletonPlugin, { iconMap });
 Vue.use(GraphQLPlugin);

diff --git a/src/widgets/NamedEntitiesWidget/NamedEntitiesWidget.vue b/src/widgets/NamedEntitiesWidget/NamedEntitiesWidget.vue
@@ -83,6 +83,8 @@
                   title
                   description
                   url
+                  kind
+                  data
                 }
               }
             }
@@ -106,6 +108,8 @@
   };
 </script>
 
+<style src="mapbox-gl/dist/mapbox-gl.css"></style>
+
 <style lang="scss" scoped>
   @import '../../styles/variables';
   .named-entities {

diff --git a/src/widgets/NamedEntitiesWidget/NamedEntity.vue b/src/widgets/NamedEntitiesWidget/NamedEntity.vue
@@ -1,25 +1,69 @@
 <template>
   <div class="named-entity" :class="{ selected }">
     <div class="named-entity-title" @click.prevent="$emit('select', entity)">
-      <span>{{ entity.title }}</span>
+      <span>
+        <icon class="icon" v-if="iconName" :name="iconName" />
+        {{ entity.title }}
+      </span>
       <span v-if="selected">x</span>
     </div>
     <div class="named-entity-body" v-if="selected">
       <div class="named-entity-description">{{ entity.description }}</div>
       <a :href="entity.url" target="_blank">Read More</a>
+      <div class="map" v-if="place">
+        <MglMap
+          :accessToken="accessToken"
+          :mapStyle="mapStyle"
+          :zoom="10"
+          :center="center"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+  import Mapbox from 'mapbox-gl';
+  import { MglMap } from 'vue-mapbox';
+
+  const accessToken =
+    // eslint-disable-next-line max-len
+    'pk.eyJ1IjoicGFsdG1hbiIsImEiOiJja2JpNDVpbmUwOGF1MnJwZm91c3VybDVrIn0.KRcXBGtiUWFXkp2uaE5LLw';
+  const iconMap = {
+    PERSON: 'user',
+    PLACE: 'map-marker-alt',
+  };
   export default {
     props: {
       entity: {
         type: Object,
         required: true,
       },
     },
+    components: { MglMap },
+    created() {
+      this.mapbox = Mapbox;
+    },
     computed: {
+      place() {
+        return this.entity.kind === 'PLACE';
+      },
+      center() {
+        return (
+          this.entity.data &&
+          this.entity.data.coordinates &&
+          this.entity.data.coordinates.split(', ').map(c => parseFloat(c))
+        );
+      },
+      accessToken() {
+        return accessToken;
+      },
+      mapStyle() {
+        return 'mapbox://styles/paltman/ckbi4thqt156y1ijz5wldui14';
+      },
+      iconName() {
+        return iconMap[this.entity.kind];
+      },
       selected() {
         return (
           this.$store.state.selectedNamedEntities.filter(
@@ -33,6 +77,9 @@
 
 <style lang="scss" scoped>
   @import '../../styles/variables';
+  .map {
+    height: 250px;
+  }
   .named-entity.selected {
    background: $gray-100;
    margin-left: -10px;
@@ -41,6 +88,12 @@
      .named-entity-description {
        color: $gray-700;
      }
+     .icon {
+       color: $gray-800;
+     }
+  }
+  .icon {
+    color: $gray-600;
   }
   .named-entity {
     margin: 0.375rem 0;