Add leaflet

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

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-03-22 17:35:07 +01:00
parent 0c8d2f7e00
commit 3b202674a3
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
8 changed files with 100 additions and 15 deletions

25
js/package-lock.json generated
View file

@ -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",

View file

@ -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",

44
js/src/components/Map.vue Normal file
View file

@ -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>

View file

@ -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';

View file

@ -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;
}

View file

@ -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,

View file

@ -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>

View file

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