fix: accuracy issues in the map markers

It was bugging me. This version still has it's issues but. it's a lot more accurate.

Author: TGRHavoc

js/src/map.js

@@ -21,36 +21,51 @@ var _MAP_markerStore = [];
 var _MAP_map;
 
 var _MAP_tiles = {
-    "Normal": L.tileLayer("images/tiles/normal/minimap_sea_{y}_{x}.png", { maxNativeZoom: 0 }), //Originally had the "tileSize" attribute set. Removing it allows for the "zoomed out" look
-    "Postal": L.tileLayer("images/tiles/postal/minimap_sea_{y}_{x}.png", { maxNativeZoom: 0 })
+    "Normal": L.tileLayer("images/tiles/normal/minimap_sea_{y}_{x}.png", { minZoom: -2, maxZoom: 0, maxNativeZoom: 0, minNativeZoom: 0, tileSize: 1024 }), //Originally had the "tileSize" attribute set. Removing it allows for the "zoomed out" look
+    "Postal": L.tileLayer("images/tiles/postal/minimap_sea_{y}_{x}.png", { minZoom: -4, maxZoom: 0, maxNativeZoom: 0, minNativeZoom: 0, tileSize: 3072 })
 };
 
+var _MAP_currentLayer = _MAP_tiles["Normal"];
+
 function mapInit(elementID) {
     _MAP_map = L.map(elementID, {
-        maxZoom: 3,
-        minZoom: 0,
         crs: L.CRS.Simple,
-        layers: [_MAP_tiles["Normal"]]
-    }).setView([0, 0], 0);
+        layers: [_MAP_currentLayer]
+    }).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);
+    // Use the "normal" bounds since, it's default.
+    var h = _MAP_currentLayer.options.tileSize * 3,
+        w = _MAP_currentLayer.options.tileSize * 2;
 
+    var southWest = _MAP_map.unproject([0, h], _MAP_map.getMaxZoom());
+    var northEast = _MAP_map.unproject([w, 0], _MAP_map.getMaxZoom());
+    var mapBounds = new L.LatLngBounds(southWest, northEast);
+
+    _MAP_map.setMaxBounds(mapBounds);
     L.control.layers(_MAP_tiles).addTo(_MAP_map);
 
     _MAP_map.on("baselayerchange", function (e) {
-        console.log(e.layer);
-        //var recent = _MAP_map.unproject([e.layer.options.tileSize, e.layer.options.tileSize], _MAP_map.getMaxZoom());
-        //_MAP_map.setView(recent, 0);
+        var h = e.layer.options.tileSize * 3,
+            w = e.layer.options.tileSize * 2;
+
+        var southWest = _MAP_map.unproject([0, h], _MAP_map.getMaxZoom());
+        var northEast = _MAP_map.unproject([w, 0], _MAP_map.getMaxZoom());
+
+        var mapBounds = new L.LatLngBounds(southWest, northEast);
+
+        _MAP_map.setMaxBounds(mapBounds);
+        _MAP_currentLayer = e.layer;
+
+        clearAllMarkers();
+        toggleBlips();
     });
 
     _MAP_map.on('click', function (e) {
         console.log(e);
     });
     //L.tileLayer("images/tiles/minimap_{y}_{x}.png", {tileSize: 512}).addTo(_MAP_map);
+
+    ///_MAP_map.setCenter([w * 0.5, h * 0.5]);
 }
 
 function createMarker(animated, draggable, objectRef, title) {
@@ -87,25 +102,6 @@ function createMarker(animated, draggable, objectRef, title) {
         draggable: draggable ? true : false
     }).addTo(_MAP_map).bindPopup(infoContent);
 
-    /*
-    var marker = new google.maps.Marker({
-        id: _MAP_markerStore.length,
-        type: locationType.name,
-        position: coord,
-        icon: image,
-        map: _MAP_map,
-        popup: infoBox,
-        object: objectRef,
-        draggable: draggable ? true : false,
-        animation: animated ? google.maps.Animation.DROP : 0
-    });
-    
-    if (name == "@DEBUG@@Locator") {
-        $("#marker-list").append('<div id="marker_' + marker.id + '" data-id="' + marker.id + '" class="marker-item"><div class="marker-desc"><span class="marker_name">@Locator</span></div><div class="marker-options"><a href="#" class="marker_view" title="View"><img src="images/icons/view.png" alt="View" height="16" width="16" /></a> </div></div><div class="clear"></div>');
-    } else {
-        $("#marker-list").append('<div id="marker_' + marker.id + '" data-id="' + marker.id + '" class="marker-item"><div class="marker-desc"><span class="marker_name">' + name + '</span></div><div class="marker-options"><a href="#" class="marker_view" title="View"><img src="images/icons/view.png" alt="View" height="16" width="16" /></a> / <a href="#" class="marker_delete" title="Delete"><img src="images/icons/delete.png" alt="Delete" height="16" width="16" /></a></div></div><div class="clear"></div>');
-    }
-    */
     _MAP_markerStore.push(marker);
     return _MAP_markerStore.length;
 }

js/src/socket.js

@@ -97,7 +97,7 @@ function onMessage(e) {
         //console.log("player left:" + data.payload);
         playerLeft(data.payload);
     }
-    
+
 }
 
 function onError(e) {
@@ -335,7 +335,7 @@ function doPlayerUpdate(players) {
                 var t = MarkerTypes[plr.icon];
 
                 //console.log("Got icon of :" + plr.icon);
-                
+
                 _MAP_markerStore[localCache[plr.identifer].marker].setIcon(L.icon(t));
             }
 
@@ -357,7 +357,7 @@ 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>";
-            
+
             _MAP_markerStore[m].bindPopup(infoContent);
 
         }

js/src/utils.js

@@ -19,39 +19,61 @@
 function isNumeric(n) {
 	return !isNaN(parseFloat(n)) && isFinite(n)
 }
+function normalize(value, min, max) {
+    return Math.abs((value - min) / (max - min));
+}
+
+var game_1_x = 327.86;
+var game_1_y = 1660.16;
+
+var game_2_x = -3778.16;
+var game_2_y = -4549.6;
 
-//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 game_min_y = 8000.00;
+var game_max_y = -4000.00;
 var map_min_x = 0;
-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???
+var map_min_y = 0;
 
-function normalize(value, min, max){
-    return Math.abs((value - min) / (max - min));
+/*
+    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);
+*/
+function convertToMap(x, y) {
+    var h = _MAP_currentLayer.options.tileSize * 3,
+        w = _MAP_currentLayer.options.tileSize * 2;
+
+    var latLng1 = _MAP_map.unproject([w * 0.5, h * 0.5], _MAP_map.getMaxZoom());
+    var latLng2 = _MAP_map.unproject([0, h], _MAP_map.getMaxZoom());
+
+    var rLng = latLng1.lng + (x - game_1_x) * (latLng1.lng - latLng2.lng) / (game_1_x - game_2_x);
+    var rLat = latLng1.lat + (y - game_1_y) * (latLng1.lat - latLng2.lat) / (game_1_y - game_2_y);
+    return result = {
+        lat: rLat,
+        lng: rLng
+    };
 }
 
-function convertToMap(x, y) {
+function convertToMapOld(x, y) {
+    var map_max_x = _MAP_currentLayer.options.tileSize * 2,
+        map_max_y = _MAP_currentLayer.options.tileSize * 3;
+
     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;
-    
-    console.log(destX, destY);
-    return {x: destX, y: destY};
+
+    console.log(convertToMap(x,y));
+    console.log(_MAP_map.unproject([destX, destY], _MAP_map.getMaxZoom()));
+    return _MAP_map.unproject([destX, destY], _MAP_map.getMaxZoom());
 }
 
 function convertToMapLeaflet(x, y){
     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
+    return t;
 }
 
 function stringCoordToFloat(coord) {