Ignore:
Timestamp:
Sep 7, 2014, 8:15:51 PM (10 years ago)
Author:
alloc
Message:

LandClaims on webmap

Location:
binary-improvements/webserver
Files:
15 added
2 edited

Legend:

Unmodified
Added
Removed

  • binary-improvements/webserver/index.html

    r171 r173  
    44        <meta charset="UTF-8">
    55        <title>7dtd map browser</title>
     6       
     7        <!-- Own stylesheet -->
     8        <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
     9
     10        <!-- jQuery -->
     11        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
     12
     13        <!-- jQuery UI -->
     14        <link rel="stylesheet" href="jquery-ui/jquery-ui.min.css" type="text/css" />
     15        <script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
     16
     17        <!-- Leaflet -->
    618        <link rel="stylesheet prefetch" href="leaflet/leaflet.css">
    7         <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    8         <link rel="stylesheet" href="jquery-ui/jquery-ui.min.css" type="text/css" />
    919        <script type="text/javascript" src="leaflet/leaflet.js"></script>
    10         <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    11         <script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
    12         </head>
     20
     21        <!-- Leaflet MarkerCluster -->
     22        <link rel="stylesheet" href="leaflet/markercluster/MarkerCluster.css" />
     23        <link rel="stylesheet" href="leaflet/markercluster/MarkerCluster.Default.css" />
     24        <script type="text/javascript" src="leaflet/markercluster/leaflet.markercluster.js"></script>
     25
     26        <!-- Leaflet Zoomslider -->
     27        <link rel="stylesheet" href="leaflet/zoomslider/L.Control.Zoomslider.css" />
     28        <script type="text/javascript" src="leaflet/zoomslider/L.Control.Zoomslider.js"></script>
     29
     30        <!-- Leaflet MiniMap -->
     31        <link rel="stylesheet" href="leaflet/minimap/Control.MiniMap.css" />
     32        <script type="text/javascript" src="leaflet/minimap/Control.MiniMap.js"></script>
     33
     34</head>
    1335<body>
    1436        <div id="map"></div>

  • binary-improvements/webserver/js/index.js

    r171 r173  
     1// ===============================================================================================
     2// Constants
     3
    14var REGIONSIZE = 512;
    25var CHUNKSIZE = 16;
    … …  
    1013var INV_ITEM_HEIGHT = 40;
    1114
     15
     16// ===============================================================================================
     17// 7dtd coordinate transformations
     18
    1219SDTD_Projection = {
    1320        project: function (latlng) {
    … …  
    4956}
    5057
     58
     59
     60// ===============================================================================================
     61// Map and basic tile layers
     62
    5163var map = L.map('map', {
    52         zoomControl: true,
     64        zoomControl: false, // Added by Zoomslider
     65        zoomsliderControl: true,
    5366        attributionControl: false,
    5467        crs: SDTD_CRS
    … …  
    5770var tileLayer = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
    5871        maxZoom: MAXZOOM+1,
     72        minZoom: 0,
     73        maxNativeZoom: MAXZOOM,
     74        tileSize: TILESIZE,
     75        continuousWorld: true,
     76        tms: true,
     77        unloadInvisibleTiles: true,
     78        time: function() { return new Date().getTime(); }
     79});
     80
     81var tileLayerMiniMap = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
     82        maxZoom: MAXZOOM,
    5983        minZoom: 0,
    6084        maxNativeZoom: MAXZOOM,
    … …  
    130154}
    131155
     156
     157// ===============================================================================================
     158// Overlays
     159
    132160var playersOnlineMarkerGroup = L.layerGroup();
    133 var playersOfflineMarkerGroup = L.layerGroup();
     161var playersOfflineMarkerGroup = L.markerClusterGroup();
     162var landClaimsGroup = L.markerClusterGroup({
     163        disableClusteringAtZoom: MAXZOOM,
     164        maxClusterRadius: 50
     165});
    134166
    135167var baseLayers = {
    136     //"Map": tileLayer
     168        //"Map": tileLayer
    137169};
    138170
    139171var overlays = {
    140     "Region files": regionLayer,
    141     "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,
    142     "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup
     172        "Land claims" : landClaimsGroup,
     173        "Players (offline) (<span id='mapControlOfflineCount'>0</span>)" : playersOfflineMarkerGroup,
     174        "Players (online) (<span id='mapControlOnlineCount'>0</span>)" : playersOnlineMarkerGroup,
     175        "Region files": regionLayer,
    143176};
    144177
    … …  
    152185});
    153186
     187var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
     188        toggleDisplay: true
     189}).addTo(map);
     190
     191
     192
    154193var playersMappingList = {};
     194
     195
     196
     197// ===============================================================================================
     198// Inventory dialog
    155199
    156200var showInv = function(steamid) {
    … …  
    215259}
    216260
     261
     262
     263// ===============================================================================================
     264// Player markers
     265
    217266$(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
    218267        showInv($(this).data('steamid'));
    … …  
    270319window.setTimeout(updatePlayerEvent, 500);
    271320
     321
     322
     323// ===============================================================================================
     324// Land claim markers
     325
     326var setLandClaims = function(data) {
     327        landClaimsGroup.clearLayers();
     328        var sizeHalf = Math.floor(data.claimsize / 2);
     329
     330        $.each( data.claimowners, function( key, val ) {
     331                var steamid = val.steamid;
     332                var active = val.claimactive;
     333                var color = active ? "#00ff00" : "#ff0000";
     334               
     335                $.each( val.claims, function( key, val ) {
     336                        var pos = L.latLng(val.z, val.x);
     337                        var bounds = L.latLngBounds(L.latLng(val.z - sizeHalf, val.x - sizeHalf), L.latLng(val.z + sizeHalf, val.x + sizeHalf));
     338                        var r = L.rectangle(bounds, {color: color, weight: 1});
     339                        var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });
     340                        r.bindPopup("Owner: " + playersMappingList[steamid].name);
     341                        landClaimsGroup.addLayer(r);
     342                        landClaimsGroup.addLayer(m);
     343                });
     344        });
     345}
     346
     347var updateClaimsEvent = function() {
     348        $.getJSON( "../api/getlandclaims")
     349        .done(setLandClaims)
     350        .fail(function(jqxhr, textStatus, error) {
     351                console.log("Error fetching land claim list");
     352        })
     353        .always(function() {
     354                window.setTimeout(updateClaimsEvent, 5000);
     355        });
     356}
     357
     358window.setTimeout(updateClaimsEvent, 750);
     359
Note: See TracChangeset for help on using the changeset viewer.