geo json layer

server/static/index.html

@@ -31,8 +31,11 @@
 
     <!-- overlays -->
     <script src="js/overlays/AbstractIconOverlay.js"></script>
+    <script src="js/overlays/AbstractGeoJsonOverlay.js"></script>
     <script src="js/overlays/TravelnetOverlay.js"></script>
+    <script src="js/overlays/PoiOverlay.js"></script>
     <script src="js/overlays/PlayerOverlay.js"></script>
+    <script src="js/overlays/ProtectorOverlay.js"></script>
 
     <!-- bootstrap -->
     <script src="js/main.js"></script>

server/static/js/main.js

@@ -5,8 +5,6 @@ api.getConfig().then(function(cfg){
   var wsChannel = new WebSocketChannel();
   wsChannel.connect();
 
-  var rtTiles = new RealtimeTileLayer(wsChannel);
-
   var initialZoom = 11;
   var initialCenter = [0, 0];
 
@@ -28,19 +26,20 @@ api.getConfig().then(function(cfg){
   var tileLayer = new RealtimeTileLayer(wsChannel, 0);
   tileLayer.addTo(map);
 
+  //TODO: all layers
   layers["Base"] = tileLayer;
-  overlays["Players"] = new PlayerOverlay(wsChannel, layerMgr);
+
+  overlays["Player"] = new PlayerOverlay(wsChannel, layerMgr);
+  overlays["POI"] = new PoiOverlay(wsChannel, layerMgr);
   overlays["Travelnet"] = new TravelnetOverlay(wsChannel, layerMgr);
+  overlays["Protector"] = new ProtectorOverlay(wsChannel, layerMgr);
 
   map.addLayer(overlays["Players"]);
 
   L.control.layers(layers, overlays).addTo(map);
 
-  var el = new CoordinatesDisplay({ position: 'bottomleft' });
-  el.addTo(map);
-
-  el = new WorldInfoDisplay(wsChannel, { position: 'bottomright' });
-  el.addTo(map);
+  new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map);
+  new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map);
 
 }).catch(function(e){
   console.error(e);

server/static/js/overlays/AbstractGeoJsonOverlay.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var AbstractGeoJsonOverlay = L.LayerGroup.extend({
+  initialize: function(wsChannel, layerMgr, type) {
+    L.LayerGroup.prototype.initialize.call(this);
+
+    this.layerMgr = layerMgr;
+    this.wsChannel = wsChannel;
+    this.type = type;
+
+    this.onLayerChange = this.onLayerChange.bind(this);
+    this.onMapMove = debounce(this.onMapMove.bind(this), 50);
+  },
+
+  onLayerChange: function(layer){
+    this.reDraw();
+  },
+
+  onMapMove: function(){
+    this.reDraw();
+  },
+
+  createGeoJson: function(objects){
+    var self = this;
+
+    var geoJsonLayer = L.geoJSON([], {
+        onEachFeature: function(feature, layer){
+            if (feature.properties && feature.properties.popupContent) {
+                      layer.bindPopup(feature.properties.popupContent);
+                  }
+        }
+    });
+
+    objects.forEach(function(obj){
+      geoJsonLayer.addData(self.createFeature(obj));
+    });
+
+    return geoJsonLayer;
+  },
+
+  reDraw: function(){
+    var self = this;
+
+    if (this._map.getZoom() < 10) {
+      this.clearLayers();
+      return;
+    }
+
+    var mapLayer = this.layerMgr.getCurrentLayer()
+    var min = this._map.getBounds().getSouthWest();
+    var max = this._map.getBounds().getNorthEast();
+
+    var y1 = parseInt(mapLayer.from/16);
+    var y2 = parseInt(mapLayer.to/16);
+    var x1 = parseInt(min.lng);
+    var x2 = parseInt(max.lng);
+    var z1 = parseInt(min.lat);
+    var z2 = parseInt(max.lat);
+
+    api.getMapObjects(
+      x1, y1, y1,
+      x2, y2, z2,
+      this.type)
+    .then(function(objects){
+      self.clearLayers();
+
+      var geoJsonLayer = createGeoJson(objects);
+      geoJsonLayer.addTo(self);
+    })
+
+  },
+
+  onAdd: function(map) {
+    map.on("zoomend", this.onMapMove);
+    map.on("moveend", this.onMapMove);
+    this.layerMgr.addListener(this.onLayerChange);
+    this.reDraw(true)
+  },
+
+  onRemove: function(map) {
+    this.clearLayers();
+    map.off("zoomend", this.onMapMove);
+    map.off("moveend", this.onMapMove);
+    this.layerMgr.removeListener(this.onLayerChange);
+  }
+
+});

server/static/js/overlays/PoiOverlay.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var PoiOverlay = AbstractIconOverlay.extend({
+  initialize: function(wsChannel, layerMgr) {
+    AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "poi", L.Icon.Default);
+  },
+
+  createPopup: function(poi){
+    return "<h4>" + poi.attributes.name + "</h4><hr>" +
+      "<b>Owner: </b> " + poi.attributes.owner + "<br>";
+  }
+});

server/static/js/overlays/ProtectorOverlay.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var ProtectorOverlay = AbstractGeoJsonOverlay.extend({
+  initialize: function(wsChannel, layerMgr) {
+    AbstractGeoJsonOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "protector");
+  },
+
+  createFeature: function(protector){
+    return {
+      "type":"Feature",
+      "geometry": {
+        "type":"Polygon",
+        "coordinates":[[
+            [protector.x-5,protector.z-5],
+            [protector.x-5,protector.z+6],
+            [protector.x+6,protector.z+6],
+            [protector.x+6,protector.z-5],
+            [protector.x-5,protector.z-5]
+        ]]
+      },
+      "properties":{
+          "name": protector.attributes.owner,
+          "popupContent": protector.attributes.owner
+      }
+    };
+  }
+});