refactor: update map utils for better accuracy with new framework

God. I. Hate. This.
There's no guarantee that the values entered will work for everyone.
There's no guarantee they will be accurate.
And I cannot tell you for the life of me where the values have come from.

Author: TGRHavoc

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

js/src/map.js

@@ -26,14 +26,19 @@ var _MAP_tiles = {
 };
 
 function mapInit(elementID) {
-
     _MAP_map = L.map(elementID, {
         maxZoom: 3,
         minZoom: 0,
         crs: L.CRS.Simple,
         layers: [_MAP_tiles["Normal"]]
     }).setView([0, 0], 0);
 
+    var mapBounds = [[0,256*2], [-256*3, 0]];
+    
+    //_MAP_map.fitBounds(mapBounds);
+    _MAP_map.setMaxBounds(mapBounds);
+    //L.rectangle(mapBounds).addTo(_MAP_map);
+
     L.control.layers(_MAP_tiles).addTo(_MAP_map);
 
     _MAP_map.on("baselayerchange", function (e) {
@@ -55,7 +60,9 @@ function createMarker(animated, draggable, objectRef, title) {
         name = "@Locator";
     }
     objectRef.position = stringCoordToFloat(objectRef.position);
+    console.log(objectRef.position);
     var coord = convertToMapLeaflet(objectRef.position.x, objectRef.position.y);
+    console.log(coord);
     var markerType = objectRef.type;
 
     //console.log(JSON.stringify(locationType));

js/src/socket.js

@@ -102,7 +102,8 @@ function onMessage(e) {
     if (data.type == "playerData") {
         //console.log("updating players(" + typeof(data.payload) + "): " + JSON.stringify(data.payload));
         var sortedPlayers = data.payload.sort(sorter);
-        //doPlayerUpdate(sortedPlayers);
+        doPlayerUpdate(sortedPlayers);
+        webSocket.close();
     }
 }
 
@@ -340,26 +341,26 @@ function doPlayerUpdate(players) {
             if (plr.icon) {
                 var t = MarkerTypes[plr.icon];
                 //console.log("Got icon of :" + plr.icon);
+                /*
                 _MAP_markerStore[localCache[plr.identifer].marker].setIcon({
                     url: _MAP_iconURL + t.icon,
                     size: t.size,
                     origin: t.origin,
                     anchor: t.anchor,
                     scaledSize: t.scaledSize
                 });
+                */
             }
 
             // Update the player's location on the map :)
-            _MAP_markerStore[localCache[plr.identifer].marker].setPosition(convertToMapGMAP(plr.pos.x, plr.pos.y));
+            //_MAP_markerStore[localCache[plr.identifer].marker].setPosition(convertToMapLeaflet(plr.pos.x, plr.pos.y));
 
             //update popup with the information we have been sent
             var html = getPlayerInfoHtml(plr);
 
             var infoContent = '<div class="info-window"><div class="info-header-box"><div class="info-header">' + plr.name + '</div></div><div class="clear"></div><div id=info-body>' + html + "</div></div>";
-            var infoBox = new google.maps.InfoWindow({
-                content: infoContent
-            });
-            _MAP_markerStore[localCache[plr.identifer].marker].popup.setContent(infoContent);
+
+            _MAP_markerStore[localCache[plr.identifer].marker].bindPopup(infoContent);
 
         } else {
 
@@ -369,10 +370,8 @@ function doPlayerUpdate(players) {
             var html = getPlayerInfoHtml(plr);
 
             var infoContent = '<div class="info-window"><div class="info-header-box"><div class="info-icon"></div><div class="info-header">' + plr.name + '</div></div><div class="clear"></div><div id=info-body>' + html + "</div></div>";
-            var infoBox = new google.maps.InfoWindow({
-                content: infoContent
-            });
-            _MAP_markerStore[m].popup.setContent(infoContent);
+            
+            _MAP_markerStore[m].bindPopup(infoContent);
 
         }
 

js/src/utils.js

@@ -19,17 +19,20 @@
 function isNumeric(n) {
 	return !isNaN(parseFloat(n)) && isFinite(n)
 }
-var game_min_x = -4000;
-var game_max_x = 6000;
 
+//These settings seem to work for tilesize 256 (the default). The resources I could find don't help here.. So, the values below are botched. And _seem_ to work alright.
+
+// Gta 5's min max bounds
+var game_min_x = -4000.00;
+var game_max_x = 6000.00;
 var game_min_y = 8000;
 var game_max_y = -4000;
 
+// Map's min max bounds based on Leaflet's shitty system
 var map_min_x = 0;
-var map_max_x = 2048*2 + 1024;
-
-var map_min_y = 0;
-var map_max_y = 2048*3 - 256;
+var map_max_x = 585; // Don't fucking ask.
+var map_min_y = 17; // IDFK why this needs to be 17 but, it seems to be accurate
+var map_max_y = 256*3 - 45; // WHYYYY???
 
 function normalize(value, min, max){
     return Math.abs((value - min) / (max - min));
@@ -41,46 +44,14 @@ function convertToMap(x, y) {
 
     var yPercent = normalize(y, game_min_y, game_max_y);
     var destY = yPercent * (Math.abs(map_max_y - map_min_y)) + map_min_y;
-
-    return {lat: destX, lng: destY};
+    
+    console.log(destX, destY);
+    return {x: destX, y: destY};
 }
 
 function convertToMapLeaflet(x, y){
-    var xPercent = normalize(x, game_min_x, game_max_x);
-    var destX = xPercent * (Math.abs(map_max_x - map_min_x)) + map_min_x;
-
-    var yPercent = normalize(y, game_min_y, game_max_y);
-    var destY = yPercent * (Math.abs(map_max_y - map_min_y)) + map_min_y;
-
-    return _MAP_map.unproject([destX, destY], _MAP_map.getMaxZoom());
-}
-
-function convertToGame(lat, lng) {
-    var rX = game_1_x + (lng - map_1_lng) * (game_1_x - game_2_x) / (map_1_lng - map_2_lng);
-    var rY = game_1_y + (lat - map_1_lat) * (game_1_y - game_2_y) / (map_1_lat - map_2_lat);
-    return result = {
-        x: rX,
-        y: rY
-    };
-}
-
-function convertToGameCoord(lat, lng) {
-    var rX = game_1_x + (lng - map_1_lng) * (game_1_x - game_2_x) / (map_1_lng - map_2_lng);
-    var rY = game_1_y + (lat - map_1_lat) * (game_1_y - game_2_y) / (map_1_lat - map_2_lat);
-    return result = {
-        x: rX,
-        y: rY,
-        z: 0
-    };
-}
-
-function convertToMap_OLD(x, y) {
-    var rLng = map_1_lng + (x - game_1_x) * (map_1_lng - map_2_lng) / (game_1_x - game_2_x);
-    var rLat = map_1_lat + (y - game_1_y) * (map_1_lat - map_2_lat) / (game_1_y - game_2_y);
-    return result = {
-        lat: rLat,
-        lng: rLng
-    };
+    var t = convertToMap(x, y);
+    return {lat: -t.y, lng: t.x};// Leaflet switches lat and lng around. Y gets lower the further down you go so.. Need to invert it
 }
 
 function stringCoordToFloat(coord) {