mtcontrib/mtsatellite
1
0
Fork 0
mirror of https://bitbucket.org/s_l_teichmann/mtsatellite synced 2024-12-24 17:20:18 +01:00
Code Issues Projects Releases Wiki Activity

Use leaflet awesome marker as icon for players.

Browse Source
This commit is contained in:
Raimund Renkert 2015-03-10 14:10:03 +01:00
parent 5567c7e882
commit fa3c39297f
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
cmd/mtwebmapper/web/index.html
View File

@ -6,6 +6,7 @@
<link rel="stylesheet" href="css/leaflet.css" /> <link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.4.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/font-awesome.css" />
<link rel="stylesheet" href="css/leaflet.awesome-markers.css" />
<style type="text/css"> <style type="text/css">
body { body {
height: 100%; height: 100%;
@ -30,13 +31,9 @@
box-shadow: 0 1px 3px rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
background-color:rgba(255,255,255,.85); background-color:rgba(255,255,255,.85);
} }
.outlinedText { .awesome-marker i {
color: black; font-size: 18px;
text-shadow: margin-left: -1px;
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
} }
</style> </style>
</head> </head>
@ -48,6 +45,7 @@
<script src="js/auto-update.js"></script> <script src="js/auto-update.js"></script>
<script type="text/javascript" src="js/leaflet-hash.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.ajax.js"></script>
<script type="text/javascript" src="js/leaflet.awesome-markers.js"></script>
<script> <script>
var useWebsocket = true; // Set to true if you want websocket support 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', { var players = L.geoJson.ajax('/players', {
pointToLayer: function(feature, latlng) { pointToLayer: function(feature, latlng) {
return L.marker(latlng, { return L.marker(latlng, {
icon:L.divIcon({ icon: L.AwesomeMarkers.icon({
className: 'label', icon: 'male',
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>', iconColor: 'black',
iconSize: [120, 40], prefix: 'fa',
iconAnchor: [57, 40] markerColor: 'red'
}),
title: feature.properties.name
}) })
});
} }
}); });
var rasterMaps = { var rasterMaps = {