gsd
1 year ago
8 changed files with 173 additions and 19 deletions
@ -0,0 +1,80 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<md-dialog :md-active.sync="show" @close="show=false" style="z-index: 10"> |
||||
|
<l-map style="height: 450px; width: 700px; border-radius: 3px; border: 3px solid #f4722b" :zoom="zoom" :center="center"> |
||||
|
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer> |
||||
|
<l-marker v-for="srv in this.$API.stats.servers['w']" :key="srv['name']" :lat-lng="srv['city_pos']"> |
||||
|
<l-icon class-name="icom-map">{{srv['name']}}</l-icon> |
||||
|
<l-popup><p class="p-map" v-on:click="$refs.wwm_ssd.openFIF(srv)">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}<br>Подключиться</p></l-popup> |
||||
|
</l-marker> |
||||
|
<l-marker v-for="srv in this.$API.stats.servers['e']" :key="srv['name']" :lat-lng="srv['city_pos']"> |
||||
|
<l-icon class-name="icom-map"><div class="headline">{{srv['name']}}</div></l-icon> |
||||
|
<l-popup><p class="p-map" v-on:click="$refs.wwm_ssd.openFIF(srv)">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}<br>Подключиться</p></l-popup> |
||||
|
</l-marker> |
||||
|
<l-marker v-for="srv in this.$API.stats.servers['n']" :key="srv['name']" :lat-lng="srv['city_pos']"> |
||||
|
<l-icon class-name="icom-map">{{srv['name']}}</l-icon> |
||||
|
<l-popup><p class="p-map">{{srv['name']}}<br>{{human_name_impl(srv['player_count'], srv['naming'])}}</p></l-popup> |
||||
|
</l-marker> |
||||
|
</l-map> |
||||
|
<md-button class="btn-default" v-on:click="showMe(false)">Закрыть</md-button> |
||||
|
<ServerFullInfo :server-data="null" ref="wwm_ssd"/> |
||||
|
</md-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { latLng } from "leaflet"; |
||||
|
import { LMap, LTileLayer, LMarker, LPopup, LIcon} from "vue2-leaflet"; |
||||
|
import ServerFullInfo from "@/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue"; |
||||
|
export default { |
||||
|
name: "WorldwideMap", |
||||
|
components: { |
||||
|
ServerFullInfo, |
||||
|
LMap, |
||||
|
LMarker, |
||||
|
LTileLayer, |
||||
|
LPopup, |
||||
|
LIcon |
||||
|
}, |
||||
|
data: () => ({ |
||||
|
show: false, |
||||
|
url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png', |
||||
|
attribution: |
||||
|
'хохлы', |
||||
|
zoom: 3, |
||||
|
center: [57.91, 64.21], |
||||
|
markerLatLng: [51.504, -0.159] |
||||
|
}), |
||||
|
methods: { |
||||
|
latLng, |
||||
|
showMe(b) { |
||||
|
this.show = b; |
||||
|
}, |
||||
|
human_name_impl(p, n) { |
||||
|
return `${p} ${this.$API.human_name_impl(p,n)}`; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.p-map { |
||||
|
color: black; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.icom-map { |
||||
|
border-radius: 5px; |
||||
|
border: 0px solid black; |
||||
|
background: #ffffff; |
||||
|
text-align: center; |
||||
|
width: auto !important; |
||||
|
height: auto !important; |
||||
|
margin: 0 !important; |
||||
|
font-family: tf2secondary; |
||||
|
} |
||||
|
|
||||
|
.leaflet-control-attribution { |
||||
|
display: none !important; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue