Changeset 186
- Timestamp:
- Sep 10, 2014, 8:09:18 PM (10 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
binary-improvements/webserver/js/index.js
r179 r186 14 14 15 15 16 // =============================================================================================== 17 // 7dtd coordinate transformations 18 19 SDTD_Projection = { 20 project: function (latlng) { 21 return new L.Point(latlng.lng / 16, latlng.lat / 16); 22 }, 23 24 unproject: function (point) { 25 return new L.LatLng(point.y * 16, point.x * 16); 26 } 27 }; 28 29 SDTD_CRS = L.extend({}, L.CRS.Simple, { 30 projection: SDTD_Projection, 31 transformation: new L.Transformation(1, 0, -1, 0), 32 33 scale: function (zoom) { 34 return Math.pow(2, zoom); 35 } 16 function initMap() { 17 // =============================================================================================== 18 // 7dtd coordinate transformations 19 20 SDTD_Projection = { 21 project: function (latlng) { 22 return new L.Point( 23 (latlng.lat) / Math.pow(2, MAXZOOM), 24 (latlng.lng) / Math.pow(2, MAXZOOM) ); 25 }, 26 27 unproject: function (point) { 28 return new L.LatLng( 29 point.x * Math.pow(2, MAXZOOM), 30 point.y * Math.pow(2, MAXZOOM) ); 31 } 32 }; 33 34 SDTD_CRS = L.extend({}, L.CRS.Simple, { 35 projection: SDTD_Projection, 36 transformation: new L.Transformation(1, 0, -1, 0), 37 38 scale: function (zoom) { 39 return Math.pow(2, zoom); 40 } 41 }); 42 43 var CoordToChunk = function(latlng) { 44 var x = Math.floor(((latlng.lat + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE)); 45 var y = Math.floor(((latlng.lng + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE)); 46 return L.latLng(x, y); 47 } 48 49 var CoordToRegion = function(latlng) { 50 var x = Math.floor(((latlng.lat + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE)); 51 var y = Math.floor(((latlng.lng + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE)); 52 return L.latLng(x, y); 53 } 54 55 var FormatCoord = function(latlng) { 56 return "" + 57 Math.abs(latlng.lng) + (latlng.lng>=0 ? " N" : " S") + " / " + 58 Math.abs(latlng.lat) + (latlng.lat>=0 ? " E" : " W"); 59 } 60 61 var FormatRegionFileName = function(latlng) { 62 return "r." + latlng.lat + "." + latlng.lng + ".7rg"; 63 } 64 65 66 67 // =============================================================================================== 68 // Map and basic tile layers 69 70 var tileTime = new Date().getTime(); 71 72 map = L.map('map', { 73 zoomControl: false, // Added by Zoomslider 74 zoomsliderControl: true, 75 attributionControl: false, 76 crs: SDTD_CRS 77 }).setView([0, 0], Math.max(0, MAXZOOM-5)); 78 79 var tileLayer = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', { 80 maxZoom:MAXZOOM+1, 81 minZoom: Math.max(0, MAXZOOM-5), 82 maxNativeZoom: MAXZOOM, 83 tileSize: TILESIZE, 84 continuousWorld: true, 85 tms: true, 86 unloadInvisibleTiles: false, 87 time: function() { return tileTime; } 88 }).addTo(map); 89 90 var tileLayerMiniMap = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', { 91 maxZoom: MAXZOOM, 92 minZoom: 0, 93 maxNativeZoom: MAXZOOM, 94 tileSize: TILESIZE, 95 continuousWorld: true, 96 tms: true, 97 unloadInvisibleTiles: false, 98 time: function() { return tileTime; } 99 }); 100 101 var regionLayer = L.tileLayer.canvas({ 102 maxZoom: MAXZOOM+1, 103 minZoom: 0, 104 maxNativeZoom: MAXZOOM+1, 105 tileSize: TILESIZE, 106 continuousWorld: true 107 }); 108 109 regionLayer.drawTile = function(canvas, tilePoint, zoom) { 110 var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom); 111 var tileLeft = tilePoint.x * blockWorldSize; 112 var tileBottom = (-1-tilePoint.y) * blockWorldSize; 113 var blockPos = L.latLng(tileLeft, tileBottom); 114 115 var ctx = canvas.getContext('2d'); 116 117 ctx.strokeStyle = "lightblue"; 118 ctx.fillStyle = "lightblue"; 119 ctx.lineWidth = 1; 120 ctx.font="14px Arial"; 121 122 var lineCount = blockWorldSize / REGIONSIZE; 123 if (lineCount >= 1) { 124 var pos = 0; 125 while (pos < TILESIZE) { 126 // Vertical 127 ctx.beginPath(); 128 ctx.moveTo(pos, 0); 129 ctx.lineTo(pos, TILESIZE); 130 ctx.stroke(); 131 132 // Horizontal 133 ctx.beginPath(); 134 ctx.moveTo(0, pos); 135 ctx.lineTo(TILESIZE, pos); 136 ctx.stroke(); 137 138 pos += TILESIZE / lineCount; 139 } 140 ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5); 141 } else { 142 if ((tileLeft % REGIONSIZE) == 0) { 143 // Vertical 144 ctx.beginPath(); 145 ctx.moveTo(0, 0); 146 ctx.lineTo(0, TILESIZE); 147 ctx.stroke(); 148 } 149 if ((tileBottom % REGIONSIZE) == 0) { 150 // Horizontal 151 ctx.beginPath(); 152 ctx.moveTo(0, TILESIZE); 153 ctx.lineTo(TILESIZE, TILESIZE); 154 ctx.stroke(); 155 } 156 if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) { 157 ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5); 158 } 159 } 160 161 var pos = tileLeft; 162 163 } 164 165 166 // =============================================================================================== 167 // Reload control 168 169 L.Control.ReloadTiles = L.Control.extend({ 170 options: { 171 position: 'bottomleft' 172 }, 173 174 onAdd: function (map) { 175 var name = 'control-reloadtiles', 176 container = L.DomUtil.create('div', name + ' leaflet-bar'); 177 178 this._map = map; 179 180 this._reloadbutton = this._createButton( 181 "Reload tiles", "Reload tiles", 182 name + "-btn", container, this._reload, this); 183 184 return container; 185 }, 186 187 onRemove: function (map) { 188 }, 189 190 _reload: function (e) { 191 tileTime = new Date().getTime(); 192 tileLayer.redraw(); 193 tileLayerMiniMap.redraw(); 194 }, 195 196 _createButton: function (html, title, className, container, fn, context) { 197 var link = L.DomUtil.create('a', className, container); 198 link.innerHTML = html; 199 link.href = '#'; 200 link.title = title; 201 202 var stop = L.DomEvent.stopPropagation; 203 204 L.DomEvent 205 .on(link, 'click', stop) 206 .on(link, 'mousedown', stop) 207 .on(link, 'dblclick', stop) 208 .on(link, 'click', L.DomEvent.preventDefault) 209 .on(link, 'click', fn, context) 210 .on(link, 'click', this._refocusOnMap, context); 211 212 return link; 213 } 214 215 }); 216 217 new L.Control.ReloadTiles({ 218 }).addTo(map); 219 220 221 // =============================================================================================== 222 // Coordinates control 223 // <div id="info"> 224 // MouseCoords: <span id="pos"></span> 225 // </div> 226 227 L.Control.Coordinates = L.Control.extend({ 228 options: { 229 position: 'bottomleft' 230 }, 231 232 onAdd: function (map) { 233 var name = 'control-coordinates', 234 container = L.DomUtil.create('div', name + ' leaflet-bar'); 235 236 container.innerHTML = "- N / - E" 237 238 this._map = map; 239 this._div = container; 240 241 map.on('mousemove', this._onMouseMove, this); 242 243 return container; 244 }, 245 246 onRemove: function (map) { 247 }, 248 249 _onMouseMove: function (e) { 250 this._div.innerHTML = FormatCoord(e.latlng); 251 } 252 253 254 }); 255 256 new L.Control.Coordinates({ 257 }).addTo(map); 258 259 260 261 262 // =============================================================================================== 263 // Overlays and controls 264 265 var playersOnlineMarkerGroup = L.layerGroup(); 266 var playersOfflineMarkerGroup = L.markerClusterGroup({ 267 maxClusterRadius: function(zoom) { return zoom == MAXZOOM ? 10 : 50; } 268 }); 269 270 271 var landClaimsGroup = L.layerGroup(); 272 var landClaimsClusterGroup = L.markerClusterGroup({ 273 disableClusteringAtZoom: MAXZOOM, 274 singleMarkerMode: true, 275 maxClusterRadius: 50 276 }); 277 var landClaimsRectGroup = L.layerGroup(); 278 landClaimsGroup.addLayer(landClaimsClusterGroup); 279 landClaimsGroup.addLayer(landClaimsRectGroup); 280 var maxZoomForCluster = 4; 281 282 var baseLayers = { 283 //"Map": tileLayer 284 }; 285 286 var overlays = { 287 "Land claims" : landClaimsGroup, 288 "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup, 289 "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup, 290 "Region files": regionLayer, 291 }; 292 293 294 L.control.layers(baseLayers, overlays, { 295 collapsed: false 296 }).addTo(map); 297 298 //map.on('mousemove', function(e) { 299 // L.DomUtil.get('pos').textContent = FormatCoord(e.latlng); 300 //}); 301 302 var miniMap = new L.Control.MiniMap(tileLayerMiniMap, { 303 zoomLevelOffset: -6, 304 toggleDisplay: true 305 }).addTo(map); 306 307 308 var playersMappingList = {}; 309 310 311 312 // =============================================================================================== 313 // Inventory dialog 314 315 var showInv = function(steamid) { 316 $.getJSON( "../api/getplayerinventory", { steamid: steamid }) 317 .done(function(data) { 318 $("#invPlayerName").text(playersMappingList[steamid].name); 319 for (var y = 0; y < BAG_ROWS; y++) { 320 for (var x = 0; x < BAG_COLS; x++) { 321 if (data.bag[y*BAG_COLS+x].count > 0) { 322 $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);"); 323 $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count); 324 } else { 325 $("#bagField"+x+"_"+y).attr("style", "background-image: none;"); 326 $("#bagFieldText"+x+"_"+y).text(""); 327 } 328 } 329 } 330 331 for (var x = 0; x < BELT_COLS; x++) { 332 if (data.belt[x].count > 0) { 333 $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);"); 334 $("#beltFieldText"+x).text(data.belt[x].count); 335 } else { 336 $("#beltField"+x).attr("style", "background-image: none;"); 337 $("#beltFieldText"+x).text(""); 338 } 339 } 340 341 $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({ 342 modal: true, 343 width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20, 344 buttons: { 345 Ok: function() { 346 $( this ).dialog( "close" ); 347 } 348 } 349 }); 350 }) 351 .fail(function(jqxhr, textStatus, error) { 352 console.log("Error fetching player inventory"); 353 }) 354 .always(function() { 355 }); 356 }; 357 358 for (var y = 0; y < BAG_ROWS; y++) { 359 $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>"); 360 for (var x = 0; x < BAG_COLS; x++) { 361 $("#bagRow"+y).append( 362 "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" + 363 "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" + 364 "</td>"); 365 } 366 } 367 368 $("#beltTable").append("<tr id=\"beltRow0\"></tr>"); 369 for (var x = 0; x < BELT_COLS; x++) { 370 $("#beltRow0").append( 371 "<td class=\"invField\" id=\"beltField"+x+"\">" + 372 "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" + 373 "</td>"); 374 } 375 376 377 378 // =============================================================================================== 379 // Player markers 380 381 $(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) { 382 showInv($(this).data('steamid')); 383 }); 384 385 var setPlayerMarkers = function(data) { 386 var online = 0; 387 var offline = 0; 388 $.each( data, function( key, val ) { 389 var marker; 390 if (playersMappingList.hasOwnProperty(val.steamid)) { 391 marker = playersMappingList[val.steamid].currentPosMarker; 392 marker.setLatLng([val.position.x, val.position.z]); 393 } else { 394 marker = L.marker([val.position.x, val.position.z]).bindPopup( 395 "Player: " + val.name + "<br/>" + 396 "<a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>" 397 ); 398 playersMappingList[val.steamid] = { online: !val.online }; 399 } 400 if (playersMappingList[val.steamid].online != val.online) { 401 if (val.online) { 402 marker.setOpacity(1.0); 403 playersOfflineMarkerGroup.removeLayer(marker); 404 playersOnlineMarkerGroup.addLayer(marker); 405 } else { 406 marker.setOpacity(0.5); 407 playersOnlineMarkerGroup.removeLayer(marker); 408 playersOfflineMarkerGroup.addLayer(marker); 409 } 410 } 411 val.currentPosMarker = marker; 412 playersMappingList[val.steamid] = val; 413 414 if (val.online) 415 online++; 416 else 417 offline++; 418 }); 419 $( "#mapControlOnlineCount" ).text( online ); 420 $( "#mapControlOfflineCount" ).text( offline ); 421 } 422 423 var updatePlayerEvent = function() { 424 $.getJSON( "../api/getplayerslocation") 425 .done(setPlayerMarkers) 426 .fail(function(jqxhr, textStatus, error) { 427 console.log("Error fetching players list"); 428 }) 429 .always(function() { 430 window.setTimeout(updatePlayerEvent, 2000); 431 }); 432 } 433 434 window.setTimeout(updatePlayerEvent, 500); 435 436 437 438 // =============================================================================================== 439 // Land claim markers 440 441 var setLandClaims = function(data) { 442 landClaimsClusterGroup.clearLayers(); 443 landClaimsRectGroup.clearLayers(); 444 445 var claimPower = Math.floor(Math.log(data.claimsize) / Math.LN2); 446 var maxClusterZoomUnlimited = MAXZOOM - (claimPower - 3); 447 var maxClusterZoomLimitedMax = Math.min(maxClusterZoomUnlimited, MAXZOOM+1); 448 maxZoomForCluster = Math.max(maxClusterZoomLimitedMax, 0); 449 450 checkClaimClustering({target: map}); 451 452 var sizeHalf = Math.floor(data.claimsize / 2); 453 454 $.each( data.claimowners, function( key, val ) { 455 var steamid = val.steamid; 456 var active = val.claimactive; 457 var color = active ? "#55ff55" : "#ff0000"; 458 459 $.each( val.claims, function( key, val ) { 460 var pos = L.latLng(val.x, val.z); 461 var bounds = L.latLngBounds(L.latLng(val.x - sizeHalf, val.z - sizeHalf), L.latLng(val.x + sizeHalf, val.z + sizeHalf)); 462 var r = L.rectangle(bounds, {color: color, weight: 1, opacity: 0.8, fillOpacity: 0.15}); 463 var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) }); 464 if (playersMappingList.hasOwnProperty(steamid)) { 465 r.bindPopup("Owner: " + playersMappingList[steamid].name); 466 } else { 467 r.bindPopup("Owner: unknown ("+steamid+")"); 468 } 469 landClaimsRectGroup.addLayer(r); 470 landClaimsClusterGroup.addLayer(m); 471 }); 472 }); 473 } 474 475 var updateClaimsEvent = function() { 476 $.getJSON( "../api/getlandclaims") 477 .done(setLandClaims) 478 .fail(function(jqxhr, textStatus, error) { 479 console.log("Error fetching land claim list"); 480 }) 481 .always(function() { 482 //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000); 483 }); 484 } 485 486 487 488 // =============================================================================================== 489 // Layer events 490 491 var updateClaimTimer; 492 map.on('overlayadd', function(e) { 493 if (e.layer == landClaimsGroup) { 494 updateClaimsEvent(); 495 } 496 }); 497 498 map.on('overlayremove', function(e) { 499 if (e.layer == landClaimsGroup) { 500 //window.clearTimeout(updateClaimTimer); 501 } 502 }); 503 504 var checkClaimClustering = function(e) { 505 if (e.target._zoom >= maxZoomForCluster) { 506 landClaimsGroup.removeLayer(landClaimsClusterGroup); 507 } else { 508 landClaimsGroup.addLayer(landClaimsClusterGroup); 509 } 510 }; 511 512 map.on('zoomend', checkClaimClustering); 513 514 } 515 516 517 518 $.getJSON( "../map/mapinfo.json") 519 .done(function(data) { 520 TILESIZE = data.blockSize; 521 MAXZOOM = data.maxZoom; 522 initMap(); 523 }) 524 .fail(function(jqxhr, textStatus, error) { 525 console.log("Error fetching map information"); 526 }) 527 .always(function() { 528 //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000); 36 529 }); 37 530 38 var CoordToChunk = function(latlng) {39 var x = Math.floor(((latlng.lng + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));40 var y = Math.floor(((latlng.lat + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));41 return L.latLng(y, x);42 }43 44 var CoordToRegion = function(latlng) {45 var x = Math.floor(((latlng.lng + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));46 var y = Math.floor(((latlng.lat + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));47 return L.latLng(y, x);48 }49 50 var FormatCoord = function(latlng) {51 return Math.abs(latlng.lat)+ (latlng.lat>=0 ? " N" : " S") + " / " + Math.abs(latlng.lng) + (latlng.lng>=0 ? " E" : " W");52 }53 54 var FormatRegionFileName = function(latlng) {55 return "r." + latlng.lng + "." + latlng.lat + ".7rg";56 }57 58 59 60 // ===============================================================================================61 // Map and basic tile layers62 63 var tileTime = new Date().getTime();64 65 var map = L.map('map', {66 zoomControl: false, // Added by Zoomslider67 zoomsliderControl: true,68 attributionControl: false,69 crs: SDTD_CRS70 }).setView([0, 0], 0);71 72 var tileLayer = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {73 maxZoom: MAXZOOM+1,74 minZoom: 0,75 maxNativeZoom: MAXZOOM,76 tileSize: TILESIZE,77 continuousWorld: true,78 tms: true,79 unloadInvisibleTiles: false,80 time: function() { return tileTime; }81 });82 83 var tileLayerMiniMap = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {84 maxZoom: MAXZOOM,85 minZoom: 0,86 maxNativeZoom: MAXZOOM,87 tileSize: TILESIZE,88 continuousWorld: true,89 tms: true,90 unloadInvisibleTiles: false,91 time: function() { return tileTime; }92 });93 94 var regionLayer = L.tileLayer.canvas({95 maxZoom: MAXZOOM+1,96 minZoom: 0,97 maxNativeZoom: MAXZOOM+1,98 tileSize: TILESIZE,99 continuousWorld: true100 });101 102 regionLayer.drawTile = function(canvas, tilePoint, zoom) {103 var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom);104 var tileLeft = tilePoint.x * blockWorldSize;105 var tileBottom = (-1-tilePoint.y) * blockWorldSize;106 var blockPos = L.latLng(tileBottom, tileLeft);107 108 var ctx = canvas.getContext('2d');109 110 ctx.strokeStyle = "lightblue";111 ctx.fillStyle = "lightblue";112 ctx.lineWidth = 1;113 ctx.font="14px Arial";114 115 var lineCount = blockWorldSize / REGIONSIZE;116 if (lineCount >= 1) {117 var pos = 0;118 while (pos < TILESIZE) {119 // Vertical120 ctx.beginPath();121 ctx.moveTo(pos, 0);122 ctx.lineTo(pos, TILESIZE);123 ctx.stroke();124 125 // Horizontal126 ctx.beginPath();127 ctx.moveTo(0, pos);128 ctx.lineTo(TILESIZE, pos);129 ctx.stroke();130 131 pos += TILESIZE / lineCount;132 }133 ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);134 } else {135 if ((tileLeft % REGIONSIZE) == 0) {136 // Vertical137 ctx.beginPath();138 ctx.moveTo(0, 0);139 ctx.lineTo(0, TILESIZE);140 ctx.stroke();141 }142 if ((tileBottom % REGIONSIZE) == 0) {143 // Horizontal144 ctx.beginPath();145 ctx.moveTo(0, TILESIZE);146 ctx.lineTo(TILESIZE, TILESIZE);147 ctx.stroke();148 }149 if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) {150 ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);151 }152 }153 154 var pos = tileLeft;155 156 }157 158 159 160 // ===============================================================================================161 // Reload control162 163 L.Control.ReloadTiles = L.Control.extend({164 options: {165 position: 'bottomleft'166 },167 168 onAdd: function (map) {169 var name = 'control-reloadtiles',170 container = L.DomUtil.create('div', name + ' leaflet-bar');171 172 this._map = map;173 174 this._reloadbutton = this._createButton(175 "Reload tiles", "Reload tiles",176 name + "-btn", container, this._reload, this);177 178 return container;179 },180 181 onRemove: function (map) {182 },183 184 _reload: function (e) {185 tileTime = new Date().getTime();186 tileLayer.redraw();187 tileLayerMiniMap.redraw();188 },189 190 _createButton: function (html, title, className, container, fn, context) {191 var link = L.DomUtil.create('a', className, container);192 link.innerHTML = html;193 link.href = '#';194 link.title = title;195 196 var stop = L.DomEvent.stopPropagation;197 198 L.DomEvent199 .on(link, 'click', stop)200 .on(link, 'mousedown', stop)201 .on(link, 'dblclick', stop)202 .on(link, 'click', L.DomEvent.preventDefault)203 .on(link, 'click', fn, context)204 .on(link, 'click', this._refocusOnMap, context);205 206 return link;207 }208 209 });210 211 new L.Control.ReloadTiles({212 }).addTo(map);213 214 215 // ===============================================================================================216 // Coordinates control217 // <div id="info">218 // MouseCoords: <span id="pos"></span>219 // </div>220 221 L.Control.Coordinates = L.Control.extend({222 options: {223 position: 'bottomleft'224 },225 226 onAdd: function (map) {227 var name = 'control-coordinates',228 container = L.DomUtil.create('div', name + ' leaflet-bar');229 230 container.innerHTML = "- N / - E"231 232 this._map = map;233 this._div = container;234 235 map.on('mousemove', this._onMouseMove, this);236 237 return container;238 },239 240 onRemove: function (map) {241 },242 243 _onMouseMove: function (e) {244 this._div.innerHTML = FormatCoord(e.latlng);245 }246 247 248 });249 250 new L.Control.Coordinates({251 }).addTo(map);252 253 254 255 // ===============================================================================================256 // Overlays and controls257 258 var playersOnlineMarkerGroup = L.layerGroup();259 var playersOfflineMarkerGroup = L.markerClusterGroup({260 maxClusterRadius: function(zoom) { return zoom == MAXZOOM ? 10 : 50; }261 });262 var landClaimsGroup = L.markerClusterGroup({263 disableClusteringAtZoom: MAXZOOM,264 maxClusterRadius: 50265 });266 267 var baseLayers = {268 //"Map": tileLayer269 };270 271 var overlays = {272 "Land claims" : landClaimsGroup,273 "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup,274 "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,275 "Region files": regionLayer,276 };277 278 tileLayer.addTo(map);279 L.control.layers(baseLayers, overlays, {280 collapsed: false281 }).addTo(map);282 283 //map.on('mousemove', function(e) {284 // L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);285 //});286 287 var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {288 toggleDisplay: true289 }).addTo(map);290 291 292 var playersMappingList = {};293 294 295 296 // ===============================================================================================297 // Inventory dialog298 299 var showInv = function(steamid) {300 $.getJSON( "../api/getplayerinventory", { steamid: steamid })301 .done(function(data) {302 $("#invPlayerName").text(playersMappingList[steamid].name);303 for (var y = 0; y < BAG_ROWS; y++) {304 for (var x = 0; x < BAG_COLS; x++) {305 if (data.bag[y*BAG_COLS+x].count > 0) {306 $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");307 $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);308 } else {309 $("#bagField"+x+"_"+y).attr("style", "background-image: none;");310 $("#bagFieldText"+x+"_"+y).text("");311 }312 }313 }314 315 for (var x = 0; x < BELT_COLS; x++) {316 if (data.belt[x].count > 0) {317 $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");318 $("#beltFieldText"+x).text(data.belt[x].count);319 } else {320 $("#beltField"+x).attr("style", "background-image: none;");321 $("#beltFieldText"+x).text("");322 }323 }324 325 $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({326 modal: true,327 width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20,328 buttons: {329 Ok: function() {330 $( this ).dialog( "close" );331 }332 }333 });334 })335 .fail(function(jqxhr, textStatus, error) {336 console.log("Error fetching player inventory");337 })338 .always(function() {339 });340 };341 342 for (var y = 0; y < BAG_ROWS; y++) {343 $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");344 for (var x = 0; x < BAG_COLS; x++) {345 $("#bagRow"+y).append(346 "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +347 "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +348 "</td>");349 }350 }351 352 $("#beltTable").append("<tr id=\"beltRow0\"></tr>");353 for (var x = 0; x < BELT_COLS; x++) {354 $("#beltRow0").append(355 "<td class=\"invField\" id=\"beltField"+x+"\">" +356 "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +357 "</td>");358 }359 360 361 362 // ===============================================================================================363 // Player markers364 365 $(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {366 showInv($(this).data('steamid'));367 });368 369 var setPlayerMarkers = function(data) {370 var online = 0;371 var offline = 0;372 $.each( data, function( key, val ) {373 var marker;374 if (playersMappingList.hasOwnProperty(val.steamid)) {375 marker = playersMappingList[val.steamid].currentPosMarker;376 marker.setLatLng([val.position.z, val.position.x]);377 } else {378 marker = L.marker([val.position.z, val.position.x]).bindPopup(379 "Player: " + val.name + "<br/>" +380 "<a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"381 );382 playersMappingList[val.steamid] = { online: !val.online };383 }384 if (playersMappingList[val.steamid].online != val.online) {385 if (val.online) {386 marker.setOpacity(1.0);387 playersOfflineMarkerGroup.removeLayer(marker);388 playersOnlineMarkerGroup.addLayer(marker);389 } else {390 marker.setOpacity(0.5);391 playersOnlineMarkerGroup.removeLayer(marker);392 playersOfflineMarkerGroup.addLayer(marker);393 }394 }395 val.currentPosMarker = marker;396 playersMappingList[val.steamid] = val;397 398 if (val.online)399 online++;400 else401 offline++;402 });403 $( "#mapControlOnlineCount" ).text( online );404 $( "#mapControlOfflineCount" ).text( offline );405 }406 407 var updatePlayerEvent = function() {408 $.getJSON( "../api/getplayerslocation")409 .done(setPlayerMarkers)410 .fail(function(jqxhr, textStatus, error) {411 console.log("Error fetching players list");412 })413 .always(function() {414 window.setTimeout(updatePlayerEvent, 2000);415 });416 }417 418 window.setTimeout(updatePlayerEvent, 500);419 420 421 422 // ===============================================================================================423 // Land claim markers424 425 var setLandClaims = function(data) {426 landClaimsGroup.clearLayers();427 var sizeHalf = Math.floor(data.claimsize / 2);428 429 $.each( data.claimowners, function( key, val ) {430 var steamid = val.steamid;431 var active = val.claimactive;432 var color = active ? "#00ff00" : "#ff0000";433 434 $.each( val.claims, function( key, val ) {435 var pos = L.latLng(val.z, val.x);436 var bounds = L.latLngBounds(L.latLng(val.z - sizeHalf, val.x - sizeHalf), L.latLng(val.z + sizeHalf, val.x + sizeHalf));437 var r = L.rectangle(bounds, {color: color, weight: 1});438 var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });439 if (playersMappingList.hasOwnProperty(steamid)) {440 r.bindPopup("Owner: " + playersMappingList[steamid].name);441 } else {442 r.bindPopup("Owner: unknown ("+steamid+")");443 }444 landClaimsGroup.addLayer(r);445 landClaimsGroup.addLayer(m);446 });447 });448 }449 450 var updateClaimsEvent = function() {451 $.getJSON( "../api/getlandclaims")452 .done(setLandClaims)453 .fail(function(jqxhr, textStatus, error) {454 console.log("Error fetching land claim list");455 })456 .always(function() {457 //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000);458 });459 }460 461 462 463 // ===============================================================================================464 // Layer events465 466 var updateClaimTimer;467 map.on('overlayadd', function(e) {468 if (e.layer == landClaimsGroup) {469 updateClaimsEvent();470 }471 });472 473 map.on('overlayremove', function(e) {474 if (e.layer == landClaimsGroup) {475 //window.clearTimeout(updateClaimTimer);476 }477 });478 479
Note:
See TracChangeset
for help on using the changeset viewer.