diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 590be00..ce225ba 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -10,6 +10,9 @@
     </head>
     <body>
         <div id="map" class="map"></div>
+        <div>
+            <span>Current user: </span><select id="select-user"></select>
+        </div>
         <script src="map.js"></script>
     </body>
 </html>
diff --git a/src/main/resources/static/map.js b/src/main/resources/static/map.js
index 2f2b686..66639d1 100644
--- a/src/main/resources/static/map.js
+++ b/src/main/resources/static/map.js
@@ -1,4 +1,10 @@
-var userName = "swhite"; // Currently hardcoded
+$.getJSON("/user", function(data) {
+    $.each( data, function() {
+        $('#select-user').append($('<option>', {
+        value: this.userName,
+        text : this.firstName + " " + this.lastName}));
+    });
+});
 
 // #################################### Map ####################################
 
@@ -8,8 +14,8 @@ var view = new ol.View({
 
 var map = new ol.Map({
     layers: [new ol.layer.Tile({
-        source: new ol.source.MapQuest({layer: 'osm'})
-    })], target: 'map', controls: ol.control.defaults({
+        source: new ol.source.MapQuest({layer: "osm"})
+    })], target: "map", controls: ol.control.defaults({
         attributionOptions: ({
             collapsible: false
         })
@@ -21,7 +27,7 @@ var map = new ol.Map({
 var geolocation = new ol.Geolocation({
     projection: view.getProjection()
 });
-geolocation.on('error', function (error) {
+geolocation.on("error", function (error) {
     alert(error.message);
 });
 var positionFeature = new ol.Feature();
@@ -29,10 +35,10 @@ positionFeature.setStyle(new ol.style.Style({
     image: new ol.style.Icon({src: "horse.png", scale: 0.25})
 }));
 var centerDefined = false;
-geolocation.on('change:position', function () {
+geolocation.on("change:position", function () {
     var coordinates = geolocation.getPosition();
     $.ajax({
-        url: "/user/" + userName + "swhite/location/" + coordinates[0] + "," + coordinates[1], type: "PUT"
+        url: "/user/" + $('#select-user').val() + "swhite/location/" + coordinates[0] + "," + coordinates[1], type: "PUT"
     });
     if (!centerDefined) {
         view.setCenter(coordinates);
@@ -51,16 +57,12 @@ geolocation.setTracking(true);
 
 map.on('singleclick', function (evt) {
     var coordinate = evt.coordinate;
-    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'));
-    var message = '<p>You clicked here:</p><code>' + hdms + '</code>';
-
     var container = document.createElement("div");
     container.className = "ol-popup";
-    //var content = document.createElement("div");
-    //container.appendChild(content);
-    //content.innerHTML = message;
     var popup = new ol.Overlay(({
-        element: container, autoPan: true, autoPanAnimation: {
+        element: container,
+        autoPan: true,
+        autoPanAnimation: {
             duration: 250
         }
     }));
@@ -70,10 +72,13 @@ map.on('singleclick', function (evt) {
         $.ajax({
             method: "POST",
             url: "/message",
-            data: JSON.stringify({content: value, author: userName, location: {type: "Point", coordinates:[coordinate[0],coordinate[1]]}}),
-            contentType:"application/json; charset=utf-8",
-            dataType:"json"});
+            data: JSON.stringify({content: value, author: $('#select-user').val(), location: {type: "Point", coordinates:[coordinate[0],coordinate[1]]}}),
+            contentType: "application/json; charset=utf-8",
+            dataType: "json"});
         return value;
-    }, { type : 'textarea', submit: 'OK'});
+    }, {
+        type : "textarea",
+        submit: "OK"
+    });
 
 });
