feat: merge web improvements from PR #42 (cloud tiling, layer controls)

.gitignore

@@ -1,5 +1,6 @@
 # IDE
 .idea
+.vscode
 
 # Build artifacts
 /ocap-webserver
@@ -9,6 +10,7 @@
 data.db
 data/
 maps/
+setting.json
 static/data
 static/images/maps
 

README.md

@@ -168,16 +168,19 @@ docker run --name ocap-web -d \
 This Project is based on [Golang](https://golang.org/dl/)
 
 ### Windows
+
 ```bash
 go build -o ocap-webserver.exe ./cmd
 ```
 
 ### Linux
+
 ```bash
 go build -o ocap-webserver ./cmd
 ```
 
 ### Docker
+
 ```bash
 docker build -t ocap-webserver .
 ```

setting.json.example

@@ -0,0 +1,25 @@
+{
+	"listen": "127.0.0.1:5000",
+	"prefixURL": "",
+	"secret": "change-me",
+	"db": "data.db",
+	"markers": "assets/markers",
+	"ammo": "assets/ammo",
+	"maps": "maps",
+	"data": "data",
+	"static": "static",
+	"logger": false,
+	"customize": {
+		"websiteURL": "",
+		"websiteLogo": "",
+		"websiteLogoSize": "32px",
+		"disableKillCount": false
+	},
+	"conversion": {
+		"enabled": false,
+		"interval": "5m",
+		"batchSize": 1,
+		"chunkSize": 300,
+		"storageEngine": "protobuf"
+	}
+}

static/index.html

@@ -8,12 +8,17 @@
 	<link rel="stylesheet" href="style/common.css" />
 	<link rel="stylesheet" href="style/index.css" />
 	<link rel="icon" type="img/png" href="images/favicon.png" />
+	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 	<script src="leaflet/leaflet-src.js"></script>
 	<script src="leaflet/leaflet.rotatedMarker.js"></script>
 	<script src="leaflet/leaflet.svgIcon.js"></script>
 	<script src="leaflet/leaflet.pattern.js"></script>
 	<script src="leaflet/L.Icon.Pulse.js"></script>
 	<link rel="stylesheet" href="leaflet/L.Icon.Pulse.css" />
+	<link rel="stylesheet" href="leaflet/L.Control.Zoominfo.css" />
+	<script src="leaflet/L.Control.Zoominfo.js"></script>
+	<link rel="stylesheet" href="leaflet/L.Control.Basemaps.css" />
+	<script src="leaflet/L.Control.Basemaps.js"></script>
 	<script src="scripts/ocap.marker.js"></script>
 	<script src="scripts/ocap.entity.js"></script>
 	<script src="scripts/ocap.event.js"></script>

static/leaflet/L.Control.Basemaps.css

@@ -0,0 +1,28 @@
+.basemaps {
+    padding: 4px;
+}
+.basemaps.closed .basemap {
+    display: none;
+}
+.basemaps.closed .basemap.alt {
+    display: inline-block;
+}
+.basemaps.closed .basemap.alt h4 {
+    display: none;
+}
+
+.basemap {
+    display: inline-block; /* todo: flexbox? */
+    cursor: pointer;
+}
+.basemap.active img {
+    border-color: orange;
+    box-shadow: 2px 2px 4px #000;
+}
+.basemap img {
+    width: 64px;
+    border: 2px solid #FFF;
+    margin: 0 2px;
+    border-radius: 40px;
+    box-shadow: 0 1px 5px rgba(0,0,0,0.65)
+}

static/leaflet/L.Control.Zoominfo.css

@@ -0,0 +1,124 @@
+/** Slider **/
+.leaflet-control-zoominfo-wrap {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+}
+.leaflet-control-zoominfo-body {
+  width: 2px;
+  border: solid #fff;
+  border-width: 0px 9px 0px 9px;
+  background-color: black;
+  margin: 0 auto;
+}
+
+.leaflet-control-zoominfo-body:hover {
+  cursor: pointer;
+}
+
+.leaflet-dragging .leaflet-control-zoominfo,
+.leaflet-dragging .leaflet-control-zoominfo-wrap,
+.leaflet-dragging .leaflet-control-zoominfo-body,
+.leaflet-dragging .leaflet-control-zoominfo a,
+.leaflet-dragging .leaflet-control-zoominfo a.leaflet-control-zoominfo-disabled {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor:    -moz-grabbing;
+}
+
+/** Leaflet Zoom Styles **/
+.leaflet-container .leaflet-control-zoominfo {
+  margin-left: 10px;
+  margin-top: 10px;
+}
+.leaflet-control-zoominfo a {
+  width: 26px;
+  height: 26px;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+  display: block;
+}
+.leaflet-control-zoominfo a:hover {
+  background-color: #f4f4f4;
+}
+.leaflet-control-zoominfo-in {
+  font: bold 18px 'Lucida Console', Monaco, monospace;
+}
+.leaflet-control-zoominfo-in:after{
+  content:"+"
+}
+.leaflet-control-zoominfo-out {
+  font: bold 22px 'Lucida Console', Monaco, monospace;
+}
+.leaflet-control-zoominfo-out:after{
+  content:"−"
+}
+.leaflet-control-zoominfo a.leaflet-control-zoominfo-disabled {
+  cursor: default;
+  color: #bbb;
+}
+
+/* Touch */
+.leaflet-touch .leaflet-control-zoominfo-body {
+  background-position: 10px 0px;
+}
+.leaflet-touch .leaflet-control-zoominfo a {
+  width: 30px;
+  line-height: 30px;
+}
+.leaflet-touch .leaflet-control-zoominfo a:hover {
+  width: 30px;
+  line-height: 30px;
+}
+.leaflet-touch .leaflet-control-zoominfo-in {
+  font-size: 24px;
+  line-height: 29px;
+}
+.leaflet-touch .leaflet-control-zoominfo-out {
+  font-size: 28px;
+  line-height: 30px;
+}
+.leaflet-touch .leaflet-control-zoominfo {
+  box-shadow: none;
+  border: 4px solid rgba(0,0,0,0.3);
+}
+
+.leaflet-control-zoominfo-info { 
+  margin-left: -13px;
+  background-color: #fff;
+  border: none;
+  width: 22px;
+  height: 22px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: black;
+  padding: 4px 4px 0px 3px;
+
+  border-radius: 4px; 
+  cursor: default;
+}
+
+.leaflet-control-zoominfoinfo h4 { 
+  margin: 0 0 0px 0px; 
+  color: #000; 
+}
+
+/* Old IE */
+
+.leaflet-oldie .leaflet-control-zoominfo-wrap {
+  width: 26px;
+}
+
+.leaflet-oldie .leaflet-control-zoominfo {
+  border: 1px solid #999;
+}
+
+.leaflet-oldie .leaflet-control-zoominfo-in {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '+');
+}
+.leaflet-oldie .leaflet-control-zoominfo-out {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '-');
+}

static/leaflet/L.Control.Zoominfo.js

@@ -0,0 +1,138 @@
+(function (factory) {
+  // Packaging/modules magic dance
+  var L;
+  if (typeof define === 'function' && define.amd) {
+    // AMD
+    define(['leaflet'], factory);
+  } else if (typeof module !== 'undefined') {
+    // Node/CommonJS
+    L = require('leaflet');
+    module.exports = factory(L);
+  } else {
+    // Browser globals
+    if (typeof window.L === 'undefined') {
+      throw new Error('Leaflet must be loaded first');
+        }
+    factory(window.L);
+  }
+}(function (L) {
+  'use strict';
+
+  L.Control.Zoominfo = (function () {
+
+    var Zoominfo = L.Control.extend({
+      options: {
+        position: 'topleft',
+        styleNS: 'leaflet-control-zoominfo'
+      },
+
+      onAdd: function (map) {
+        this._map = map;
+        this._ui = this._createUI();
+
+        map.whenReady(this._initInfo,        this)
+          .whenReady(this._initEvents,      this)
+          .whenReady(this._updateInfoValue, this)
+          .whenReady(this._updateDisabled,  this);
+        return this._ui.bar;
+      },
+
+      onRemove: function (map) {
+        map.off('zoomlevelschange',         this._updateSize,      this)
+          .off('zoomend zoomlevelschange', this._updateInfoValue, this)
+          .off('zoomend zoomlevelschange', this._updateDisabled,  this);
+      },
+
+      _createUI: function () {
+        var ui = {},
+          ns = this.options.styleNS;
+
+        ui.bar     = L.DomUtil.create('div', ns + ' leaflet-bar');
+        ui.zoomIn  = this._createZoomBtn('in', 'top', ui.bar);
+        ui.wrap    = L.DomUtil.create('div', ns + '-wrap leaflet-bar-part', ui.bar);
+        ui.zoomOut = this._createZoomBtn('out', 'bottom', ui.bar);
+        ui.body    = L.DomUtil.create('div', ns + '-body', ui.wrap);
+        ui.info    = L.DomUtil.create('div', ns + '-info');
+
+        L.DomEvent.disableClickPropagation(ui.bar);
+        L.DomEvent.disableClickPropagation(ui.info);
+
+        return ui;
+      },
+      _createZoomBtn: function (zoomDir, end, container) {
+        var classDef = this.options.styleNS + '-' + zoomDir +
+            ' leaflet-bar-part' +
+            ' leaflet-bar-part-' + end,
+          link = L.DomUtil.create('a', classDef, container);
+
+        link.href = '#';
+        link.title = 'Zoom ' + zoomDir;
+
+        L.DomEvent.on(link, 'click', L.DomEvent.preventDefault);
+
+        return link;
+      },
+
+      _initInfo: function () {
+        this._ui.body.appendChild(this._ui.info);
+      },
+      _initEvents: function () {
+        this._map
+          .on('zoomend zoomlevelschange', this._updateInfoValue, this)
+          .on('zoomend zoomlevelschange', this._updateDisabled,  this);
+
+        L.DomEvent.on(this._ui.zoomIn,  'click', this._zoomIn,        this);
+        L.DomEvent.on(this._ui.zoomOut, 'click', this._zoomOut,       this);
+      },
+
+      _zoomIn: function (e) {
+        this._map.zoomIn(e.shiftKey ? 3 : 1);
+      },
+      _zoomOut: function (e) {
+        this._map.zoomOut(e.shiftKey ? 3 : 1);
+      },
+
+      _zoomLevels: function () {
+        var zoomLevels = this._map.getMaxZoom() - this._map.getMinZoom() + 1;
+        return zoomLevels < Infinity ? zoomLevels : 0;
+      },
+      _toZoomLevel: function (value) {
+        return value + this._map.getMinZoom();
+      },
+      _toValue: function (zoomLevel) {
+        return zoomLevel - this._map.getMinZoom();
+      },
+
+      _updateInfoValue: function () {
+        this._ui.info.innerHTML = '<strong>'+ this._map.getZoom() + '</strong>';
+      },
+      _updateDisabled: function () {
+        var zoomLevel = this._map.getZoom(),
+          className = this.options.styleNS + '-disabled';
+
+        L.DomUtil.removeClass(this._ui.zoomIn,  className);
+        L.DomUtil.removeClass(this._ui.zoomOut, className);
+
+        if (zoomLevel === this._map.getMinZoom()) {
+          L.DomUtil.addClass(this._ui.zoomOut, className);
+        }
+        if (zoomLevel === this._map.getMaxZoom()) {
+          L.DomUtil.addClass(this._ui.zoomIn, className);
+        }
+      }
+    });
+
+    return Zoominfo;
+  })();
+
+  L.Map.addInitHook(function () {
+    if (this.options.zoominfoControl) {
+      this.zoominfoControl = new L.Control.Zoominfo();
+      this.addControl(this.zoominfoControl);
+    }
+  });
+
+  L.control.zoominfo = function (options) {
+    return new L.Control.Zoominfo(options);
+  };
+}));