online map/map.html

<!DOCTYPE html>
<html>

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-database.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>


<body style="background-color: #183a52; width:100%; height: 100%; margin:0; overflow: hidden">

<canvas id="myCanvas"
style="overflow: hidden ">
</canvas>

</body>

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "INSERT YOUR FIREBASE API KEY HERE",
    authDomain: "pubg-map-hack.firebaseapp.com",
    databaseURL: "https://pubg-map-hack.firebaseio.com",
    projectId: "pubg-map-hack",
    storageBucket: "", // leave this empty
    messagingSenderId: "random integer" //input a random integer here 
  };
  firebase.initializeApp(config);

// reference canvas and make it screen size since doing it in HTML is balls
var canvas = document.getElementById('myCanvas');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
// setup context and database connection
var ctx = canvas.getContext('2d');
var factor = 1;
var scaledFactor = 1;
var starCountRef = firebase.database().ref('locations');
var locations = {};

var players = {};

var mapImage = new Image;
var lastloc;

var tracked_player = parseInt(getParameterByName('id') || 0);

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// translates game coords to overlay coords
function game2pix(p){
	return p*(8130/813000)
}

 function drawStrokedText(text, x, y, fillcolor){
      ctx.fillStyle = 'black';
      ctx.fillText(text, x-1/scaledFactor, y);
      ctx.fillText(text, x, y-1/scaledFactor);
      ctx.fillText(text, x+1/scaledFactor, y);
      ctx.fillText(text, x, y+1/scaledFactor);
      ctx.fillStyle = fillcolor;
      ctx.fillText(text,x,y);
}

function intersects(a, b)
{
	if (a.x > (b.x + b.w) || b.x > (a.x + a.w)) //beside
		return false;
	if ((a.y + a.h) < b.y || (b.y + b.h) < a.y) //above
		return false;
	return true;
}

var separated = {};
function separate() 
{
	var a, b; // to hold any two items that are overlapping
	var dx, dy, dxa, dxb, dya, dyb; // holds delta values of the overlap
	
	do {
		var touching = false; // a boolean flag to keep track of touching items
		for (var i = 0; i < separated.length; i++) {
			a = separated[i];
			for (var j = i+1; j < separated.length; j++) { // for each pair of items
				b = separated[j];
				if (intersects(a,b)) {
					touching = true; //iterate again
					
					//calculate the minimum movement delta
					dx = Math.min((a.x+a.w)-b.x+1, a.x-(b.x+b.w)-1);
					dy = Math.min((a.y+a.h)-b.y+1, a.y-(b.y+b.h)-1);
						
					// only keep the smallest delta, multiply width as 
					// text is always longer than tall so it wont only stack vertical
					(Math.abs(dx) < (2.25*Math.abs(dy))) ? dy = 0 : dx = 0;
						
					// create a delta for each rectangle as half the whole delta.
					dxa = -dx/2;
					dxb = dx+dxa;
						
					// same for y
					dya = -dy/2;
					dyb = dy+dya;
						
					// shift both rectangles
					separated[i].x += dxa;
					separated[i].y += dya;
					
					separated[j].x += dxb;
					separated[j].y += dyb;
				}
			} 
		}
	} while (touching); // loop until no rectangles are touching
}

function drawPlayers(ctx)
{
    for(var i = players.length-1; i>=0; i--)
    {
        var centerX = game2pix(players[i].x);
        var centerY = game2pix(players[i].y);
        var radius = 7/scaledFactor;

        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        ctx.lineWidth = 5;
		if (i==tracked_player){
			ctx.fillStyle = '#00BB00';
		}else{
			ctx.fillStyle = players[0].t == players[i].t ?'#0033BB': '#ff0000';
		}
        ctx.fill();

        // if(i==30){
        //       ctx.moveTo(centerX, centerY);
        // }
        //context.strokeStyle = i==0?'#003300':'#ff0000';
        //context.stroke();

        ctx.font = ''+8/scaledFactor+'pt Calibri';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.fillText(i, centerX, centerY+(3/scaledFactor));
	}  
}

mapImage.src = "map.jpg"


window.onload = function(){   

  console.log('loading done');
  trackTransforms(ctx);

  function redraw(){
	players = locations.players;
	if(players == undefined)
  {
    console.log('players undefined');
		return;
  }
	
  // Clear the entire canvas
  var p1 = ctx.transformedPoint(0,0);
  var p2 = ctx.transformedPoint(canvas.width,canvas.height);
  ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);
  // draw map
  ctx.drawImage(mapImage,0,0);
	  
	drawPlayers(ctx);
	
}
      
      var lastX=canvas.width/2, lastY=canvas.height/2;
      var dragStart,dragged;
      canvas.addEventListener('mousedown',function(evt){
            document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragStart = ctx.transformedPoint(lastX,lastY);
            dragged = false;
      },false);
      canvas.addEventListener('mousemove',function(evt){
            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
            dragged = true;
            if (dragStart){
                  var pt = ctx.transformedPoint(lastX,lastY);
                  ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
                  redraw();
            }
      },false);
      canvas.addEventListener('mouseup',function(evt){
            dragStart = null;
            if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
      },false);

      var scaleFactor = 1.1;
      var zoom = function(clicks){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x,pt.y);
            factor = Math.pow(scaleFactor,clicks);
            scaledFactor *= factor;
            ctx.scale(factor,factor);
            ctx.translate(-pt.x,-pt.y);
            redraw();
      }

      var handleScroll = function(evt){
            var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
            if (delta) zoom(delta);
            return evt.preventDefault() && false;
      };
      canvas.addEventListener('DOMMouseScroll',handleScroll,false);
     canvas.addEventListener('mousewheel',handleScroll,false);

var handleKey = function(e){
if (e.keyCode == 38) //up
zoom(1);
if (e.keyCode == 40) //down
zoom(-1);
};
document.addEventListener('keydown', handleKey, false);

      starCountRef.on('value', function(snapshot) {

        // convers response into usable array
        console.log('info downloaded');
        locations = snapshot.val();
        redraw();
        console.log('past redraw');
      });

//do once on load
zoom(8);
};

// Adds ctx.getTransform() - returns an SVGMatrix
// Adds ctx.transformedPoint(x,y) - returns an SVGPoint
function trackTransforms(ctx){
      var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
      var xform = svg.createSVGMatrix();
      ctx.getTransform = function(){ return xform; };
      
      var savedTransforms = [];
      var save = ctx.save;
      ctx.save = function(){
            savedTransforms.push(xform.translate(0,0));
            return save.call(ctx);
      };
      var restore = ctx.restore;
      ctx.restore = function(){
            xform = savedTransforms.pop();
            return restore.call(ctx);
      };

      var scale = ctx.scale;
      ctx.scale = function(sx,sy){
            xform = xform.scaleNonUniform(sx,sy);
            return scale.call(ctx,sx,sy);
      };
      var rotate = ctx.rotate;
      ctx.rotate = function(radians){
            xform = xform.rotate(radians*180/Math.PI);
            return rotate.call(ctx,radians);
      };
      var translate = ctx.translate;
      ctx.translate = function(dx,dy){
            xform = xform.translate(dx,dy);
            return translate.call(ctx,dx,dy);
      };
      var transform = ctx.transform;
      ctx.transform = function(a,b,c,d,e,f){
            var m2 = svg.createSVGMatrix();
            m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
            xform = xform.multiply(m2);
            return transform.call(ctx,a,b,c,d,e,f);
      };
      var setTransform = ctx.setTransform;
      ctx.setTransform = function(a,b,c,d,e,f){
            xform.a = a;
            xform.b = b;
            xform.c = c;
            xform.d = d;
            xform.e = e;
            xform.f = f;
            return setTransform.call(ctx,a,b,c,d,e,f);
      };
      var pt  = svg.createSVGPoint();
      ctx.transformedPoint = function(x,y){
            pt.x=x; pt.y=y;
            return pt.matrixTransform(xform.inverse());
      }
}

</script>

</html>