Use leaflet awesome marker as icon for players.

This commit is contained in:
Raimund Renkert 2015-03-10 14:10:03 +01:00
parent 5567c7e882
commit fa3c39297f

View File

@ -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 = {