-
-
Save xemoka/751a2f669685ccd1f17cc04a44c29f51 to your computer and use it in GitHub Desktop.
Vue2Leaflet Problem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div id="app"> | |
<div class="company-list"> | |
<ul> | |
<li v-for="company in companies" | |
:class="{ active : activeCompany == company.id }" | |
:key="company.id" | |
@click="openPopup(company.id)" | |
> | |
<div class="company-title"> | |
{{company.id}} - {{company.name}} | |
</div> | |
<div class="company-logo"><img :src="company.logoUrl" /></div> | |
</li> | |
</ul> | |
</div> | |
<div class="map-div"> | |
<v-map :zoom=8 :center="[49.5, -117]" ref="map"> | |
<v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer> | |
<v-marker | |
v-for="company in companies" | |
:lat-lng="company.location" | |
:icon="companyIcon(company.id)" | |
:key="company.id" | |
@l-popupopen="popupOpenHandler(company.id)" | |
@l-popupclose="popupCloseHandler(company.id)"> | |
<v-popup | |
:content='popupTemplate(company)' | |
:key="company.id" | |
:ref="'popup_' + company.id" | |
/> | |
<v-tooltip :content='company.name' /> | |
</v-marker> | |
</v-map> | |
</div> | |
</div> | |
</template> | |
<script> | |
import { | |
Map as vMap, | |
TileLayer as vTilelayer, | |
Marker as vMarker, | |
Popup as vPopup, | |
Tooltip as vTooltip | |
} from 'vue2-leaflet' | |
import L from 'leaflet' | |
import Glyph from 'leaflet.icon.glyph' // eslint-disable-line no-unused-vars | |
// import axios from 'axios' | |
// const templateIf = (condition, thenTemplate, elseTemplate = '') => { | |
// return condition ? thenTemplate : elseTemplate | |
// } | |
const companies = [ | |
{ | |
'name': 'Columbia', | |
'description': 'service provider', | |
'address': 'Nelson, BC', | |
'location': [ 49.4928119, -117.2948343 ], | |
'telephone': '250 505-4041', | |
'url': '', | |
'contactEmail': '', | |
'logoUrl': '' | |
}, { | |
'name': 'Spice', | |
'description': 'Product', | |
'address': 'Trail, BC', | |
'location': [ 49.0965676, -117.7117301 ], | |
'telephone': '', | |
'url': '', | |
'contactEmail': '', | |
'logoUrl': '' | |
} | |
] | |
const sortBy = function (field, reverse, primer) { | |
let key = primer | |
? function (x) { return primer(x[field]) } | |
: function (x) { return x[field] } | |
reverse = !reverse ? 1 : -1 | |
return function (a, b) { | |
let A = key(a) | |
let B = key(b) | |
return ((A < B) ? -1 : ((A > B) ? 1 : 0)) * [-1, 1][+!!reverse] | |
} | |
} | |
export default { | |
name: 'app', | |
components: { | |
vMap, | |
vTilelayer, | |
vMarker, | |
vPopup, | |
vTooltip | |
}, | |
data () { | |
return { | |
companies: {}, | |
activeCompany: false | |
} | |
}, | |
created () { | |
// axios.get('/static/companies.json').then(response => { | |
// response.data.sort(sortBy('name', false, function (a) { return a.toUpperCase() })) | |
// response.data.forEach((item, index) => { | |
// item.id = index + 1 | |
// }) | |
// this.companies = response.data | |
// }) | |
this.companies = companies | |
this.companies.sort(sortBy('name', false, function (a) { return a.toUpperCase() })) | |
this.companies.forEach((item, index) => { | |
item.id = index + 1 | |
}) | |
}, | |
mounted () { | |
}, | |
methods: { | |
companyIcon (value) { | |
return L.icon.glyph({ | |
prefix: '', | |
glyph: value | |
}) | |
}, | |
popupTemplate (company) { | |
return ` | |
<img src=${company.logoUrl} /><br /> | |
<h2><a href=${company.url} target="_blank">${company.name}</a></h2> <br /> | |
${company.description} <br /><br /> | |
Tel: ${company.telephone} <br /> | |
<a href="mailto:${company.contactEmail}">${company.contactEmail}</a> <br /> | |
${company.address} <br /> | |
` | |
}, | |
openPopup (cid) { | |
this.$refs['popup_' + cid][0].parent.openPopup() | |
}, | |
popupOpenHandler (company) { | |
this.activeCompany = company | |
}, | |
popupCloseHandler (company) { | |
this.activeCompany = false | |
} | |
} | |
} | |
</script> | |
<style src="leaflet/dist/leaflet.css" lang="css"></style> | |
<style> | |
body { | |
margin: 0; | |
} | |
#app { | |
font-family: 'Avenir', Helvetica, Arial, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
color: #2c3e50; | |
display: flex; | |
height: 100%; | |
width: 100%; | |
} | |
.company-list { | |
height: 100vh; | |
width: 350px; | |
overflow-y: scroll; | |
} | |
.company-list ul { | |
padding: 0; | |
margin: 0; | |
} | |
.company-list li { | |
display: flex; | |
list-style: none; | |
padding: 3px 0; | |
height: 50px; | |
vertical-align: middle; | |
cursor: pointer; | |
} | |
.company-list li:nth-child(odd) { | |
background-color: #8F8F8F; | |
color: white; | |
} | |
.company-list li:nth-child(even) { | |
background-color: #777777; | |
color: white; | |
} | |
.company-list li.active { | |
background-color: red; | |
} | |
.company-list img { | |
max-width: 100px; | |
max-height: 50px; | |
} | |
.company-list .company-title { | |
flex: 1; | |
align-self: center; | |
padding-left: 5px; | |
} | |
.company-list .company-logo { | |
align-self: center; | |
} | |
.map-div { | |
height: 100vh; | |
flex: 1; | |
} | |
.leaflet-popup-content img { | |
width: 200px | |
} | |
.leaflet-popup-content h2 { | |
margin: 3px 0; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment