mtcontrib
/
mtsatellite
mirror of https://bitbucket.org/s_l_teichmann/mtsatellite
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
cmd/mtwebmapper/web/index.html
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];

40
cmd/mtwebmapper/web/js/auto-update.js
View File

@ -1,7 +1,8 @@
L.Control.AutoUpdate = L.Control.extend({
options: {
position: 'topleft',
label: 'Automatic update'
label: 'Automatic update',
layer: undefined
},
pressed: true,
@ -37,27 +38,46 @@ L.Control.AutoUpdate = L.Control.extend({
},
autoUpdate: function() {
var me = this;
this.socket = new WebSocket('ws://' + window.location.host + '/ws');
this.socket.onmessage = function(evt) {
var updatePlayers = function(json) {
if (!(typeof json === "string")) {
return;
}
var players;
try {
players = JSON.parse(json);
}
catch (err) {
return;
}
if (players.players) {
me.options.layer.clearLayers();
me.options.layer.addData(players.players);
}
}(evt.data);
var invalidate = function(json) {
var invalidateAll = function(x, y, z) { return true; };
if (!(typeof json === "string")) {
return invalidateAll;
}
var msg;
var tiles;
var tileData;
try {
msg = JSON.parse(json);
var tileData = JSON.parse(json);
} catch (err) {
return invalidateAll;
}
var tiles = msg.tiles;
if !tiles {
continue;
if (!tileData.tiles) {
return invalidateAll;
}
tiles = tileData.tiles;
var pyramid = new Array(9);
var last = new Object();
@ -119,7 +139,7 @@ L.Control.AutoUpdate = L.Control.extend({
}
});
L.autoUpdate = function(cbLabel, cbFunc, cbMap) {
L.autoUpdate = function(cbLabel, cbFunc, layer, cbMap) {
var control = new L.Control.AutoUpdate();
if (cbLabel) {
control.options.label = cbLabel;
@ -129,6 +149,10 @@ L.autoUpdate = function(cbLabel, cbFunc, cbMap) {
control.intendedFunction = cbFunc;
}
if (layer) {
control.options.layer = layer;
}
if (cbMap === '') {
return control;
}