pics, travelnet layer stub
@ -13,9 +13,10 @@
|
|||||||
|
|
||||||
<script src="js/lib/leaflet.js"></script>
|
<script src="js/lib/leaflet.js"></script>
|
||||||
<script src="js/lib/mithril.min.js"></script>
|
<script src="js/lib/mithril.min.js"></script>
|
||||||
<script src="js/RealtimeTileLayer.js"></script>
|
|
||||||
<script src="js/WebSocketChannel.js"></script>
|
<script src="js/WebSocketChannel.js"></script>
|
||||||
|
<script src="js/RealtimeTileLayer.js"></script>
|
||||||
<script src="js/CoordinatesDisplay.js"></script>
|
<script src="js/CoordinatesDisplay.js"></script>
|
||||||
|
<script src="js/overlays/TravelnetOverlay.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
@ -9,7 +9,20 @@ var RealtimeTileLayer = (function(){
|
|||||||
return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
|
return "tile-" + layerId + "/" + x + "/" + y + "/" + zoom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
init: function(){
|
||||||
|
WebSocketChannel.addListener("rendered-tile", function(tc){
|
||||||
|
var id = getImageId(tc.layerid, tc.x, tc.y, tc.zoom);
|
||||||
|
var el = document.getElementById(id);
|
||||||
|
|
||||||
|
if (el){
|
||||||
|
//Update src attribute if img found
|
||||||
|
el.src = getTileSource(tc.layerid, tc.x, tc.y, tc.zoom, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
create: function(layerId){
|
create: function(layerId){
|
||||||
return L.TileLayer.extend({
|
return L.TileLayer.extend({
|
||||||
createTile: function(coords){
|
createTile: function(coords){
|
||||||
@ -19,16 +32,6 @@ var RealtimeTileLayer = (function(){
|
|||||||
return tile;
|
return tile;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
|
||||||
|
|
||||||
update: function(data){
|
|
||||||
var id = getImageId(data.layerid, data.x, data.y, data.zoom);
|
|
||||||
var el = document.getElementById(id);
|
|
||||||
|
|
||||||
if (el){
|
|
||||||
//Update src attribute if img found
|
|
||||||
el.src = getTileSource(data.layerid, data.x, data.y, data.zoom, true);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
44
server/static/js/WebSocketChannel.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
var WebSocketChannel = (function(){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
|
||||||
|
|
||||||
|
var listenerMap = {/* type -> [listeners] */};
|
||||||
|
|
||||||
|
function addListener(type, listener){
|
||||||
|
var list = listenerMap[type];
|
||||||
|
if (!list){
|
||||||
|
list = [];
|
||||||
|
listenerMap[type] = list;
|
||||||
|
}
|
||||||
|
|
||||||
|
list.push(listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
function connect(){
|
||||||
|
var ws = new WebSocket(wsUrl);
|
||||||
|
|
||||||
|
ws.onmessage = function(e){
|
||||||
|
var event = JSON.parse(e.data);
|
||||||
|
//rendered-tile, mapobject-created, mapobjects-cleared
|
||||||
|
|
||||||
|
var listeners = listenerMap[event.type];
|
||||||
|
if (listeners){
|
||||||
|
listeners.forEach(function(listener){
|
||||||
|
listener(event.data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.onerror = function(){
|
||||||
|
//reconnect after some time
|
||||||
|
setTimeout(connect, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
connect: connect,
|
||||||
|
addListener: addListener
|
||||||
|
};
|
||||||
|
|
||||||
|
}());
|
@ -1,37 +0,0 @@
|
|||||||
var WebSocketChannel = (function(){
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var wsUrl = location.protocol.replace("http", "ws") + "//" + location.host + location.pathname.substring(0, location.pathname.lastIndexOf("/")) + "/api/ws";
|
|
||||||
|
|
||||||
function connect(){
|
|
||||||
var ws = new WebSocket(wsUrl);
|
|
||||||
|
|
||||||
ws.onmessage = function(e){
|
|
||||||
var event = JSON.parse(e.data);
|
|
||||||
|
|
||||||
if (event.type == "rendered-tile"){
|
|
||||||
//Update tiles
|
|
||||||
RealtimeTileLayer.update(event.data)
|
|
||||||
|
|
||||||
} else if (event.type == "mapobject-created"){
|
|
||||||
//TODO
|
|
||||||
console.log(event);
|
|
||||||
|
|
||||||
} else if (event.type == "mapobjects-cleared"){
|
|
||||||
//TODO
|
|
||||||
console.log(event);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ws.onerror = function(){
|
|
||||||
//reconnect after some time
|
|
||||||
setTimeout(connect, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
connect: connect
|
|
||||||
};
|
|
||||||
|
|
||||||
}());
|
|
@ -1,5 +1,6 @@
|
|||||||
|
|
||||||
(function(){
|
(function(){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
var crs = L.Util.extend({}, L.CRS.Simple, {
|
var crs = L.Util.extend({}, L.CRS.Simple, {
|
||||||
//transformation: L.transformation(0.001, 0, -0.001, 0),
|
//transformation: L.transformation(0.001, 0, -0.001, 0),
|
||||||
@ -24,12 +25,18 @@
|
|||||||
map.attributionControl.addAttribution('<a href="https://github.com/thomasrudin-mt/mapserver">Mapserver</a>');
|
map.attributionControl.addAttribution('<a href="https://github.com/thomasrudin-mt/mapserver">Mapserver</a>');
|
||||||
|
|
||||||
var layers = {};
|
var layers = {};
|
||||||
|
var overlays = {}
|
||||||
|
|
||||||
|
RealtimeTileLayer.init();
|
||||||
|
|
||||||
var Layer = RealtimeTileLayer.create(0);
|
var Layer = RealtimeTileLayer.create(0);
|
||||||
var tileLayer = new Layer();
|
var tileLayer = new Layer();
|
||||||
tileLayer.addTo(map);
|
tileLayer.addTo(map);
|
||||||
|
|
||||||
L.control.layers(layers, {}).addTo(map);
|
layers["Base"] = tileLayer;
|
||||||
|
overlays["Travelnet"] = new TravelnetOverlay();
|
||||||
|
|
||||||
|
L.control.layers(layers, overlays).addTo(map);
|
||||||
|
|
||||||
var el = CoordinatesDisplay.create({ position: 'bottomleft' });
|
var el = CoordinatesDisplay.create({ position: 'bottomleft' });
|
||||||
el.addTo(map);
|
el.addTo(map);
|
||||||
|
22
server/static/js/overlays/TravelnetOverlay.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
var TravelnetOverlay = (function(){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var TravelnetIcon = L.icon({
|
||||||
|
iconUrl: 'pics/travelnet_inv.png',
|
||||||
|
|
||||||
|
iconSize: [64, 64],
|
||||||
|
iconAnchor: [32, 32],
|
||||||
|
popupAnchor: [0, -32]
|
||||||
|
});
|
||||||
|
|
||||||
|
return L.LayerGroup.extend({
|
||||||
|
onAdd: function(map) {
|
||||||
|
console.log("TravelnetOverlay.onAdd");
|
||||||
|
},
|
||||||
|
|
||||||
|
onRemove: function(map) {
|
||||||
|
console.log("TravelnetOverlay.onRemove");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}());
|
BIN
server/static/pics/mission_32px.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
server/static/pics/mission_64px.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
server/static/pics/sam.png
Normal file
After Width: | Height: | Size: 982 B |
BIN
server/static/pics/search.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
server/static/pics/shop.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
server/static/pics/shop_empty.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
server/static/pics/travelnet_inv.png
Normal file
After Width: | Height: | Size: 5.5 KiB |