diff --git a/clever/www/aruco_map.html b/clever/www/aruco_map.html
new file mode 100644
index 00000000..e9aa574d
--- /dev/null
+++ b/clever/www/aruco_map.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script type="text/javascript" src="js/three.min.js"></script>
+		<script type="text/javascript" src="js/eventemitter2.js"></script>
+		<script type="text/javascript" src="js/roslib.js"></script>
+		<script type="text/javascript" src="js/ros3d.js"></script>
+		<title>Aruco Map visualization</title>
+	</head>
+	<body>
+		<div id="viz"></div>
+		<script type="text/javascript" src="js/viz.js"></script>
+		<script>
+			setScene('aruco_map');
+			addArucoMap();
+			addAxes();
+		</script>
+	</body>
+</html>
diff --git a/clever/www/index.html b/clever/www/index.html
index 029377df..5f6f3d4a 100644
--- a/clever/www/index.html
+++ b/clever/www/index.html
@@ -5,6 +5,7 @@
 	<li><a href="" id="wvs">View image topics</a> (<code>web_video_server</code>)</li>
 	<li><a href="" id="butterfly">Open web terminal</a> (<code>Butterfly</code>)</li>
 	<li><a href="viz.html">View 3D visualization</a> (<code>ros3djs</code>)</li>
+	<li><a href="aruco_map.html">3D visualization for markers map</a> (<code>ros3djs</code>)</li>
 </ul>
 
 <script type="text/javascript">
diff --git a/clever/www/js/viz.js b/clever/www/js/viz.js
index eb530917..26a75655 100644
--- a/clever/www/js/viz.js
+++ b/clever/www/js/viz.js
@@ -20,50 +20,75 @@ ros.on('close', function() {
 	titleEl.innerText = 'Disconnected';
 });
 
-var viewer = new ROS3D.Viewer({
-	divID: 'viz',
-	width: 1000,
-	height: 600,
-	antialias: true
-});
+var viewer, tfClient;
 
-var tfClient = new ROSLIB.TFClient({
-	ros: ros,
-	angularThres: 0.01,
-	transThres: 0.01,
-	rate: 10.0,
-	fixedFrame : 'map'
-});
+function setScene(fixedFrame) {
+	viewer = new ROS3D.Viewer({
+		divID: 'viz',
+		width: 1000,
+		height: 600,
+		antialias: true
+	});
 
-// vehicle markers
-var vehicleMarkers = new ROS3D.MarkerArrayClient({
-	ros: ros,
-	tfClient: tfClient,
-	topic: '/vehicle_marker',
-	rootObject: viewer.scene
-});
+	tfClient = new ROSLIB.TFClient({
+		ros: ros,
+		angularThres: 0.01,
+		transThres: 0.01,
+		rate: 10.0,
+		fixedFrame : fixedFrame
+	});
 
-// camera markers
-var cameraMarkers = new ROS3D.MarkerArrayClient({
-	ros: ros,
-	tfClient: tfClient,
-	topic: '/main_camera/camera_markers',
-	rootObject: viewer.scene
-});
+	var map = new ROS3D.Grid({
+		ros: ros,
+		tfClient: tfClient,
+		rootObject: viewer.scene
+	});
 
-// detected aruco markers
-var cameraMarkers = new ROS3D.MarkerArrayClient({
-	ros: ros,
-	tfClient: tfClient,
-	topic: '/aruco_detect/visualization',
-	rootObject: viewer.scene
-});
+	viewer.scene.add(map);
+}
 
-var map = new ROS3D.Grid({
-	ros: ros,
-	tfClient: tfClient,
-	// frameID: 'map',
-	rootObject: viewer.scene
-});
+function addAxes() {
+	var axes = new ROS3D.Axes({
+		ros: ros,
+		tfClient: tfClient,
+		rootObject: viewer.scene
+	});
+	viewer.scene.add(axes);
+}
 
-viewer.scene.add(map);
+function addVehicle() {
+	new ROS3D.MarkerArrayClient({
+		ros: ros,
+		tfClient: tfClient,
+		topic: '/vehicle_marker',
+		rootObject: viewer.scene
+	});
+}
+
+
+function addCamera() {
+	new ROS3D.MarkerArrayClient({
+		ros: ros,
+		tfClient: tfClient,
+		topic: '/main_camera/camera_markers',
+		rootObject: viewer.scene
+	});
+}
+
+function addAruco() {
+	new ROS3D.MarkerArrayClient({
+		ros: ros,
+		tfClient: tfClient,
+		topic: '/aruco_detect/visualization',
+		rootObject: viewer.scene
+	});
+}
+
+function addArucoMap() {
+	new ROS3D.MarkerArrayClient({
+		ros: ros,
+		tfClient: tfClient,
+		topic: '/aruco_map/visualization',
+		rootObject: viewer.scene
+	});
+}
diff --git a/clever/www/viz.html b/clever/www/viz.html
index ded972cd..dec262c6 100644
--- a/clever/www/viz.html
+++ b/clever/www/viz.html
@@ -10,5 +10,11 @@
 	<body>
 		<div id="viz"></div>
 		<script type="text/javascript" src="js/viz.js"></script>
+		<script>
+			setScene('map');
+			addVehicle();
+			addCamera();
+			addAruco();
+		</script>
 	</body>
 </html>
