Add leaflet

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

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

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;
-    floor: string;
-    street: string;
-    locality: string;
-    postal_code: string;
-    region: string;
-    country: string;
-    geom: {
-        lat: number;
-        lon: number;
-    }
+  description: string;
+  floor: string;
+  street: string;
+  locality: string;
+  postal_code: string;
+  region: string;
+  country: string;
+  geom: string;
 }

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>