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
parent
0c8d2f7e00
commit
3b202674a3
25
js/package-lock.json
generated
25
js/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
44
js/src/components/Map.vue
Normal 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>
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
"types": [
|
||||
"webpack-env",
|
||||
"mocha",
|
||||
"chai"
|
||||
"chai",
|
||||
"leaflet"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
|
|
@ -39,4 +40,4 @@
|
|||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue