mtcontrib/mtsatellite
1
0
Fork 0
mirror of https://bitbucket.org/s_l_teichmann/mtsatellite synced 2025-11-04 01:55:25 +01:00
Code Issues Projects Releases Wiki Activity

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

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

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

@@ -30,6 +30,14 @@
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 {
color: black;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
</style> </style>
</head> </head>
<body> <body>
@@ -39,9 +47,10 @@
<script src="js/easy-button.js"></script> <script src="js/easy-button.js"></script>
<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> <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 = { L.Projection.NoWrap = {
project: function (latlng) { project: function (latlng) {
@@ -69,13 +78,25 @@ var world = new L.tileLayer('map/{z}/{x}/{y}.png', {
unloadInvisibleTiles: true 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 = { var rasterMaps = {
"A demo world": world, "A demo world": world,
}; };
var latest = world var latest = world
var overlayMaps = {}; var overlayMaps = {'Players': players};
var map = L.map('map', { var map = L.map('map', {
center: [0,0], center: [0,0],
@@ -104,13 +125,15 @@ if (useWebsocket && 'WebSocket' in window) {
else { else {
manualUpdateControl.getContainer().style = 'visibility: visible'; manualUpdateControl.getContainer().style = 'visibility: visible';
} }
}); },
players);
} }
var layersControl = new L.Control.Layers(rasterMaps, overlayMaps, {collapsed: false}); var layersControl = new L.Control.Layers(rasterMaps, overlayMaps, {collapsed: false});
map.addControl(layersControl); map.addControl(layersControl);
manualUpdateControl = L.easyButton('fa-refresh', manualUpdateControl = L.easyButton('fa-refresh',
function (){ function (){
players.refresh();
var tiles = document.getElementsByTagName("img"); var tiles = document.getElementsByTagName("img");
for (var i = 0; i < tiles.length; i++) { for (var i = 0; i < tiles.length; i++) {
var img = tiles[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({ L.Control.AutoUpdate = L.Control.extend({
options: { options: {
position: 'topleft', position: 'topleft',
label: 'Automatic update' label: 'Automatic update',
layer: undefined
}, },
pressed: true, pressed: true,
@@ -37,27 +38,46 @@ L.Control.AutoUpdate = L.Control.extend({
}, },
autoUpdate: function() { autoUpdate: function() {
var me = this;
this.socket = new WebSocket('ws://' + window.location.host + '/ws'); this.socket = new WebSocket('ws://' + window.location.host + '/ws');
this.socket.onmessage = function(evt) { 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 invalidate = function(json) {
var invalidateAll = function(x, y, z) { return true; }; var invalidateAll = function(x, y, z) { return true; };
if (!(typeof json === "string")) { if (!(typeof json === "string")) {
return invalidateAll; return invalidateAll;
} }
var msg; var tiles;
var tileData;
try { try {
msg = JSON.parse(json); var tileData = JSON.parse(json);
} catch (err) { } catch (err) {
return invalidateAll; return invalidateAll;
} }
if (!tileData.tiles) {
var tiles = msg.tiles; return invalidateAll;
if !tiles {
continue;
} }
tiles = tileData.tiles;
var pyramid = new Array(9); var pyramid = new Array(9);
var last = new Object(); 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(); var control = new L.Control.AutoUpdate();
if (cbLabel) { if (cbLabel) {
control.options.label = cbLabel; control.options.label = cbLabel;
@@ -129,6 +149,10 @@ L.autoUpdate = function(cbLabel, cbFunc, cbMap) {
control.intendedFunction = cbFunc; control.intendedFunction = cbFunc;
} }
if (layer) {
control.options.layer = layer;
}
if (cbMap === '') { if (cbMap === '') {
return control; return control;
} }