diff --git a/package-lock.json b/package-lock.json
index 5565e6c..89fc311 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,10 @@
       "dependencies": {
         "axios": "^1.5.1",
         "core-js": "^3.8.3",
+        "leaflet": "^1.9.4",
         "vue": "^2.6.14",
-        "vue-material": "^1.0.0-beta-16"
+        "vue-material": "^1.0.0-beta-16",
+        "vue2-leaflet": "^2.7.1"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -2236,6 +2238,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.13",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
+      "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==",
+      "peer": true
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -2263,6 +2271,15 @@
       "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
       "dev": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.8",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
+      "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+      "peer": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz",
@@ -7249,6 +7266,11 @@
         "launch-editor": "^2.6.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -11036,6 +11058,16 @@
         "vue": "^2.6.10"
       }
     },
+    "node_modules/vue2-leaflet": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz",
+      "integrity": "sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==",
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.3.4",
+        "vue": "^2.5.17"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 744607e..c5e5459 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
   "dependencies": {
     "axios": "^1.5.1",
     "core-js": "^3.8.3",
+    "leaflet": "^1.9.4",
     "vue": "^2.6.14",
-    "vue-material": "^1.0.0-beta-16"
+    "vue-material": "^1.0.0-beta-16",
+    "vue2-leaflet": "^2.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/src/App.vue b/src/App.vue
index db4a16e..d7578e6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,8 @@ import Vue from "vue";
 //import 'vue-material/dist/theme/default.css'
 import 'vue-material/dist/vue-material.min.css'
 
+import 'leaflet/dist/leaflet.css';
+
 import MdTabs from "vue-material/dist/components/MdTabs";
 import MdIcon from "vue-material/dist/components/MdIcon";
 import MdCard from "vue-material/dist/components/MdCard";
diff --git a/src/api/GlobalApi.js b/src/api/GlobalApi.js
index 9a12d9e..f18ad3a 100644
--- a/src/api/GlobalApi.js
+++ b/src/api/GlobalApi.js
@@ -45,6 +45,15 @@ export default class GlobalApi {
         document.title = "Факты 13";
     }
 
+    human_name_impl(player_count, naming){
+        let number = Math.abs(player_count) % 100;
+        let number_post = number % 10;
+        if (number > 10 && number < 20) { return naming[2]; }
+        if (number_post > 1 && number_post < 5) { return naming[1]; }
+        if (number_post === 1) { return naming[0] }
+        return naming[2];
+    }
+
     getHumanServerName(server) {
         for (const mode in this.stats['servers']) {
             for (const srv in this.stats['servers'][mode]) {
diff --git a/src/components/ActionDialogs/WorldwideMap.vue b/src/components/ActionDialogs/WorldwideMap.vue
new file mode 100644
index 0000000..4ace322
--- /dev/null
+++ b/src/components/ActionDialogs/WorldwideMap.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue b/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
index c991198..1458276 100644
--- a/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
+++ b/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <md-dialog :md-active.sync="showServerDialog" style="z-index: 10">
+    <md-dialog :md-active.sync="showServerDialog" style="z-index: 11">
       <div class="md-layout md-alignment-bottom-center" style="z-index: 1">
         <div class="md-layout-item md-size-5"/>
         <div class="md-layout-item rounded-and-colored md-size-45 md-small-size-90">
-          <h3 class="txt-innert" style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3>
+          <h3 class="txt-innert" style="text-align: center; margin: 2% 0%">{{serverInfo['name']}}</h3>
         </div>
         <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closeFIF()">
           <h3 class="txt-innert" style="text-align: center; margin: 25% 0%">X</h3>
@@ -12,15 +12,15 @@
       </div>
       <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
         <div class="md-layout-item md-size-50 server-info-rounded rounded-only md-small-size-100 md-scrollbar" style="height: 660px; overflow-y: auto;">
-          <img :src="serverData['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px">
+          <img :src="serverInfo['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px">
           <div>
-            <p class="p-server">{{serverData['description']}}</p>
+            <p class="p-server">{{serverInfo['description']}}</p>
             <div v-if="this.$API.player.auth('steam') === true" style="text-align: center; font-size: 0.5em !important;">
-              <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_md.showMe(true, undefined, serverData['key'])">Чат сервера</p>
+              <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_md.showMe(true, undefined, serverInfo['key'])">Чат сервера</p>
               <p class="p-server" style="display: inline"> | </p>
-              <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_kdt.showMe(true, 1, serverData['key'])">Топ убийств</p>
+              <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_kdt.showMe(true, 1, serverInfo['key'])">Топ убийств</p>
               <p class="p-server" style="display: inline"> | </p>
-              <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_kdt.showMe(true, 2, serverData['key'])">Топ смертей</p>
+              <p class="p-server clickable" style="display: inline" v-on:click="$refs.sfi_kdt.showMe(true, 2, serverInfo['key'])">Топ смертей</p>
             </div>
             <hr width="30%">
           </div>
@@ -28,9 +28,9 @@
             <div style="max-width: 40%; float: left;" v-on:click="onMove('steam')" class="clickable">
               <TerminalSvg class="img-server"/>
               <p class="p-server" style="margin-bottom: -5%">Подключиться</p>
-              <p class="p-server-address">{{serverData['address']}}</p>
+              <p class="p-server-address">{{serverInfo['address']}}</p>
             </div>
-            <div style="max-width: 40%; float: left;" v-if="serverData['workshop'].length > 0" v-on:click="onMove('workshop')" class="clickable">
+            <div style="max-width: 40%; float: left;" v-if="serverInfo['workshop'].length > 0" v-on:click="onMove('workshop')" class="clickable">
               <SteamSvg class="img-server"/>
               <p class="p-server" style="margin-bottom: -5%">Workshop</p>
               <p class="p-server-address">by Пельмень</p>
@@ -42,9 +42,9 @@
             </div>
           </div>
           <hr width="30%">
-          <h3 v-if="serverData['player_count'] < 1" style="text-align: center; line-height: 1em">На сервере пусто, заходи с друзьями...</h3>
+          <h3 v-if="serverInfo['player_count'] < 1" style="text-align: center; line-height: 1em">На сервере пусто, заходи с друзьями...</h3>
           <div v-else>
-            <h3 style="text-align: center" class="sfi-current-player">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3>
+            <h3 style="text-align: center" class="sfi-current-player">Сейчас играет {{serverInfo['player_count']}}/{{serverInfo['max_players']}}</h3>
             <hr width="30%">
             <md-table v-model="players" md-sort="score" md-sort-order="desc" md-card md-fixed-header @md-selected="openPlayer" md-height="150px">
               <md-table-row slot="md-table-row" slot-scope="{ item }" md-selectable="single">
@@ -81,11 +81,13 @@ export default {
     showServerDialog: false,
     expandPlayers: false,
     players: [{score:0, name:"", duration:"", sec:0}],
-    selected_player: null
+    selected_player: null,
+    serverInfo: null
   }),
   methods: {
-    openFIF() {
-      this.players = this.serverData['players'];
+    openFIF(data) {
+      this.serverInfo = data === undefined ? this.serverData : data;
+      this.players = this.serverInfo['players'];
       this.players.forEach(p => p.sec = p.duration.split(':').reduce((acc,time) => (60 * acc) + +time));
       this.showServerDialog = true;
     },
@@ -94,15 +96,29 @@ export default {
     },
     onMove(select){
       switch (select) {
-        case 'steam': return window.open(`steam://${this.serverData['address']}`, '_self').focus();
+        case 'steam': return window.open(`steam://${this.serverInfo['address']}`, '_self').focus();
         case 'workshop': return window.open(this.serverData['workshop'], '_blank').focus();
-        case 'fastdl': return window.open(`https://tf2.pblr-nyk.pro/tf/maps/${this.serverData['map']}.bsp.bz2`, '_blank').focus();
+        case 'fastdl': return window.open(`https://tf2.pblr-nyk.pro/tf/maps/${this.serverInfo['map']}.bsp.bz2`, '_blank').focus();
       }
     },
     openPlayer(item) {
       this.selected_player = item;
       this.$refs.pei.showPlayerDialog = true;
     }
+  },
+  beforeMount() {
+    if (this.serverData !== null)
+      this.serverInfo = this.serverData;
+    else
+      this.serverInfo = {
+        'name':'',
+        'description':'',
+        'address':'',
+        'workshop':'',
+        'player_count':'',
+        'players':0,
+        'max_player':0
+      }
   }
 }
 </script>
diff --git a/src/components/TabsMenuElements/ServersView/ServersView.vue b/src/components/TabsMenuElements/ServersView/ServersView.vue
index 0c26f7c..572cdae 100644
--- a/src/components/TabsMenuElements/ServersView/ServersView.vue
+++ b/src/components/TabsMenuElements/ServersView/ServersView.vue
@@ -21,6 +21,8 @@
           <p class="p-server clickable" style="display: inline" v-on:click="$refs.sv_kdt.showMe(true, 2)">Топ смертей</p>
         </div>
         <hr>
+        <h5 style="text-align: center; margin: 0% 0%" class="clickable" v-on:click="$refs.sv_wwm.showMe(true)">Карта серверов</h5>
+        <hr>
         <h5 style="text-align: center" v-if="this.$API.stats.servers['w'].length>0">где сейчас играют карлики</h5>
         <ServerCard v-for="srv in this.$API.stats.servers['w']" :key="srv['name']" :server-name="srv['name']" :server-image="srv['preview']" :server-current-player="srv['player_count']" :server-max-player="srv['max_players']" :server-data="srv" :last_play="getLastPlay(srv['key'])"/>
         <h5 style="text-align: center" v-if="this.$API.stats.servers['e'].length>0">где сейчас никого нет</h5>
@@ -32,6 +34,7 @@
     <SnackLoader ref="s_loader" s_text="Обновление списка серверов"/>
     <MessagesDialog ref="sv_md"/>
     <KillDeadTop ref="sv_kdt"/>
+    <WorldwideMap ref="sv_wwm"/>
   </md-tab>
 </template>
 
@@ -41,9 +44,10 @@ import ServerCard from "@/components/TabsMenuElements/ServersView/Components/Ser
 import SnackLoader from "@/components/Others/Loader/SnackLoader.vue";
 import MessagesDialog from "@/components/ActionDialogs/Tables/MessagesDialog.vue";
 import KillDeadTop from "@/components/ActionDialogs/Tables/KillDeadTop.vue";
+import WorldwideMap from "@/components/ActionDialogs/WorldwideMap.vue";
 export default {
   name: 'ServersView',
-  components: {KillDeadTop, MessagesDialog, SnackLoader, ServerCard, CharacterImage},
+  components: {WorldwideMap, KillDeadTop, MessagesDialog, SnackLoader, ServerCard, CharacterImage},
   data:() => ({
     servers: {'w':[], 'n':[], 'e':[]},
     lp_cache: null
diff --git a/src/main.js b/src/main.js
index a2a9e77..6ff0388 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,15 @@ Vue.config.productionTip = false
 Vue.prototype.$API = Vue.observable(new GlobalApi());
 Vue.material.locale.dateFormat = 'dd/MM/yyyy';
 
+import { Icon } from 'leaflet';
+
+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'),
+});
+
 new Vue({
   render: h => h(App),
 }).$mount('#app')