From fa3c39297fb34c6d515729c7017fd67b21fc1fc6 Mon Sep 17 00:00:00 2001
From: Raimund Renkert <raimund.renkert@intevation.de>
Date: Tue, 10 Mar 2015 14:10:03 +0100
Subject: [PATCH] Use leaflet awesome marker as icon for players.

---
 cmd/mtwebmapper/web/index.html | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/cmd/mtwebmapper/web/index.html b/cmd/mtwebmapper/web/index.html
index 8fcd159..5ae0702 100644
--- a/cmd/mtwebmapper/web/index.html
+++ b/cmd/mtwebmapper/web/index.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="css/leaflet.css" />
     <link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.4.css" />
     <link rel="stylesheet" href="css/font-awesome.css" />
+    <link rel="stylesheet" href="css/leaflet.awesome-markers.css" />
     <style type="text/css">
         body {
             height: 100%;
@@ -30,13 +31,9 @@
             box-shadow: 0 1px 3px rgba(0,0,0,0.3);
             background-color:rgba(255,255,255,.85);
         }
-        .outlinedText {
-            color: black;
-            text-shadow:
-            -1px -1px 0 #fff,
-            1px -1px 0 #fff,
-            -1px 1px 0 #fff,
-            1px 1px 0 #fff;
+        .awesome-marker i {
+            font-size: 18px;
+            margin-left: -1px;
         }
     </style>
 </head>
@@ -48,6 +45,7 @@
     <script src="js/auto-update.js"></script>
     <script type="text/javascript" src="js/leaflet-hash.js"></script>
     <script type="text/javascript" src="js/leaflet.ajax.js"></script>
+    <script type="text/javascript" src="js/leaflet.awesome-markers.js"></script>
     <script>
 
 var useWebsocket = true; // Set to true if you want websocket support
@@ -81,13 +79,14 @@ var world = new L.tileLayer('map/{z}/{x}/{y}.png', {
 var players = L.geoJson.ajax('/players', {
     pointToLayer: function(feature, latlng) {
         return L.marker(latlng, {
-            icon:L.divIcon({
-                className: 'label',
-                html:  '<table border="0" width="120" height="40"><tr align="center"><td align="center" >' + feature.properties.name + '</td></tr><tr><td align="center"><img src="markers/player.png" width="12" height="17" class=""/></td></tr></table>',
-                iconSize: [120, 40],
-                iconAnchor: [57, 40]
-            })
-        });
+            icon: L.AwesomeMarkers.icon({
+                icon: 'male',
+                iconColor: 'black',
+                prefix: 'fa',
+                markerColor: 'red'
+            }),
+            title: feature.properties.name
+        })
     }
 });
 var rasterMaps = {