JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>
<div is="container">


<canvas id="renderCanvas"></canvas>
</div>
<div id="miniMap">

<div id="bg">
</div>


<img width="400" height="400" src="http://i.imgur.com/KjGBHkl.png">

<div id="circle">

    </div>
</div>

CSS

html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    position: relative;
  }



#container {
  position: relative;
}
#container canvas, #miniMap {
  position: absolute;

}

#miniMap {
  top: 0;
  height: 200px;
  width: 200px;
 
  left: 0;

}



#bg {
 height:100%;
 width:100%;
   
  opacity: 0.8;
   position: absolute;
   top:0;
   border-radius: 20%;
}

img {
  display: block;
  max-width:200px;
  max-height:200px;
  width: auto;
  height: auto;
  opacity: 0.8;
 
}

#circle {
	border-radius: 50%;
	width: 20px;
	height: 20px; 
  background-color: blue;
  position: absolute;
  right:90px;
  top:90px;
  opacity: 0.4;
  box-shadow: 
		0px 0px 1px 1px rgba(100,250,255,0.6), 
		1px 1px 1px 1px rgba(0,0,0,0.2);
}

JavaScript

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var sphere;
var sphereX;
var sphereY;
var moveUnit = 1;
var mapUnit = 10;

var createScene = function () {

    var scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3(0, 1, 0);

    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    camera.setTarget(BABYLON.Vector3.Zero());

    camera.attachControl(canvas, false);

    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    light.intensity = .5;

    sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

    sphere.position.y = 1;
		sphereX = 90;
    sphereY = 90;

		var box1 = BABYLON.MeshBuilder.CreateBox("box1", {height: 2, width: 2, depth: 4}, scene);
		box1.position.x = 7;
    box1.position.y = 1;
    
    var box2 = BABYLON.MeshBuilder.CreateBox("box2", {height: 2, width: 2, depth: 4}, scene);
		box2.position.x = -7;
    box2.position.y = 1;
    
    var box3 = BABYLON.MeshBuilder.CreateBox("box3", {height: 2, width: 6, depth: 3}, scene);
		box3.position.x = 2;
    box3.position.z = 4;
    box3.position.y = 1;
    
    
    var ground = BABYLON.Mesh.CreateGround("ground1", 16, 16, 2, scene);


  
    return scene;

  };  
  
 

//The magic number is in this case 10, to get a (sort of) fitting position on the map
//The mapZeroPos value is the center of the map, and corresponds to the sphere's (0,Y,0) position
var changeMapDotPositionBasedOnCurrentSpherePosition = function(spherePositionVector, unitConversionMagicNumber){
var mapZeroPos = 90;
console.log(sphere.position.x);
console.log(sphere.position.x);
document.getElementById('circle').style.left="" + (spherePositionVector.x * unitConversionMagicNumber + mapZeroPos) + "px";
document.getElementById('circle').style.top="" + (spherePositionVector.z * -unitConversionMagicNumber + mapZeroPos) + "px";

}
 
 var scene = createScene();


 ...