feat: add overlays

Overlays, Overlays, Overlays!

So, the map images now have a street overlay folder that is, well, overlayed onto the over images. Woo. So, now you don't need to send the street names with the player data.. Well, if you still want that you can.

Just make sure to download the latest image release, and pop them into your map folder.

Author: TGRHavoc

index.php

@@ -249,6 +249,14 @@
 						<span id="blips_enabled" class="badge badge-pill badge-success pull-right">on</span>
 					</a>
 
+					<a class="list-group-item d-inline-block collapsed">
+						<span class="d-md-inline">Map overlay</span>
+
+						<select id="overlaySelect" class="input-large form-control pull-right">
+							<option value="-1">None</option>
+						</select>
+					</a>
+
 					  <!--
 					  <li>
 						  <a id="toggleLive" href="#">Live update <span id="live_enabled" class="badge badge-danger pull-right">off</span></a>
@@ -300,7 +308,7 @@
 					<a class="nav-header">Blip Controls</a>
 
 					<div id="blip-control-container" class="row">
-						
+
 					</div>
 
 				</div>

js/src/controls.js

@@ -40,6 +40,17 @@ $(document).ready(function(){
     globalInit();
     connect();
 
+
+    $("#overlaySelect").on("change", function(){
+        if(this.value == -1){
+            map.overlayMapTypes.setAt(0,null);
+        }else{
+            if(_overlays[this.value] != undefined){
+                map.overlayMapTypes.setAt(0, _overlays[this.value]);
+            }
+        }
+    });
+
     $("#playerSelect").on("change", function(){
         if (this.value == ""){
             _trackPlayer = null;

js/src/init.js

@@ -24,11 +24,18 @@ var _showBlips = true;
 var _isConnected = false;
 var _trackPlayer = null;
 var playerCount = 0;
+var _overlays = [];
 
 function globalInit() {
     mapInit("map-canvas");
     initPage();
     initBlips();
+
+    for (var i = 0; i < _overlays.length; i++) {
+        var o = _overlays[i];
+        $("#overlaySelect").append(`<option value="${i}">${o.name}</option>`);
+    }
+
 }
 
 function initPage() {

js/src/map.js

@@ -50,14 +50,26 @@ function getNormalizedCoord(coord, zoom) {
     };
 }
 
+var streetOverlayImages = new google.maps.ImageMapType({
+    getTileUrl: function(coord, zoom) {
+        var normalizedCoord = getNormalizedCoord(coord, zoom);
+        if (!normalizedCoord) {
+            return null;
+        }
+        return _MAP_tileURL + 'overlay_streets/' +  zoom + '-' + coord.x + '_' + coord.y + '.png';
+    },
+    tileSize: new google.maps.Size(256, 256),
+    name: "Street names"
+});
+
 // Start atlas
 var mapAtlasOptions = {
     getTileUrl: function(coord, zoom) {
         var normalizedCoord = getNormalizedCoord(coord, zoom);
         if (!normalizedCoord || normalizedCoord.x > bounds[zoom] || normalizedCoord.y > bounds[zoom]) {
             return null;
         }
-        return _MAP_tileURL + 'atlas/' +  zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
+        return _MAP_tileURL + 'atlas/' +  zoom + '-' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
     },
     tileSize: new google.maps.Size(256, 256),
     maxZoom: 7,
@@ -75,7 +87,7 @@ var mapSatelliteOptions = {
         if (!normalizedCoord || normalizedCoord.x > bounds[zoom] || normalizedCoord.y > bounds[zoom]) {
             return null;
         }
-        return _MAP_tileURL + 'satellite/' +  zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
+        return _MAP_tileURL + 'satellite/' +  zoom + '-' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
     },
     tileSize: new google.maps.Size(256, 256),
     maxZoom: 7,
@@ -93,11 +105,11 @@ var mapRoadOptions = {
         if (!normalizedCoord || normalizedCoord.x > bounds[zoom] || normalizedCoord.y > bounds[zoom]) {
             return null;
         }
-        return _MAP_tileURL + 'road/' +  zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
+        return _MAP_tileURL + 'road/' +  zoom + '-' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
     },
     tileSize: new google.maps.Size(256, 256),
     maxZoom: 7,
-    minZoom: 5,
+    //minZoom: 5,
     name: "Road",
     alt: "GTA V Road Map"
 };
@@ -112,7 +124,7 @@ var mapUVInvOptions = {
         if (!normalizedCoord || normalizedCoord.x > bounds[zoom] || normalizedCoord.y > bounds[zoom]) {
             return null;
         }
-        return _MAP_tileURL + 'uv-invert/' +  zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
+        return _MAP_tileURL + 'uv-invert/' +  zoom + '-' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
     },
     tileSize: new google.maps.Size(256, 256),
     maxZoom: 7,
@@ -130,7 +142,7 @@ var mapPostcodeOptions = {
         if (!normalizedCoord || normalizedCoord.x > bounds[zoom] || normalizedCoord.y > bounds[zoom]) {
             return null;
         }
-        return _MAP_tileURL + 'postcode/' +  zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
+        return _MAP_tileURL + 'postcode/' +  zoom + '-' + normalizedCoord.x + '_' + normalizedCoord.y + '.png';
     },
     tileSize: new google.maps.Size(256, 256),
     maxZoom: 7,
@@ -169,6 +181,12 @@ function mapInit(elementID) {
     _MAP_roadMap ? map.mapTypes.set("Road", mapRoad) : null;
     _MAP_UVInvMap ? map.mapTypes.set("UV Invert", mapUVInv) : null;
     _MAP_PostcodeMap ? map.mapTypes.set("Postcode", mapPostcode) : null;
+
+    //TODO: Maybe make this an option or something?
+    _overlays.push(streetOverlayImages);
+
+    //TODO: If a postcode overlay get made or something, add it here too..
+
     map.setMapTypeId("Atlas");
     google.maps.event.addListener(map, "maptypeid_changed", function() {
         var type = map.getMapTypeId();