Added players layer and update data in manual and auto mode.

This commit is contained in:
Raimund Renkert
2015-03-09 17:55:19 +01:00
parent b3ba074e28
commit 3c63fbf185
2 changed files with 59 additions and 12 deletions

View File

@ -30,6 +30,14 @@
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;
}
</style>
</head>
<body>
@ -39,9 +47,10 @@
<script src="js/easy-button.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.ajax.js"></script>
<script>
var useWebsocket = false; // Set to true if you want websocket support
var useWebsocket = true; // Set to true if you want websocket support
L.Projection.NoWrap = {
project: function (latlng) {
@ -69,13 +78,25 @@ var world = new L.tileLayer('map/{z}/{x}/{y}.png', {
unloadInvisibleTiles: true
});
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]
})
});
}
});
var rasterMaps = {
"A demo world": world,
};
var latest = world
var overlayMaps = {};
var overlayMaps = {'Players': players};
var map = L.map('map', {
center: [0,0],
@ -104,13 +125,15 @@ if (useWebsocket && 'WebSocket' in window) {
else {
manualUpdateControl.getContainer().style = 'visibility: visible';
}
});
},
players);
}
var layersControl = new L.Control.Layers(rasterMaps, overlayMaps, {collapsed: false});
map.addControl(layersControl);
manualUpdateControl = L.easyButton('fa-refresh',
manualUpdateControl = L.easyButton('fa-refresh',
function (){
players.refresh();
var tiles = document.getElementsByTagName("img");
for (var i = 0; i < tiles.length; i++) {
var img = tiles[i];