peilaus alkaen
				https://bitbucket.org/s_l_teichmann/mtsatellite
				synced 2025-10-31 08:05:27 +01:00 
			
		
		
		
	Added players layer and update data in manual and auto mode.
This commit is contained in:
		| @@ -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]; | ||||
|   | ||||
| @@ -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; | ||||
|     } | ||||
|   | ||||
		Viittaa uudesa ongelmassa
	
	Block a user