Add leaflet

Fix build, make map component async and move computed to getter

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/package-lock.json

@@ -1010,6 +1010,12 @@
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
       "dev": true
     },
+    "@types/geojson": {
+      "version": "7946.0.7",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
+      "dev": true
+    },
     "@types/glob": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
@@ -1021,6 +1027,15 @@
         "@types/node": "*"
       }
     },
+    "@types/leaflet": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.3.tgz",
+      "integrity": "sha512-jFRBSsPHi1EwQSwrN0cOJLdPhwOZsRl4IMxvm/2ShLh0YM5GfCtQXCzsrv8RE7DWL+AykXdYSAd9bFLWbZT4CQ==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/lodash": {
       "version": "4.14.123",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.123.tgz",
@@ -8044,6 +8059,11 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "leaflet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.4.0.tgz",
+      "integrity": "sha512-x9j9tGY1+PDLN9pcWTx9/y6C5nezoTMB8BLK5jTakx+H7bPlnbCHfi9Hjg+Qt36sgDz/cb9lrSpNQXmk45Tvhw=="
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -13973,6 +13993,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz",
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg=="
     },
+    "vue2-leaflet": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.0.2.tgz",
+      "integrity": "sha512-8KAU0mbUp5CDwb5NBlpEoyCO/x+Rv1KeA4599HJqpHeOrzY0+PBoUabM80riUUWJWGhRi3yhV4DJ8Kf1QHRelQ=="
+    },
     "vuex": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",

js/package.json

@@ -22,6 +22,7 @@
     "easygettext": "^2.7.0",
     "graphql": "^14.1.1",
     "graphql-tag": "^2.10.1",
+    "leaflet": "^1.4.0",
     "lodash": "^4.17.11",
     "material-design-icons": "^3.0.1",
     "ngeohash": "^0.6.3",
@@ -34,10 +35,12 @@
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.2",
     "vue-simple-markdown": "^1.0.9",
+    "vue2-leaflet": "^2.0.2",
     "vuex": "^3.1.0"
   },
   "devDependencies": {
     "@types/chai": "^4.1.7",
+    "@types/leaflet": "^1.4.3",
     "@types/lodash": "^4.14.123",
     "@types/mocha": "^5.2.6",
     "@vue/cli-plugin-babel": "^3.5.1",

js/src/components/Map.vue

@@ -0,0 +1,44 @@
+<template>
+    <div style="height: 100%; width: 100%">
+        <l-map
+                :zoom="16"
+                style="height: 80%; width: 100%"
+                :center="[lat, lon]"
+        >
+            <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
+            <l-marker :lat-lng="[lat, lon]" >
+                <l-popup v-if="popup">{{ popup }}</l-popup>
+            </l-marker>
+        </l-map>
+    </div>
+</template>
+
+<script lang="ts">
+import { Icon }  from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
+
+@Component({
+  components: { LTileLayer, LMap, LMarker, LPopup },
+})
+export default class Event extends Vue {
+  @Prop({ type: String, required: true }) coords!: string;
+  @Prop({ type: String, required: false }) popup!: string;
+
+  mounted() {
+    // this part resolve an issue where the markers would not appear
+    // @ts-ignore
+    delete Icon.Default.prototype._getIconUrl;
+
+    Icon.Default.mergeOptions({
+      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+      iconUrl: require('leaflet/dist/images/marker-icon.png'),
+      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+    });
+  }
+
+  get lat() { return this.$props.coords.split(';')[0]; }
+  get lon() { return this.$props.coords.split(';')[1]; }
+}
+</script>

js/src/main.ts

@@ -1,7 +1,6 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
-// import * as VueGoogleMaps from 'vue2-google-maps';
 import VueSimpleMarkdown from 'vue-simple-markdown';
 import Buefy from 'buefy';
 import 'buefy/dist/buefy.css';

js/src/types/address.model.ts

@@ -1,13 +1,10 @@
 export interface IAddress {
-    description: string;
+  description: string;
-    floor: string;
+  floor: string;
-    street: string;
+  street: string;
-    locality: string;
+  locality: string;
-    postal_code: string;
+  postal_code: string;
-    region: string;
+  region: string;
-    country: string;
+  country: string;
-    geom: {
+  geom: string;
-        lat: number;
-        lon: number;
-    }
 }

js/src/types/event.model.ts

@@ -1,5 +1,5 @@
 import { Actor, IActor } from './actor.model';
-import {IAddress} from "@/types/address.model";
+import { IAddress } from '@/types/address.model';
 
 export enum EventStatus {
   TENTATIVE,

js/src/views/Event/Event.vue

@@ -54,6 +54,12 @@
               <span>{{ event.physicalAddress.postal_code }} {{ event.physicalAddress.locality }}</span><br>
               <span>{{ event.physicalAddress.region }} {{ event.physicalAddress.country }}</span>
             </address>
+            <div class="map">
+              <map-leaflet
+                :coords="event.physicalAddress.geom"
+                :popup="event.physicalAddress.description"
+              />
+            </div>
           </div>
           <p v-if="actorIsOrganizer()">
             <translate>You are an organizer.</translate>
@@ -118,6 +124,9 @@ import { RouteName } from '@/router';
 import 'vue-simple-markdown/dist/vue-simple-markdown.css';
 
 @Component({
+  components: {
+    'map-leaflet': () => import('@/components/Map.vue'),
+  },
   apollo: {
     event: {
       query: FETCH_EVENT,
@@ -237,3 +246,10 @@ export default class Event extends Vue {
   }
 }
 </script>
+<style lang="scss">
+  .address div.map {
+    height: 400px;
+    width: 400px;
+    padding: 25px 35px;
+  }
+</style>

js/tsconfig.json

@@ -15,7 +15,8 @@
     "types": [
       "webpack-env",
       "mocha",
-      "chai"
+      "chai",
+      "leaflet"
     ],
     "paths": {
       "@/*": [
@@ -39,4 +40,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}