diff --git a/[web]/ajax/json.js b/[web]/ajax/json.js
index e91078b1d..c5f12750a 100644
--- a/[web]/ajax/json.js
+++ b/[web]/ajax/json.js
@@ -59,148 +59,154 @@
 
 if (!Object.prototype.toJSONString) {
 
-    Array.prototype.toJSONString = function () {
-        var a = [],     // The array holding the member texts.
-            i,          // Loop counter.
-            l = this.length,
-            v;          // The value to be stringified.
+    Object.defineProperty(Array.prototype, 'toJSONString', {
+        enumerable: false,
+        value: function () {
+            let a = [],     // The array holding the member texts.
+                i,          // Loop counter.
+                l = this.length,
+                v;          // The value to be stringified.
 
 
 // For each value in this array...
 
-        for (i = 0; i < l; i += 1) {
-            v = this[i];
-            switch (typeof v) {
-            case 'object':
+            for (i = 0; i < l; i += 1) {
+                v = this[i];
+                switch (typeof v) {
+                case 'object':
 
 // Serialize a JavaScript object value. Ignore objects thats lack the
 // toJSONString method. Due to a specification error in ECMAScript,
 // typeof null is 'object', so watch out for that case.
 
-                if (v) {
-                    if (typeof v.toJSONString === 'function') {
-                        a.push(v.toJSONString());
+                    if (v) {
+                        if (typeof v.toJSONString === 'function') {
+                            a.push(v.toJSONString());
+                        }
+                    } else {
+                        a.push('null');
                     }
-                } else {
-                    a.push('null');
-                }
-                break;
+                    break;
 
-            case 'string':
-            case 'number':
-            case 'boolean':
-                a.push(v.toJSONString());
+                case 'string':
+                case 'number':
+                case 'boolean':
+                    a.push(v.toJSONString());
 
 // Values without a JSON representation are ignored.
 
+                }
             }
-        }
 
 // Join all of the member texts together and wrap them in brackets.
 
-        return '[' + a.join(',') + ']';
-    };
-
-
-    Boolean.prototype.toJSONString = function () {
-        return String(this);
-    };
+            return '[' + a.join(',') + ']';
+        },
+    });
 
+    Object.defineProperty(Boolean.prototype, 'toJSONString', {
+        enumerable: false,
+        value: function () {
+            return String(this);
+        },
+    });
 
-    Date.prototype.toJSONString = function () {
+    Object.defineProperty(Date.prototype, 'toJSONString', {
+        enumerable: false,
+        value: function () {
 
 // Ultimately, this method will be equivalent to the date.toISOString method.
 
-        function f(n) {
+            function f(n) {
 
 // Format integers to have at least two digits.
 
-            return n < 10 ? '0' + n : n;
-        }
-
-        return '"' + this.getFullYear() + '-' +
-                f(this.getMonth() + 1) + '-' +
-                f(this.getDate()) + 'T' +
-                f(this.getHours()) + ':' +
-                f(this.getMinutes()) + ':' +
-                f(this.getSeconds()) + '"';
-    };
+                return n < 10 ? '0' + n : n;
+            }
 
+            return '"' + this.getFullYear() + '-' +
+                    f(this.getMonth() + 1) + '-' +
+                    f(this.getDate()) + 'T' +
+                    f(this.getHours()) + ':' +
+                    f(this.getMinutes()) + ':' +
+                    f(this.getSeconds()) + '"';
+        },
+    });
 
-    Number.prototype.toJSONString = function () {
+    Object.defineProperty(Number.prototype, 'toJSONString', {
+        enumerable: false,
+        value: function () {
 
 // JSON numbers must be finite. Encode non-finite numbers as null.
 
-        return isFinite(this) ? String(this) : 'null';
-    };
-
+            return isFinite(this) ? String(this) : 'null';
+        },
+    });
 
-    Object.prototype.toJSONString = function () {
-        var a = [],     // The array holding the member texts.
-            k,          // The current key.
-            v;          // The current value.
+    Object.defineProperty(Object.prototype, 'toJSONString', {
+        enumerable: false,
+        value: function () {
+            let a = [],     // The array holding the member texts.
+                k,          // The current key.
+                v;          // The current value.
 
 // Iterate through all of the keys in the object, ignoring the proto chain.
 
-        for (k in this) {
-            if (this.hasOwnProperty(k)) {
-                v = this[k];
-                switch (typeof v) {
-                case 'object':
+            for (k in this) {
+                if (this.hasOwnProperty(k)) {
+                    v = this[k];
+                    switch (typeof v) {
+                    case 'object':
 
 // Serialize a JavaScript object value. Ignore objects that lack the
 // toJSONString method. Due to a specification error in ECMAScript,
 // typeof null is 'object', so watch out for that case.
 
-                    if (v) {
-                        if (typeof v.toJSONString === 'function') {
-                            a.push(k.toJSONString() + ':' + v.toJSONString());
+                        if (v) {
+                            if (typeof v.toJSONString === 'function') {
+                                a.push(k.toJSONString() + ':' + v.toJSONString());
+                            }
+                        } else {
+                            a.push(k.toJSONString() + ':null');
                         }
-                    } else {
-                        a.push(k.toJSONString() + ':null');
-                    }
-                    break;
+                        break;
 
-                case 'string':
-                case 'number':
-                case 'boolean':
-                    a.push(k.toJSONString() + ':' + v.toJSONString());
+                    case 'string':
+                    case 'number':
+                    case 'boolean':
+                        a.push(k.toJSONString() + ':' + v.toJSONString());
 
 // Values without a JSON representation are ignored.
 
+                    }
                 }
             }
-        }
 
 // Join all of the member texts together and wrap them in braces.
 
-        return '{' + a.join(',') + '}';
-    };
-
-
-    (function (s) {
-
-// Augment String.prototype. We do this in an immediate anonymous function to
-// avoid defining global variables.
+            return '{' + a.join(',') + '}';
+        }
+    });
 
 // m is a table of character substitutions.
 
-        var m = {
-            '\b': '\\b',
-            '\t': '\\t',
-            '\n': '\\n',
-            '\f': '\\f',
-            '\r': '\\r',
-            '"' : '\\"',
-            '\\': '\\\\'
-        };
-
+    const m = {
+        '\b': '\\b',
+        '\t': '\\t',
+        '\n': '\\n',
+        '\f': '\\f',
+        '\r': '\\r',
+        '"' : '\\"',
+        '\\': '\\\\'
+    };
 
-        s.parseJSON = function (filter) {
-            var j;
+    Object.defineProperty(String.prototype, 'parseJSON', {
+        enumerable: false,
+        value: function (filter) {
+            let j;
 
             function walk(k, v) {
-                var i;
+                let i;
                 if (v && typeof v === 'object') {
                     for (i in v) {
                         if (v.hasOwnProperty(i)) {
@@ -242,11 +248,12 @@ if (!Object.prototype.toJSONString) {
                 j = walk('', j);
             }
             return j;
-        };
-
-
-        s.toJSONString = function () {
+        },
+    });
 
+    Object.defineProperty(String.prototype, 'toJSONString', {
+        enumerable: false,
+        value: function () {
 // If the string contains no control characters, no quote characters, and no
 // backslash characters, then we can simply slap some quotes around it.
 // Otherwise we must also replace the offending characters with safe
@@ -254,7 +261,7 @@ if (!Object.prototype.toJSONString) {
 
             if (/["\\\x00-\x1f]/.test(this)) {
                 return '"' + this.replace(/([\x00-\x1f\\"])/g, function (a, b) {
-                    var c = m[b];
+                    let c = m[b];
                     if (c) {
                         return c;
                     }
@@ -265,6 +272,6 @@ if (!Object.prototype.toJSONString) {
                 }) + '"';
             }
             return '"' + this + '"';
-        };
-    })(String.prototype);
+        },
+    });
 }
diff --git a/[web]/webmap/css.css b/[web]/webmap/css.css
index bc6dfb823..9aa61dee4 100644
--- a/[web]/webmap/css.css
+++ b/[web]/webmap/css.css
@@ -1,207 +1,38 @@
-#topbar, #addrightstopbar, #addacltopbar  {
+#topbar {
+	background: #555;
+	color: #fff;
+	font-weight: bold;
+	height: 23px;
+	left: 0;
+	padding: 7px;
 	position: absolute;
-	top:0px;
-	right:0px;
-	left:0px;
-	height:23px;
-	background:#555555;
-	color:#FFFFFF;
-	padding:7px;
-	font-weight:bold;
+	right: 0;
+	top: 0;
 }
 
 body {
-	padding: 0px;
-	background: #FFFFFF;
-	font: bold 1em "Trebuchet MS", Arial, sans-serif; }
+	background: #00789d;
+	font: bold 1em "Trebuchet MS", Arial, sans-serif;
+	padding: 0;
+}
 
 #map {
+	height: 100%;
 	width: 100%;
-	height: 99%;
-}
-
-#mainarea {
-	position: absolute;
-	left: 0px;
-	top: 37px;
-	bottom: 5px;
-	right: 5px;
 }
 
-#datasets {
-	position: absolute;
-	right: 0px;
-	top: 37px;
-	width: 20%;
-	bottom: 0px;
-	background:#555555;
-	overflow:auto;
-}
-
-.acl {
+#popup {
+	background: #555;
+	border: 3px solid #000;
+	color: #fff;
 	padding: 5px;
-	padding-left: 10px;
-	font-weight:bold;
-	cursor:pointer;
+	position: relative;
 }
 
-#acllist, #rightsarea {
+#mainarea {
+	bottom: 0;
+	left: 0;
 	position: absolute;
-	left:0px;
+	right: 5px;
 	top: 37px;
-	bottom: 20px;
-	right: 0px;
-	overflow:auto;
-	border-top: none;
-}
-
-#rightsarea {
-	overflow:hide;
-}
-
-#rightslist , #acllistcontent{
-	height: 50%;
-	overflow:auto;
-	padding-left:10px;
-}
-
-#acllistcontent {
-	padding:8px;
-}
-
-#addrightsarea, #addaclarea {
-	position: absolute;
-	left:0px;
-	right:0px;
-	height: 50%;
-	bottom: 0px;
-	overflow:hide;
-}
-
-#addaclarea {
-	height:30%;
-}
-
-.indent {
-	padding-left: 10px;
-}
-
-#topbar {
-	position: absolute;
-	top:0px;
-	right:0px;
-	left:0px;
-	height:23px;
-	background:#555555;
-	color:#FFFFFF;
-	padding:7px;"
-}
-
-#acltopbarname {
-	font-size: 1.2em;
-	font-weight: bold;
-
-}
-
-#acltopbarbackbutton {
-	padding-right: 10px;
-	float:left;
-}
-
-.headercell_first, .headercell {
-	width: 50px;
-	font-size: 1.2em;
-	font-weight: bold;
-	vertical-align: top;
-	color: #888888;
-}
-
-.headercell {
-	border-top: 2px solid #888888;
-}
-
-.rightcell {
-	width: 33%;
-}
-
-#rightstable {
-	width:100%;
-	font-size: 1.0em;
-}
-
-#acltopbarsearchbox {
-	float: right;
-}
-
-#addrightscontent, #addaclcontent {
-	position: absolute;
-	top: 47px;
-	bottom: 0px;
-	left:20px;
-	right:20px;
-}
-
-#addrightstabs {
-	position: absolute;
-	left: 0px;
-	top: 0px;
-	width: 20%;
-	bottom: 0px;
-}
-
-#addrightssettings {
-	position: absolute;
-	left: 20%;
-	top: 0px;
-	width: 80%;
-	bottom: 0px;
-	border: 3px solid #888888;
-	border-left: 5px solid #888888;
-}
-
-#addrightsettingspadding {
-	padding:8px;
-}
-
-.addrighttab, .addrighttab_active {
-	font-size: 1.2em;
-	font-weight: bold;
-	cursor:pointer;
-	padding: 3px;
-	padding-left: 8px;
-	background: #DDDDDD;
-	margin-bottom: 2px;
-}
-
-.addrighttab_active {
-	background: #888888;
-}
-
-.addrighttabpane label, #addaclcontent label  {
-  display: block;
-  float: left;
-  width: 130px;
-  padding: 3px 5px;
-  margin: 0 0 5px 0;
-  text-align: left;
-}
-
-
-.formfield {
-	clear: both;
-}
-
-.addrighttabpane {
-	position: absolute;
-	top: 30px;
-}
-
-#addrightbottombar {
-	position: absolute;
-	background: #888888;
-	bottom: 0px;
-	left:0px;
-	right:0px;
-	height: 24px;
-	padding-top:4px;
 }
diff --git a/[web]/webmap/geticon.htm b/[web]/webmap/geticon.htm
index b6a5e5b2c..fbb0b3ab0 100644
--- a/[web]/webmap/geticon.htm
+++ b/[web]/webmap/geticon.htm
@@ -1,14 +1,14 @@
 <*
 local id = form.id
 if id and tonumber(id) >= 1 and tonumber(id) <= 63 then
-	local file = fileOpen ( "icons/" .. id .. ".png" )
+	local file = fileOpen("icons/" .. id .. ".png")
 	if file then
 		while not fileIsEOF(file) do
 	        buffer = fileRead(file, 500)
 	        httpWrite(buffer, buffer:len())
 	    end
 	    fileClose(file)
-		httpSetResponseHeader ( "content-type", "image/png")
+		httpSetResponseHeader("content-type", "image/png")
 	else
 		*>
 		Could not read file
diff --git a/[web]/webmap/map.htm b/[web]/webmap/map.htm
index 45399b5c6..4f864e67e 100644
--- a/[web]/webmap/map.htm
+++ b/[web]/webmap/map.htm
@@ -1,22 +1,31 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!doctype html>
+<html lang="en" dir="ltr">
 	<head>
+		<meta charset="utf-8">
+
+		<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+
 		<title>Web map</title>
-		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-		<* = call(getResourceFromName("ajax"),"start", getResourceName(getThisResource()) ) *>
-		<link rel="stylesheet" type="text/css" href="css.css" />
-		<!--[if IE 7]>
-		<link rel="stylesheet" type="text/css" href="ie-70.css" />
-		<![endif]-->
-		<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
-		<script type="text/javascript" src="script.js"></script>
+
+		<*= call(getResourceFromName("ajax"), "start", getResourceName(getThisResource())) *>
+
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" integrity="sha384-Kq/qtF0GiQ2/6OINtNcEzBKp7UVvVXB2xAR2HXOT/D+Qw8+Cx2hfokpqKtPEx0b6" crossorigin="anonymous">
+		<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" integrity="sha384-54FxFm5+OJnD+IWvK/LQO8Is9GGG3QzyyMPoB69QyvWz1lwLpI9m5y2dWzL8qUMs" crossorigin="anonymous"></script>
+
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-layerswitcher@3.8.3/dist/ol-layerswitcher.css" integrity="sha384-Vzqe9imyvsl257o2YDNSjmhHFjs8kp3JxhgoSHGdXYy9/J7N1MO8kfTHV/toayP8" crossorigin="anonymous">
+		<script src="https://cdn.jsdelivr.net/npm/ol-layerswitcher@3.8.3/dist/ol-layerswitcher.min.js" integrity="sha384-xvbFptSBzi+fC24KsqGVZvnicA60GBn47BV+qxZT81qStPKj1tMjN0SvgB6tOTCH" crossorigin="anonymous"></script>
+
+		<link rel="stylesheet" href="css.css">
+		<script src="script.js"></script>
 	</head>
 	<body onload="init()">
 		<div id="topbar">
 			<span id="welcometext">Map</span>
 		</div>
+
 		<div id="mainarea">
-		<div id="map"></div>
+			<div id="map"></div>
+			<div id="popup"></div>
 		</div>
 	</body>
 </html>
diff --git a/[web]/webmap/map.lua b/[web]/webmap/map.lua
index 6973a6f93..1e141b8a3 100644
--- a/[web]/webmap/map.lua
+++ b/[web]/webmap/map.lua
@@ -1,30 +1,49 @@
-function players()
-	local players = getElementsByType("player")
+function getAllPlayers()
 	local tbl = {}
-	for k,v in ipairs(players) do
-		local x,y = getElementPosition(v)
-		local playerinfo = {name=getPlayerName(v), pos={x=x,y=y}, isdead=isPedDead(v)}
-		if ( isPedInVehicle(v) ) then
-			playerinfo.vehicle = getVehicleName(getPedOccupiedVehicle(v))
+	for _, v in ipairs(getElementsByType("player")) do
+		local x, y, z = getElementPosition(v)
+		local _, _, rot = getElementRotation(v)
+		tbl[#tbl + 1] = {
+			name = getPlayerName(v),
+			pos = {
+				x = x,
+				y = y,
+				z = z,
+			},
+			rot = rot,
+			isdead = isPedDead(v),
+		}
+		if (isPedInVehicle(v)) then
+			tbl[#tbl].vehicle = getVehicleName(getPedOccupiedVehicle(v))
 		end
-		table.insert(tbl, playerinfo)
 	end
 	return tbl
 end
 
-function sendPlayerMessage(playername, message)
-	local player = getPlayerFromName(playername)
-	if ( player ) then
-		outputChatBox("<webmap> " .. message, player)
-	end
-end
-
-function getAllBlips()
+function getAllRadarBlips()
 	local tbl = {}
-	local blips = getElementsByType("blip")
-	for k,v in ipairs(blips) do
-		local x,y = getElementPosition(v)
-		table.insert(tbl, {element=v, icon=getBlipIcon(v), pos={x=x,y=y}})
+	for _, v in ipairs(getElementsByType("blip")) do
+		local x, y, z = getElementPosition(v)
+		tbl[#tbl + 1] = {
+			element = v,
+			icon = getBlipIcon(v),
+			size = getBlipSize(v),
+			color = {
+				getBlipColor(v),
+			},
+			pos = {
+				x = x,
+				y = y,
+				z = z,
+			},
+		}
 	end
 	return tbl
 end
+
+function sendPlayerMessage(playername, message)
+	local player = getPlayerFromName(playername)
+	if (not player) then return end
+	outputServerLog("<webmap> <message sent to " .. playername .. "> " .. message, player)
+	outputChatBox("<webmap> " .. message, player)
+end
diff --git a/[web]/webmap/meta.xml b/[web]/webmap/meta.xml
index be942976e..f60731e84 100644
--- a/[web]/webmap/meta.xml
+++ b/[web]/webmap/meta.xml
@@ -1,14 +1,17 @@
 <meta>
-    <include resource="ajax" />
-    <script src="map.lua" />
-	<html src="map.htm" default="true"/>
-    <html src="css.css" raw="true" />
-    <html src="script.js" raw="true" />
+	<info author="eAi" name="Map" showInResourceBrowser="true" version="2.0.0" />
+
+	<include resource="ajax" />
+
+	<script src="map.lua" />
+
+	<html src="map.htm" default="true" />
+	<html src="css.css" raw="true" />
+	<html src="script.js" raw="true" />
 	<html src="geticon.htm" />
-	<info author="eAi" name="Map" showInResourceBrowser="true"/>
-	<html src="icons\02.png" raw="true" />
+	<html src="icons/02.png" raw="true" />
 
-	<export function="players" http="true" />
+	<export function="getAllPlayers" http="true" />
+	<export function="getAllRadarBlips" http="true" />
 	<export function="sendPlayerMessage" http="true" />
-	<export function="getAllBlips" http="true" />
 </meta>
diff --git a/[web]/webmap/script.js b/[web]/webmap/script.js
index 99d5df4d3..71a8be343 100644
--- a/[web]/webmap/script.js
+++ b/[web]/webmap/script.js
@@ -1,248 +1,358 @@
-var map, maplayer, aeriallayer, playermarkers, blipmarkers;
-var playericon = new OpenLayers.Icon("geticon.htm?id=02", new OpenLayers.Size(15,15));
-var deadicon = new OpenLayers.Icon("geticon.htm?id=23", new OpenLayers.Size(15,15));
-var radaricons = new Array();
-for ( var i =0; i <= 63; i++ )
-{
-	var ai = i;
-	if ( ai <= 9 )
-		ai = "0" + ai;
-	radaricons[i] = new OpenLayers.Icon("geticon.htm?id=" + ai, new OpenLayers.Size(15,15));
+const rad = Math.PI / 180;
+const extent = [-3000, -3000, 3000, 3000];
+
+const syncedPlayers = {};
+const syncedRadarBlips = {};
+
+let popupEl;
+let gtasaProjection;
+let tilegrid;
+let playerVectorSource;
+let radarBlipVectorSource;
+let mousePositionControl;
+let layerSwitcherControl;
+let map;
+let selectSingleClick;
+let selectedPlayer;
+let followingPlayer;
+
+function init() {
+  popupEl = document.getElementById('popup');
+
+  gtasaProjection = new ol.proj.Projection({
+    code: 'ZOOMIFY',
+    units: 'pixels',
+    extent,
+  });
+
+  tilegrid = new ol.tilegrid.TileGrid({
+    extent,
+    resolutions: [8, 4, 2, 1],
+  });
+
+  playerVectorSource = new ol.source.Vector({
+    projection: gtasaProjection,
+  });
+
+  radarBlipVectorSource = new ol.source.Vector({
+    projection: gtasaProjection,
+  });
+
+  mousePositionControl = new ol.control.MousePosition({
+    coordinateFormat: ol.coordinate.createStringXY(0),
+  });
+
+  layerSwitcherControl = new ol.control.LayerSwitcher({
+    tipLabel: 'Layers',
+  });
+
+  popupOverlay = new ol.Overlay({
+    autoPan: true,
+    autoPanAnimation: {
+      duration: 250,
+    },
+    element: popupEl,
+  });
+
+  map = new ol.Map({
+    controls: [layerSwitcherControl, mousePositionControl],
+    layers: [
+      new ol.layer.Group({
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.TileDebug({
+              tileGrid: tilegrid,
+              projection: gtasaProjection,
+            }),
+            title: 'Grid Debug',
+            visible: false,
+            zIndex: 100,
+          }),
+          new ol.layer.Vector({
+            source: radarBlipVectorSource,
+            title: 'Radar Blips',
+            visible: true,
+            zIndex: 80,
+          }),
+          new ol.layer.Vector({
+            source: playerVectorSource,
+            title: 'Players',
+            visible: true,
+            zIndex: 90,
+          }),
+        ],
+        title: 'Overlays',
+      }),
+      new ol.layer.Group({
+        fold: 'open',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              projection: gtasaProjection,
+              tileSize: 500,
+              url:
+                'https://assets.mtasa.com/mtasa-resources/webmap/sa_aerial_map/v2/{z}_{x}_{y}.jpg',
+              wrapX: false,
+            }),
+            title: 'San Andreas Aerial Map V2',
+            type: 'base',
+            visible: true,
+          }),
+          new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              projection: gtasaProjection,
+              tileSize: 500,
+              url:
+                'https://assets.mtasa.com/mtasa-resources/webmap/sa_aerial_map/v1/{z}_{x}_{y}.jpg',
+              wrapX: false,
+            }),
+            title: 'San Andreas Aerial Map',
+            type: 'base',
+            visible: false,
+          }),
+          new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              projection: gtasaProjection,
+              tileSize: 500,
+              url:
+                'https://assets.mtasa.com/mtasa-resources/webmap/sa_map/v1/{z}_{x}_{y}.jpg',
+              wrapX: false,
+            }),
+            title: 'San Andreas Map',
+            type: 'base',
+            visible: false,
+          }),
+        ],
+        title: 'Map style',
+      }),
+    ],
+    overlays: [popupOverlay],
+    target: 'map',
+    view: new ol.View({
+      center: ol.extent.getCenter(extent),
+      extent,
+      projection: gtasaProjection,
+      resolutions: tilegrid.getResolutions(),
+      showFullExtent: true,
+      zoom: 0,
+    }),
+  });
+
+  map.on('singleclick', function (e) {
+    const features = map.getFeaturesAtPixel(e.pixel);
+
+    for (let i = 0; i < features.length; i++) {
+      const feature = features[i];
+      const playerEntry = Object.entries(syncedPlayers).find(function (entry) {
+        return entry[1].feature === feature;
+      });
+      if (!playerEntry) continue;
+
+      selectedPlayer = playerEntry[0];
+
+      const player = syncedPlayers[selectedPlayer];
+
+      let html =
+        selectedPlayer +
+        "<button type='button' onclick='closePopup();' style='position:absolute;right:0;top:0;'>close</button><br/><div style='font-size: 0.8em;'>";
+
+      if (player.vehicle) html += 'In vehicle: ' + player.vehicle + '<br/>';
+
+      html +=
+        "Send: <input type='text' id='sendMessageBox' onkeyup='checkSendMessage(event);' />";
+      if (selectedPlayer === followingPlayer) var checked = "checked='checked'";
+
+      html +=
+        "<input type='checkbox' id='followPlayerCheckbox' onclick='followPlayer();' " +
+        checked +
+        " onchange='followPlayer();' /> <label for='followPlayerCheckbox'>Follow</label>";
+      html += '</div>';
+
+      popupEl.innerHTML = html;
+
+      popupOverlay.setPosition(e.coordinate);
+
+      return;
+    }
+
+    closePopup();
+  });
+
+  updatePlayerBlips();
+  updateRadarBlips();
 }
-var playerlist = new Object;
-var bliplist = new Object;
 
-function init()
-{
-	map = new OpenLayers.Map( $('map'), {'maxResolution': 360/512, 'maxExtent':new OpenLayers.Bounds(-90.0,-90.0,90.0,90.0),
-	'numZoomLevels':6,
-	});
+function addPlayerBlip(player) {
+  const feature = new ol.Feature({
+    geometry: new ol.geom.Point([player.pos.x, player.pos.y]),
+  });
 
-	map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
+  feature.setStyle(
+    new ol.style.Style({
+      image: new ol.style.Icon({
+        color: player.isdead ? [200, 0, 0, 1] : [255, 255, 255, 1],
+        rotation: -player.rot * rad,
+        src: 'geticon.htm?id=02',
+      }),
+    }),
+  );
 
-	maplayer = new OpenLayers.Layer.WMS( "San Andreas Map",
-					"http://code.opencoding.net/tilecache/tilecache.cgi?", {layers: 'sa_map', format: 'image/png' } );
-	map.addLayer(maplayer);
+  playerVectorSource.addFeature(feature);
 
-	aeriallayer = new OpenLayers.Layer.WMS( "San Andreas Aerial Map",
-					"http://code.opencoding.net/tilecache/tilecache.cgi?", {layers: 'sa_aerial_map', format: 'image/png' } );
-	map.addLayer(aeriallayer);
-
-	map.zoomTo(2);
-
-	blipmarkers = new OpenLayers.Layer.Markers("Radar Blips");
-	map.addLayer(blipmarkers);
-
-	playermarkers = new OpenLayers.Layer.Markers("Players");
-	map.addLayer(playermarkers);
-
-	updatePlayerInfo();
-	updateBlips();
+  return feature;
 }
 
-function addPlayerMarker(player)
-{
-	var feature = new OpenLayers.Feature(maplayer, gtaCoordToLonLat(player.pos.x, player.pos.y), {icon:playericon.clone()});
-	var marker = feature.createMarker();
-	marker.playerName = player.name;
-	marker.feature = feature;
-	marker.events.register("mousedown", marker, showplayerinfo);
-	playermarkers.addMarker(marker);
-	return feature;
+function addRadarBlip(blip) {
+  const feature = new ol.Feature({
+    geometry: new ol.geom.Point([blip.pos.x, blip.pos.y]),
+  });
+
+  let image;
+
+  const color = blip.color;
+  color[3] = color[3] / 255; // 0..1 scale
+
+  if (blip.icon === 0) {
+    image = new ol.style.RegularShape({
+      angle: 45 * rad,
+      fill: new ol.style.Fill({ color }),
+      points: 4,
+      radius: blip.size * 4,
+      stroke: new ol.style.Stroke({ color: [0, 0, 0, 1], width: 1.5 }),
+    });
+  } else {
+    image = new ol.style.Icon({
+      // color, // Works, but disabled because tint is not used in GTA/MTA for radar blip icons
+      src: 'geticon.htm?id=' + String(blip.icon).padStart(2, 0),
+    });
+  }
+
+  feature.setStyle(new ol.style.Style({ image }));
+
+  radarBlipVectorSource.addFeature(feature);
+  return feature;
 }
 
-function addBlipMarker(blip)
-{
-	var feature = new OpenLayers.Feature(maplayer, gtaCoordToLonLat(blip.pos.x, blip.pos.y), {icon:radaricons[blip.icon].clone()});
-	var marker = feature.createMarker();
-	marker.element = blip.element;
-	marker.feature = feature;
-	blipmarkers.addMarker(marker);
-	return feature;
+function updateRadarBlips() {
+  getAllRadarBlips(function (blips) {
+    // Delete destroyed blips
+    Object.entries(syncedRadarBlips)
+      .filter(function (entry) {
+        return !blips.find(function (blip) {
+          return blip.element.id === entry[0];
+        });
+      })
+      .forEach(function (entry) {
+        radarBlipVectorSource.removeFeature(entry[1].feature);
+        delete syncedRadarBlips[entry[0]];
+      });
+
+    // Add/refresh existing blips
+    blips.forEach(function (blip) {
+      if (!syncedRadarBlips[blip.element.id]) {
+        syncedRadarBlips[blip.element.id] = {};
+      } else {
+        // We delete the old feature to be able to reset some styles
+        // not possible to edit through existing methods provided by OL
+        radarBlipVectorSource.removeFeature(
+          syncedRadarBlips[blip.element.id].feature,
+        );
+      }
+
+      syncedRadarBlips[blip.element.id].feature = addRadarBlip(blip);
+      syncedRadarBlips[blip.element.id].data = blip;
+    });
+
+    setTimeout(updateRadarBlips, 5000);
+  });
 }
 
-// Takes a GTA x and y and returns a x and y on the map
-function gtaCoordToMap(x, y)
-{
-	var mapx = x * 0.03;
-	var mapy = y * 0.03;
-	return {x: mapx, y: mapy};
+function updatePlayerBlips() {
+  getAllPlayers(function (players) {
+    // Delete disconnected players
+    Object.entries(syncedPlayers)
+      .filter(function (entry) {
+        return !players.find(function (player) {
+          return player.name === entry[0];
+        });
+      })
+      .forEach(function (entry) {
+        playerVectorSource.removeFeature(entry[1].feature);
+        delete syncedPlayers[entry[0]];
+      });
+
+    if (selectedPlayer) {
+      if (syncedPlayers[selectedPlayer]) {
+        popupOverlay.setPosition(
+          syncedPlayers[selectedPlayer].feature.getGeometry().getCoordinates(),
+        );
+      } else {
+        closePopup();
+      }
+    }
+
+    if (followingPlayer) {
+      if (syncedPlayers[followingPlayer]) {
+        map
+          .getView()
+          .setCenter(
+            syncedPlayers[followingPlayer].feature
+              .getGeometry()
+              .getCoordinates(),
+          );
+      } else {
+        followingPlayer = null;
+      }
+    }
+
+    // Add/refresh connected players
+    players.forEach(function (player) {
+      if (!syncedPlayers[player.name]) {
+        syncedPlayers[player.name] = {};
+      } else {
+        // We delete the old feature to be able to reset some styles
+        // not possible to edit through existing methods provided by OL
+        playerVectorSource.removeFeature(syncedPlayers[player.name].feature);
+      }
+
+      syncedPlayers[player.name].feature = addPlayerBlip(player);
+      syncedPlayers[player.name].data = player;
+    });
+
+    setTimeout(updatePlayerBlips, 1000);
+  });
 }
 
-// Takes a GTA x and y and returns a LonLat
-function gtaCoordToLonLat(x, y)
-{
-	var mapx = x * 0.03;
-	var mapy = y * 0.03;
-	return new OpenLayers.LonLat(mapx,mapy);
-}
+function checkSendMessage(e) {
+  // If not enter key, stop here
+  if (e.keyCode !== 13) return true;
 
-var blipUpdateCount = 0;
-function updateBlips()
-{
-	getAllBlips (
-		function ( blips )
-		{
-			for ( var k = 0; k < blips.length; k++ )
-			{
-				if  ( bliplist[blips[k].element.id] == null ) {
-					bliplist[blips[k].element.id] = new Object();
-					bliplist[blips[k].element.id].feature = addBlipMarker(blips[k]);
-				} else {
-					var latlong = gtaCoordToLonLat(blips[k].pos.x, blips[k].pos.y);
-					bliplist[blips[k].element.id].feature.lonlat = latlong;
-					bliplist[blips[k].element.id].feature.marker.moveTo(map.getLayerPxFromLonLat(latlong));
-				}
-				bliplist[blips[k].element.id].data = blips[k];
-				bliplist[blips[k].element.id].lastUpdate = blipUpdateCount;
-
-				/*if ( playerinfo[i].isdead )
-					playerlist[playerinfo[i].name].feature.marker.icon = deadicon;
-				else
-					playerlist[playerinfo[i].name].feature.marker.icon = playericon;*/
-			}
-			for ( var j in bliplist )
-			{
-				if ( j != "toJSONString" )
-				{
-					if ( bliplist[j].lastUpdate != blipUpdateCount ) {
-						blipmarkers.removeMarker(bliplist[j].feature.marker);
-						delete bliplist[j];
-					}
-				}
-			}
-
-
-			blipUpdateCount++;
-
-			setTimeout(updateBlips, 5000);
-		}
-	);
-}
+  const messageBox = document.getElementById('sendMessageBox');
+  const message = messageBox.value.trim();
+  messageBox.value = '';
 
-var updateCount = 0;
-function updatePlayerInfo()
-{
-	players (
-		function ( playerinfo )
-		{
-			for ( var i = 0; i < playerinfo.length; i++ )
-			{
-				if  ( playerlist[playerinfo[i].name] == null ) {
-					playerlist[playerinfo[i].name] = new Object();
-					playerlist[playerinfo[i].name].feature = addPlayerMarker(playerinfo[i]);
-
-
-				} else {
-					var latlong = gtaCoordToLonLat(playerinfo[i].pos.x, playerinfo[i].pos.y);
-					playerlist[playerinfo[i].name].feature.lonlat = latlong;
-
-
-					if ( playerToFollow == playerinfo[i].name )
-						map.setCenter(latlong, map.getZoom(), false, false);
-
-					playerlist[playerinfo[i].name].feature.marker.moveTo(map.getLayerPxFromLonLat(latlong));
-				}
-				playerlist[playerinfo[i].name].data = playerinfo[i];
-				playerlist[playerinfo[i].name].lastUpdate = updateCount;
-
-				/*if ( playerinfo[i].isdead )
-					playerlist[playerinfo[i].name].feature.marker.icon = deadicon;
-				else
-					playerlist[playerinfo[i].name].feature.marker.icon = playericon;*/
-			}
-			for ( var j in playerlist )
-			{
-				if ( j != "toJSONString" )
-				{
-					if ( playerlist[j].lastUpdate != updateCount ) {
-						playermarkers.removeMarker(playerlist[j].feature.marker);
-						delete playerlist[j];
-					}
-				}
-			}
-
-
-			updateCount++;
-
-			setTimeout(updatePlayerInfo, 1000);
-		}
-	);
-}
-function checkSendMessage(e)
-{
-
-	var characterCode
-
-	if(e && e.which){ //if which property of event object is supported (NN4)
-		e = e
-		characterCode = e.which //character code is contained in NN4's which property
-		}
-	else{
-		e = event
-		characterCode = e.keyCode //character code is contained in IE's keyCode property
-	}
-
-	if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
-		var messageBox = document.getElementById('sendMessageBox');
-		sendPlayerMessage ( popupPlayer, messageBox.value, function() { } );
-		messageBox.value = "";
-	return false
-	}
-	else{
-	return true
-	}
-}
+  // If no message entered, stop here
+  if (!message) return true;
 
-var playerToFollow = null;
+  sendPlayerMessage(selectedPlayer, message, function () {});
 
-function followPlayer()
-{
-	var followPlayerCheckbox = document.getElementById("followPlayerCheckbox");
-	if ( followPlayerCheckbox.checked == true )
-		playerToFollow = popupPlayer;
-	else
-		playerToFollow = null;
+  return false;
 }
 
-var popup;
-var popupPlayer = null;
-function showplayerinfo(evt) {
-	 // check to see if the popup was hidden by the close box
-	 // if so, then destroy it before continuing
-	if (popup != null) {
-		if (!popup.visible()) {
-			playermarkers.map.removePopup(popup);
-			popup.destroy();
-			popup = null;
-		}
-	}
-	if (popup == null) {
-		var playerinfo = playerlist[this.playerName].data;
-		var html = playerinfo.name + "<br/><div style='font-size: 0.8em;'>";
-		if ( playerinfo.vehicle != null )
-			html += "In vehicle: " + playerinfo.vehicle + "<br/>";
-
-		popupPlayer= this.playerName;
-
-		html += "Send: <input type='text' id='sendMessageBox' onkeyup='checkSendMessage(event);' />"
-		if ( popupPlayer == playerToFollow )
-			var checked = "checked='checked'";
-
-		html += "<input type='checkbox' id='followPlayerCheckbox' onclick='followPlayer();' " + checked + " onchange='followPlayer();' /> <label for='followPlayerCheckbox'>Follow</label>"
-		html += "</div>";
-
-
-		popup = this.feature.createPopup(true);
-		popup.setContentHTML(html);
-		popup.setBackgroundColor("#888888");
-		popup.setOpacity(0.8);
-		playermarkers.map.addPopup(popup);
-	} else {
-		playermarkers.map.removePopup(popup);
-		popup.destroy();
-		popup = null;
-	}
-	OpenLayers.Event.stop(evt);
+function followPlayer() {
+  if (document.getElementById('followPlayerCheckbox').checked) {
+    followingPlayer = selectedPlayer;
+    map
+      .getView()
+      .setCenter(
+        syncedPlayers[followingPlayer].feature.getGeometry().getCoordinates(),
+      );
+  } else {
+    followingPlayer = null;
+  }
 }
 
+function closePopup() {
+  popupOverlay.setPosition(undefined);
+  selectedPlayer = null;
+}