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