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="512" height="512" src="http://i.imgur.com/FqMVNwl.png" id="map">



<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;
  background: rgba(50,50,255,0.3);
  left: 0;
  overflow: hidden;
  border: 4px solid rgba(0, 153, 255, 0.6);
  border-radius: 5px 20px 5px;
}




img {
  display: block;
  max-width:400px;
  max-height:400px;
  width: auto;
  height: auto;
  opacity: 0.8;
 margin: -80px 0 0 -90px;

}

#circle {
	border-radius: 50%;
	width: 20px;
	height: 20px; 
  background-color: #0099ff;
  position: absolute;
  right:90px;
  top:90px;
  opacity: 0.6;

 -moz-box-shadow: 0px 0px 15px #0089fe;
 -webkit-box-shadow: 0px 0px 15px #0089fe;
 box-shadow: 0px 0px 15px #0089fe;
}

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 xMargin = -100;
var yMargin = -90;
var mapOpen = false;

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;
    
    camera.parent = sphere;

		var box1 = BABYLON.MeshBuilder.CreateBox("box", {height: 2, width: 2, depth: 4}, scene);
		box1.position.x = 7;
    box1.position.y = 1;
    
    var box2 = BABYLON.MeshBuilder.CreateBox("box", {height: 2, width: 2, depth: 4}, scene);
		box2.position.x = -7;
    box2.position.y = 1;
    
    var box3 = BABYLON.MeshBuilder.CreateBox("box", {height: 2, width: 6, depth: 3}, scene);
		box3.position.x = 2;
    box3.position.z = 8;
    box3.position.y = 1;
    
    
      var box4 = BABYLON.MeshBuilder.CreateBox("box", {height: 2, width: 6, depth: 3}, scene);
		box4.position.x = 5;
    box4.position.z = 10;
    box4.position.y = 1;
    
    
   var box5 = BABYLON.MeshBuilder.CreateBox("box", {height: 2, width: 3, depth: 6}, scene);
		box5.position.x = 17;
    box5.position.y = 1; 
    box5.position.z = 9; 
    
    var ground = BABYLON.Mesh.CreateGround("ground1", 46, 46, 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 =...