Make map markers hyperlinks (resole issue #33)

app/static/assets/leaflet/utils.js

@@ -34,17 +34,17 @@ var bluePlayerIcon = new L.Icon({
     shadowSize: [41, 41]
 });
 
-var bluePlayerIconMini = new L.Icon({
-    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-blue.png',
+var greenPlayerIcon = new L.Icon({
+    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-green.png',
     shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
-    iconSize: [10, 16.4],
-    iconAnchor: [5, 16.4],
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
     popupAnchor: [1, -34],
-    shadowSize: [16.4, 16.4]
+    shadowSize: [41, 41]
 });
 
-var greenPlayerIcon = new L.Icon({
-    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-green.png',
+var goldPlayerIcon = new L.Icon({
+    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-gold.png',
     shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
     iconSize: [25, 41],
     iconAnchor: [12, 41],
@@ -52,6 +52,15 @@ var greenPlayerIcon = new L.Icon({
     shadowSize: [41, 41]
 });
 
+var bluePlayerIconMini = new L.Icon({
+    iconUrl: '/static/assets/leaflet/images/person-marker-icon-2x-blue.png',
+    shadowUrl: '/static/assets/leaflet/images/marker-shadow.png',
+    iconSize: [10, 16.4],
+    iconAnchor: [5, 16.4],
+    popupAnchor: [1, -34],
+    shadowSize: [16.4, 16.4]
+});
+
 function addObjectiveMarker(map, objective, icon=greenIcon){
     var objectiveMarker = L.marker([
         objective['latitude'],
@@ -65,10 +74,11 @@ function addObjectiveMarker(map, objective, icon=greenIcon){
     if(objective['hash']){
         objectiveMarker.bindTooltip(`<b>${objective['name']}</b><br>
         ${objective['hash']}`).openPopup();
+        objectiveMarker.hash = objective['hash'];
     } else {
         objectiveMarker.bindTooltip(`<b>${objective['name']}</b>`).openPopup();
     }
-    return objectiveMarker
+    return objectiveMarker;
 }
 
 function addPlayerMarker(map, player, icon=bluePlayerIcon){
@@ -79,12 +89,13 @@ function addPlayerMarker(map, player, icon=bluePlayerIcon){
     var timestamp_local = toMomentLocal(player['timestamp_utc']).format('YYYY-MM-DD HH:mm')
     playerMarker.bindTooltip(`<b>${player['username']}</b><br>
                                 ${timestamp_local}`).openPopup();
-    return playerMarker
+    playerMarker.username = player['username'];
+    return playerMarker;
 }
 
 function toMomentLocal(timestamp_utc_string){
-    var timestamp_utc = moment.utc(timestamp_utc_string).toDate()
-    return moment(timestamp_utc).local()
+    var timestamp_utc = moment.utc(timestamp_utc_string).toDate();
+    return moment(timestamp_utc).local();
 }
 
 var myLocationMarker

app/templates/game_owner_dashboard.html

@@ -112,7 +112,12 @@
     var objectives = JSON.parse('{{ json.dumps(game.objectives, cls=objective_encoder)|safe }}')
 
     for (var i = 0; i < objectives.length; i++){
-        objectiveMarkers.push(addObjectiveMarker(map, objectives[i]))
+        marker = addObjectiveMarker(map, objectives[i])
+        marker.on("click", function (e) {
+            var caller = e.target || e.srcElement;
+            window.location = "{{ url_for('main.objective', objective_hash = 'ObjectiveHash') }}".replace('ObjectiveHash', caller.hash);
+        });
+        objectiveMarkers.push(marker)
     }
 
     var players = JSON.parse('{{ json.dumps(game.last_player_locations(), cls=location_encoder)|safe }}')
@@ -132,9 +137,14 @@
         }
         playerMarkers = []
         for (var i = 0; i < players.length; i++) {
-            playerMarkers.push(addPlayerMarker(map, players[i], bluePlayerIcon))
+            marker = addPlayerMarker(map, players[i], goldPlayerIcon)
+            marker.on("click", function (e) {
+                var caller = e.target || e.srcElement;
+                window.location = "{{ url_for('main.game_player', game_name = game.name, username = 'Username') }}".replace('Username', caller.username);
+            });
+            playerMarkers.push(marker);
             // Update table lastlocation column
-            $('#last_location_' + players[i].username)[0].innerHTML = toMomentLocal(players[i].timestamp_utc).fromNow()
+            $('#last_location_' + players[i].username)[0].innerHTML = toMomentLocal(players[i].timestamp_utc).fromNow();
         }
     }