source: binary-improvements/webserver/js/map.js@ 301

Last change on this file since 301 was 253, checked in by alloc, 9 years ago

Fixes 6_8_10
File size: 11.4 KB
RevLine 
[245]1var mapinfo = {
2 regionsize: 512,
3 chunksize: 16,
4 tilesize: 128,
5 maxzoom: 4
6}
7
8function InitMap() {
9 // ===============================================================================================
10 // 7dtd coordinate transformations
11
12 SDTD_Projection = {
13 project: function (latlng) {
14 return new L.Point(
15 (latlng.lat) / Math.pow(2, mapinfo.maxzoom),
16 (latlng.lng) / Math.pow(2, mapinfo.maxzoom) );
17 },
18
19 unproject: function (point) {
20 return new L.LatLng(
21 point.x * Math.pow(2, mapinfo.maxzoom),
22 point.y * Math.pow(2, mapinfo.maxzoom) );
23 }
24 };
25
26 SDTD_CRS = L.extend({}, L.CRS.Simple, {
27 projection: SDTD_Projection,
28 transformation: new L.Transformation(1, 0, -1, 0),
29
30 scale: function (zoom) {
31 return Math.pow(2, zoom);
32 }
33 });
34
35 // ===============================================================================================
36 // Map and basic tile layers
37
38 map = L.map('tab_map', {
39 zoomControl: false, // Added by Zoomslider
40 zoomsliderControl: true,
41 attributionControl: false,
42 crs: SDTD_CRS
43 }).setView([0, 0], Math.max(0, mapinfo.maxzoom - 5));
44
45
[249]46 var initTime = new Date().getTime();
47 var tileLayer = GetSdtdTileLayer (mapinfo, initTime);
48 var tileLayerMiniMap = GetSdtdTileLayer (mapinfo, initTime, true);
[245]49
[251]50 // player icon
51 var playerIcon = L.icon({
52 iconUrl: '/static/leaflet/images/marker-survivor.png',
53 iconRetinaUrl: '/static/leaflet/images/marker-survivor-2x.png',
54 iconSize: [25, 48],
55 iconAnchor: [12, 24],
56 popupAnchor: [0, -20]
57 });
58
59 // hostile icon
60 var hostileIcon = L.icon({
61 iconUrl: '/static/leaflet/images/marker-zombie.png',
62 iconRetinaUrl: '/static/leaflet/images/marker-zombie-2x.png',
63 iconSize: [25, 33],
64 iconAnchor: [12, 16],
65 popupAnchor: [0, -10]
66 });
67
68 // animal icon
69 var animalIcon = L.icon({
70 iconUrl: '/static/leaflet/images/marker-animal.png',
71 iconRetinaUrl: '/static/leaflet/images/marker-animal-2x.png',
72 iconSize: [25, 26],
73 iconAnchor: [12, 13],
74 popupAnchor: [0, -10]
75 });
76
[245]77
78
79 // ===============================================================================================
80 // Overlays and controls
81
82 var playersOnlineMarkerGroup = L.markerClusterGroup({
83 maxClusterRadius: function(zoom) { return zoom == mapinfo.maxzoom ? 10 : 50; }
84 });
85 var playersOfflineMarkerGroup = L.markerClusterGroup({
86 maxClusterRadius: function(zoom) { return zoom == mapinfo.maxzoom ? 10 : 50; }
87 });
[251]88 var hostilesMarkerGroup = L.markerClusterGroup({
89 maxClusterRadius: function(zoom) { return zoom == mapinfo.maxzoom ? 10 : 50; }
90 });
91 var animalsMarkerGroup = L.markerClusterGroup({
92 maxClusterRadius: function(zoom) { return zoom == mapinfo.maxzoom ? 10 : 50; }
93 });
[245]94
95
[249]96 var layerControl = L.control.layers({
97 //"Map": tileLayer
98 }, null, {
99 collapsed: false
100 }
101 );
[245]102
103 var layerCount = 0;
104
105
106 tileLayer.addTo(map);
[249]107
[245]108 new L.Control.Coordinates({}).addTo(map);
[249]109
110 new L.Control.ReloadTiles({
111 autoreload_enable: true,
112 autoreload_minInterval: 30,
113 autoreload_interval: 120,
114 autoreload_defaultOn: false,
115 layers: [tileLayer, tileLayerMiniMap]
116 }).addTo(map);
117
[245]118 layerControl.addOverlay (GetRegionLayer (mapinfo), "Region files");
[249]119
[245]120 var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
121 zoomLevelOffset: -6,
122 toggleDisplay: true
123 }).addTo(map);
124
[249]125 var measure = L.control.measure({
[253]126 units: {
127 sdtdMeters: {
128 factor: 0.00001,
129 display: 'XMeters',
130 decimals: 0
131 },
132 sdtdSqMeters: {
133 factor: 0.000000001,
134 display: 'XSqMeters',
135 decimals: 0
136 }
137 },
138 primaryLengthUnit: "sdtdMeters",
139 primaryAreaUnit: "sdtdSqMeters",
[249]140 //activeColor: "#ABE67E",
141 //completedColor: "#C8F2BE",
142 position: "bottomleft"
143 });
144 //measure.addTo(map);
145
146 //new L.Control.GameTime({}).addTo(map);
147
[245]148 if (HasPermission ("webapi.getlandclaims")) {
149 layerControl.addOverlay (GetLandClaimsLayer (map, mapinfo), "Land claims");
150 layerCount++;
151 }
[249]152
[251]153 if (HasPermission ("webapi.gethostilelocation")) {
154 layerControl.addOverlay (hostilesMarkerGroup, "Hostiles (<span id='mapControlHostileCount'>0</span>)");
155 layerCount++;
156 }
157
158 if (HasPermission ("webapi.getanimalslocation")) {
159 layerControl.addOverlay (animalsMarkerGroup, "Animals (<span id='mapControlAnimalsCount'>0</span>)");
160 layerCount++;
161 }
162
[245]163 if (HasPermission ("webapi.getplayerslocation")) {
164 layerControl.addOverlay (playersOfflineMarkerGroup, "Players (offline) (<span id='mapControlOfflineCount'>0</span>)");
165 layerControl.addOverlay (playersOnlineMarkerGroup, "Players (online) (<span id='mapControlOnlineCount'>0</span>)");
166 layerCount++;
167 }
168
169 if (layerCount > 0) {
170 layerControl.addTo(map);
171 }
172
173
174
175
[251]176 var hostilesMappingList = {};
177 var animalsMappingList = {};
[245]178 var playersMappingList = {};
179
[251]180
[245]181
182 // ===============================================================================================
183 // Player markers
184
185 $(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
186 ShowInventoryDialog ($(this).data('steamid'));
187 });
188
[250]189 var openedPopup = null;
190 var updatingMarkers = false;
191
192 map.on ("popupopen", function (event) {
193 console.log ("open");
194 console.log (event.popup._source);
195 openedPopup = event.popup._source;
196 });
197 map.on ("popupclose", function (event) {
198 if (!updatingMarkers) {
199 console.log ("close");
200 openedPopup = null;
201 }
202 });
203
[245]204 var setPlayerMarkers = function(data) {
205 var online = 0;
206 var offline = 0;
[250]207 updatingMarkers = true;
[245]208 $.each( data, function( key, val ) {
209 var marker;
210 if (playersMappingList.hasOwnProperty(val.steamid)) {
211 marker = playersMappingList[val.steamid].currentPosMarker;
212 } else {
[251]213 marker = L.marker([val.position.x, val.position.z], {icon: playerIcon}).bindPopup(
[245]214 "Player: " + val.name +
215 (HasPermission ("webapi.getplayerinventory") ?
216 "<br/><a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
217 : "")
218 );
219 playersMappingList[val.steamid] = { online: !val.online };
220 }
[250]221
222 oldpos = marker.getLatLng ();
223 if ( playersMappingList[val.steamid].online != val.online || oldpos.lat != val.position.x || oldpos.lng != val.position.z ) {
224 if (playersMappingList[val.steamid].online) {
225 playersOnlineMarkerGroup.removeLayer(marker);
226 } else {
227 playersOfflineMarkerGroup.removeLayer(marker);
228 }
229 marker.setLatLng([val.position.x, val.position.z]);
230 if (val.online) {
231 marker.setOpacity(1.0);
232 playersOnlineMarkerGroup.addLayer(marker);
233 } else {
234 marker.setOpacity(0.5);
235 playersOfflineMarkerGroup.addLayer(marker);
236 }
[249]237 }
238
[245]239 val.currentPosMarker = marker;
240 playersMappingList[val.steamid] = val;
241
242 if (val.online)
243 online++;
244 else
245 offline++;
246 });
[250]247 updatingMarkers = false;
248 if (openedPopup != null) {
249 openedPopup.openPopup ();
250 }
[245]251 $( "#mapControlOnlineCount" ).text( online );
252 $( "#mapControlOfflineCount" ).text( offline );
253 }
254
[250]255 var updatePlayerTimeout;
[245]256 var updatePlayerEvent = function() {
257 $.getJSON( "../api/getplayerslocation")
258 .done(setPlayerMarkers)
259 .fail(function(jqxhr, textStatus, error) {
260 console.log("Error fetching players list");
261 })
262 .always(function() {
[250]263 updatePlayerTimeout = window.setTimeout(updatePlayerEvent, 4000);
[245]264 });
265 }
266
[250]267 tabs.on ("tabbedcontenttabopened", function (event, data) {
268 if (data.newTab === "#tab_map") {
269 if (HasPermission ("webapi.getplayerslocation")) {
270 updatePlayerEvent ();
271 }
272 } else {
273 window.clearTimeout (updatePlayerTimeout);
274 }
275 });
276
277 if (tabs.tabbedContent ("isTabOpen", "tab_map")) {
278 if (HasPermission ("webapi.getplayerslocation")) {
279 updatePlayerEvent ();
280 }
[245]281 }
282
283
[251]284
285
286 // ===============================================================================================
287 // Hostiles markers
288
289 var setHostileMarkers = function(data) {
290 updatingMarkersHostile = true;
291
292 var hostileCount = 0;
293
294 hostilesMarkerGroup.clearLayers();
295
296 $.each( data, function( key, val ) {
297 var marker;
298 if (hostilesMappingList.hasOwnProperty(val.id)) {
299 marker = hostilesMappingList[val.id].currentPosMarker;
300 } else {
301 marker = L.marker([val.position.x, val.position.z], {icon: hostileIcon}).bindPopup(
302 "Hostile: " + val.name
303 );
304 //hostilesMappingList[val.id] = { };
305 hostilesMarkerGroup.addLayer(marker);
306 }
307
308 var bAbort = false;
309
310 oldpos = marker.getLatLng ();
311
312 //if ( oldpos.lat != val.position.x || oldpos.lng != val.position.z ) {
313 // hostilesMarkerGroup.removeLayer(marker);
314 marker.setLatLng([val.position.x, val.position.z]);
315 marker.setOpacity(1.0);
316 hostilesMarkerGroup.addLayer(marker);
317 //}
318
319 val.currentPosMarker = marker;
320 hostilesMappingList[val.id] = val;
321
322 hostileCount++;
323 });
324
325 $( "#mapControlHostileCount" ).text( hostileCount );
326
327 updatingMarkersHostile = false;
328 }
329
330 var updateHostileTimeout;
331 var updateHostileEvent = function() {
332 $.getJSON( "../api/gethostilelocation")
333 .done(setHostileMarkers)
334 .fail(function(jqxhr, textStatus, error) {
335 console.log("Error fetching hostile list");
336 })
337 .always(function() {
338 updateHostileTimeout = window.setTimeout(updateHostileEvent, 4000);
339 });
340 }
341
342 tabs.on ("tabbedcontenttabopened", function (event, data) {
343 if (data.newTab === "#tab_map") {
344 if (HasPermission ("webapi.gethostilelocation")) {
345 updateHostileEvent ();
346 }
347 } else {
348 window.clearTimeout (updateHostileTimeout);
349 }
350 });
351
352 if (tabs.tabbedContent ("isTabOpen", "tab_map")) {
353 if (HasPermission ("webapi.gethostilelocation")) {
354 updateHostileEvent ();
355 }
356 }
357
358
359
360 // ===============================================================================================
361 // Animals markers
362
363 var setAnimalMarkers = function(data) {
364 updatingMarkersAnimals = true;
365
366 var animalsCount = 0;
367
368 animalsMarkerGroup.clearLayers();
369
370 $.each( data, function( key, val ) {
371 var marker;
372 if (animalsMappingList.hasOwnProperty(val.id)) {
373 marker = animalsMappingList[val.id].currentPosMarker;
374 } else {
375 marker = L.marker([val.position.x, val.position.z], {icon: animalIcon}).bindPopup(
376 "Animal: " + val.name
377 );
378 //animalsMappingList[val.id] = { };
379 animalsMarkerGroup.addLayer(marker);
380 }
381
382 var bAbort = false;
383
384 oldpos = marker.getLatLng ();
385
386 //if ( oldpos.lat != val.position.x || oldpos.lng != val.position.z ) {
387 // animalsMarkerGroup.removeLayer(marker);
388 marker.setLatLng([val.position.x, val.position.z]);
389 marker.setOpacity(1.0);
390 animalsMarkerGroup.addLayer(marker);
391 //}
392
393 val.currentPosMarker = marker;
394 animalsMappingList[val.id] = val;
395
396 animalsCount++;
397 });
398
399 $( "#mapControlAnimalsCount" ).text( animalsCount );
400
401 updatingMarkersAnimals = false;
402 }
403
404 var updateAnimalsTimeout;
405 var updateAnimalsEvent = function() {
406 $.getJSON( "../api/getanimalslocation")
407 .done(setAnimalMarkers)
408 .fail(function(jqxhr, textStatus, error) {
409 console.log("Error fetching animals list");
410 })
411 .always(function() {
412 updateAnimalsTimeout = window.setTimeout(updateAnimalsEvent, 4000);
413 });
414 }
415
416 tabs.on ("tabbedcontenttabopened", function (event, data) {
417 if (data.newTab === "#tab_map") {
418 if (HasPermission ("webapi.getanimalslocation")) {
419 updateAnimalsEvent ();
420 }
421 } else {
422 window.clearTimeout (updateAnimalsTimeout);
423 }
424 });
425
426 if (tabs.tabbedContent ("isTabOpen", "tab_map")) {
427 if (HasPermission ("webapi.getanimalslocation")) {
428 updateAnimalsEvent ();
429 }
430 }
431
[245]432}
433
434
435
436
437
438function StartMapModule () {
439 $.getJSON( "../map/mapinfo.json")
440 .done(function(data) {
441 mapinfo.tilesize = data.blockSize;
442 mapinfo.maxzoom = data.maxZoom;
443 })
444 .fail(function(jqxhr, textStatus, error) {
445 console.log ("Error fetching map information");
446 })
447 .always(function() {
448 InitMap ();
449 });
450}
451
452
Note: See TracBrowser for help on using the repository browser.