More progress

package-lock.json

@@ -1209,6 +1209,391 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pixi/accessibility": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-5.3.3.tgz",
+      "integrity": "sha512-wC/enJtw5CrdWnu6l5u3VN9UIZPumNSNXlGez2BULY0osiLTywHJPdHpmXMz2YPXw75GsEBzkEvK4LTtnTp21A==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/app": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/app/-/app-5.3.3.tgz",
+      "integrity": "sha512-OkO7Kq3N+FPRshVmApuiHKBpobic56VYbLVCMYPy6rjV0hc5ctkchKGFyouJuPt/rHeI6FrqZ0TaON1TShnKiA==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3"
+      }
+    },
+    "@pixi/constants": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-5.3.3.tgz",
+      "integrity": "sha512-IybgxzLlEPm7ihp70cLNKc3IPyqkFuW+idk9Zw2St+OayJTw5ctCnLAg9cducwIVHjPYTvN46BYDa+n0KRWZYw==",
+      "dev": true
+    },
+    "@pixi/core": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/core/-/core-5.3.3.tgz",
+      "integrity": "sha512-taw50LnzV+TQVMx5HQA2ZJgF9wuhZ6DeoXHW2KkevYB0ekKYnEO2VMMiRDMcmchtyvHclJebzjeHZLGqDtKDgw==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/runner": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/ticker": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/display": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/display/-/display-5.3.3.tgz",
+      "integrity": "sha512-dPm7Vk2BH9byu6RHBYsI9MtjUU8x1HNm/PIi6lIlxANhTjWnhxwfvmrGE7ZcRLThTenNdDVlZ2ke2XAXP98UgA==",
+      "dev": true,
+      "requires": {
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/extract": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-5.3.3.tgz",
+      "integrity": "sha512-CE0GA+tEBPurpaXER2B1aq1sdumKLtCqE/Mms6fYUkIKF9D0Ogw9rqo79QCL9XkLMexa7xVeC3KPPiXW5wrOaA==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/filter-alpha": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-5.3.3.tgz",
+      "integrity": "sha512-AxyHLnvO892va9raZbMMtMtEGDVqO8SvEHHNnCjTBEZ67kVKy0HEYXFOBA6nJZ6BiTgGp9js+7kevi11tfqnJQ==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/filter-blur": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-5.3.3.tgz",
+      "integrity": "sha512-vLN1DL6PQXo4p7j/32PZIf+lhcBVfb9hdphSmtbxlAlpbhMWI52n3YUkeInwHs7Ev08NyhI/UhNWHqjN/lAM3w==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/settings": "5.3.3"
+      }
+    },
+    "@pixi/filter-color-matrix": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-5.3.3.tgz",
+      "integrity": "sha512-HFr+vth5ZHHEFJYcjtWZ+O0s7Z2YWJyDyxr+nTd5Q8AT7gMDTVehpNVrm7ByaCKeEovOZzZI6A347+WmHcNpGg==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/filter-displacement": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-5.3.3.tgz",
+      "integrity": "sha512-kvrKMgqW4ELg+yT2p5vmu6h/IER/L8GD1PWyXovnzpI8RG7k8l136F9VvA3wkB6sYuNcXiDtqMtRQy5e6O4+rw==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3"
+      }
+    },
+    "@pixi/filter-fxaa": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-5.3.3.tgz",
+      "integrity": "sha512-p4vKdBwaoGRNZcoHz2ET8hBF1SoWvy9xU2B3Ci32+c0dg89ZUdGTEW0zimUHi2gMdU+2v/T0lqZ9NC9B6WVYAg==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/filter-noise": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-5.3.3.tgz",
+      "integrity": "sha512-HCky3XPk6BYGXTS7d9/FnAHnqq7Rwm5Rlj2XtWW3JItXGCScEBII227xYwrJu5Ke84tpVlDXK4W1/BevZ1AwlQ==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3"
+      }
+    },
+    "@pixi/graphics": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-5.3.3.tgz",
+      "integrity": "sha512-1bn9Jptg3JXgVOw0SrEMdmjSwkTBYDm6fPnPnh4goF3yDozh0xEqmXobVtCgy2fulMfHRzIfbgtRxrBf2mkCAg==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/interaction": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/interaction/-/interaction-5.3.3.tgz",
+      "integrity": "sha512-Tjuw4XwmrG1fhGzfn5oGspRJT2OtlH+6V7AHscH0v5Ht1Kvk6aKjNncZuSCXllhGGlIuMu3Nn9WPvDEIvW3JNw==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/ticker": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/loaders": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/loaders/-/loaders-5.3.3.tgz",
+      "integrity": "sha512-wj0DzniApfDoZA/buMmO/CgCB7Q7SsESForHh7wSd7UC8rrCmz5prUTEICmJGhdHpBuVB7KDPtwaaLtr9Q/kQg==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/utils": "5.3.3",
+        "resource-loader": "^3.0.1"
+      }
+    },
+    "@pixi/math": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/math/-/math-5.3.3.tgz",
+      "integrity": "sha512-k5C3kQpxlGm2AdBJEUjjW2l2YlSvTKf+54vNOjD4UcEfRoDevC5p4Zg49q3UAu855lrs5qw49AbkrFKsQvPIRA==",
+      "dev": true
+    },
+    "@pixi/mesh": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-5.3.3.tgz",
+      "integrity": "sha512-q8w70oAFNdArzOHVnsn7ban68NmO5S5TMg6qSez4A8te6cebMRQsNrT/0dQ/nZcG7ACFK4jiYfbXRQivO+jgVA==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/mesh-extras": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-5.3.3.tgz",
+      "integrity": "sha512-V2hARC7nUPaTEFxd+B8GDkSMrMZ38S8/IInqtYzGUy6FtFs7IYKty9Rz/G665eN7ThIq8tZrOVZOl6JRBtEC8A==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/mesh": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/mixin-cache-as-bitmap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-5.3.3.tgz",
+      "integrity": "sha512-P1mo3HKDWS8IZLgaP8gujiy4We4vRcxJH6EvQAevf+GsBzdjKfcGgkKzVb9HlyQvsXML5gpTOJuw5eKgRTxSQA==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/mixin-get-child-by-name": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-5.3.3.tgz",
+      "integrity": "sha512-CksDZ5ZG4/tHZfDOwSuznANduasJg5JR89X3D6E9DVYx4CLVE3G2K1sbeiOJNXfGIKy30UoSD7Y7IFmUzLxp/g==",
+      "dev": true,
+      "requires": {
+        "@pixi/display": "5.3.3"
+      }
+    },
+    "@pixi/mixin-get-global-position": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-5.3.3.tgz",
+      "integrity": "sha512-M3faQYDW/ISa1+lhVkjHXRALJ33BMzLN+7x9ucx8VeCmUWvcaLlRo3CaxZsgiR+52Fii5WHl/PF/cMzdkRMF9g==",
+      "dev": true,
+      "requires": {
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3"
+      }
+    },
+    "@pixi/particles": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/particles/-/particles-5.3.3.tgz",
+      "integrity": "sha512-t+lG8iGNYyS6ujKvC9qQjKzyxvjxqbFxvB6hkXcOKR98JWM2726ZguHouFlIbOzOxYAGoeuHIWSDlnQNvnVE2g==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/polyfill": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/polyfill/-/polyfill-5.3.3.tgz",
+      "integrity": "sha512-gmx67A6VmwKllxfIMQWzMUNJ8wJfWPT5FlUR0SoPastdTB/SfbgbyQBgKLZHqgmc6LOh2CrOLhN423lNiAroeA==",
+      "dev": true,
+      "requires": {
+        "es6-promise-polyfill": "^1.2.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "@pixi/prepare": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-5.3.3.tgz",
+      "integrity": "sha512-DPsKWfYJ97J67YCjPU6uvU+LBdw+64O9LG9vmzfChmYXom5VMQF9yUC6ZoYTHUPmH31iilqzGeMlPUTobnqSog==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/graphics": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/text": "5.3.3",
+        "@pixi/ticker": "5.3.3"
+      }
+    },
+    "@pixi/runner": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-5.3.3.tgz",
+      "integrity": "sha512-7eLZxxT+PwxuwzcRL1egrnEdLHwD41yFb24pMSo6XM86ppP1tdBjrv5+pLDnUuDEfNjZQxx07FAlZY+sMKANmw==",
+      "dev": true
+    },
+    "@pixi/settings": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-5.3.3.tgz",
+      "integrity": "sha512-1MYJokqpPUtvYEX0BVi0Pq2Xi6KGmWDV5hlQnTXY9NGv6tmqrPYvIb/uHFaDyVUWmrqsFL3xZ4W5zMo+c/dwVA==",
+      "dev": true,
+      "requires": {
+        "ismobilejs": "^1.1.0"
+      }
+    },
+    "@pixi/sprite": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-5.3.3.tgz",
+      "integrity": "sha512-qo7DG0oWS1uIBqfxw2jZPn34RCR6gQ+IjZRBpFxZPKPB1cL359scZmDBqBbQ4bd4rJ/6QXQfzUdGhXfQJtc9oQ==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/sprite-animated": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-5.3.3.tgz",
+      "integrity": "sha512-nG5j8veJ/cFXQTgzafPLkZqaHKbuaHcIj+ZYN1I2f31Y85/pfr2PQQLHbGr+3441wOYkEHht9nHhmZHWlOOZ0Q==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/ticker": "5.3.3"
+      }
+    },
+    "@pixi/sprite-tiling": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-5.3.3.tgz",
+      "integrity": "sha512-+Xk9AUh82rpArtrnZkw+9aJchrmHZ8QkpjsPRJcgPFHx3WEfABIkT6QEoYbRKiYH34OgO7ZOUXy9hcGPHnxjvw==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/spritesheet": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/spritesheet/-/spritesheet-5.3.3.tgz",
+      "integrity": "sha512-pTkOCTL8jsmyAguCgcbz03UPYu+3buRkgua1g/vGyeoZBN2eJ04iSXdB0pfPrsPisxkvThGHyU23UqEDYVtXRQ==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/loaders": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/text": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/text/-/text-5.3.3.tgz",
+      "integrity": "sha512-juinZC2yFXnzucWWxSdty9nfIIOAq2WA8DD2k40YL+7Y5L52/ggkgnokeQ2lrTb1BvTfx6YVNlvAsKonUek0Og==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/text-bitmap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-5.3.3.tgz",
+      "integrity": "sha512-QRRdEAFBwmRctp8PCPii5WUPM57T1I3r/EwyTvFCCDubOYOZu4aX/iFpCKZMl5GIphDFaGp8mNvbl+BwjUmBCA==",
+      "dev": true,
+      "requires": {
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/loaders": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/mesh": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/text": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
+    "@pixi/ticker": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-5.3.3.tgz",
+      "integrity": "sha512-p5F/dwJGwfZWUg5cCPqOnEx5iYGW+huQlZZtrTKKd1KoVehFsrzHeRBOEp4d584jsOmBf7fjJaUTyzsFn0YtOQ==",
+      "dev": true,
+      "requires": {
+        "@pixi/settings": "5.3.3"
+      }
+    },
+    "@pixi/utils": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-5.3.3.tgz",
+      "integrity": "sha512-GDP2h1Mph9Uei4zmJjzDK6GZ5S9O2A09VySVfWyKgWwP3SQ/Ss0bGYm4sE6+u1NMSz1WCrLgu66H82XuXs2Cbg==",
+      "dev": true,
+      "requires": {
+        "@pixi/constants": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "earcut": "^2.1.5",
+        "eventemitter3": "^3.1.0",
+        "url": "^0.11.0"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
+          "dev": true
+        }
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -5123,6 +5508,12 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "earcut": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz",
+      "integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==",
+      "dev": true
+    },
     "easy-stack": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.1.tgz",
@@ -5310,6 +5701,12 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-promise-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/es6-promise-polyfill/-/es6-promise-polyfill-1.2.0.tgz",
+      "integrity": "sha1-84kl8jyz4+jObNqP93T867sJDN4=",
+      "dev": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -7623,6 +8020,12 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "ismobilejs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
+      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==",
+      "dev": true
+    },
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
@@ -7826,6 +8229,12 @@
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
       "dev": true
     },
+    "leaflet-pixi-overlay": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/leaflet-pixi-overlay/-/leaflet-pixi-overlay-1.8.1.tgz",
+      "integrity": "sha512-YEAvD5vGuhCvVnlcgMxQyh5wIKDtfRoDXUp/iLd3HNY+mOLhVKMqogQXmyBbzjn4eYkzAOVRF1DBPJaCjYrb8w==",
+      "dev": true
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -8235,6 +8644,12 @@
         }
       }
     },
+    "mini-signals": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mini-signals/-/mini-signals-1.2.0.tgz",
+      "integrity": "sha1-RbCAE8X65RokqhqTXNMXye1yHXQ=",
+      "dev": true
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -8965,6 +9380,12 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-uri": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/parse-uri/-/parse-uri-1.0.3.tgz",
+      "integrity": "sha512-upMnGxNcm+45So85HoguwZTVZI9u11i36DdxJfGF2HYWS2eh3TIx7+/tTi7qrEq15qzGkVhsKjesau+kCk48pA==",
+      "dev": true
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -9103,6 +9524,48 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pixi.js": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-5.3.3.tgz",
+      "integrity": "sha512-uFQOXXyPMAVVayDebSFBS1AFfPT6QYNuz9Vu11yI2/k1DAef/rbYoJpSMM6SeB6dezDJPtIAaXXNxdaYzbe+kg==",
+      "dev": true,
+      "requires": {
+        "@pixi/accessibility": "5.3.3",
+        "@pixi/app": "5.3.3",
+        "@pixi/constants": "5.3.3",
+        "@pixi/core": "5.3.3",
+        "@pixi/display": "5.3.3",
+        "@pixi/extract": "5.3.3",
+        "@pixi/filter-alpha": "5.3.3",
+        "@pixi/filter-blur": "5.3.3",
+        "@pixi/filter-color-matrix": "5.3.3",
+        "@pixi/filter-displacement": "5.3.3",
+        "@pixi/filter-fxaa": "5.3.3",
+        "@pixi/filter-noise": "5.3.3",
+        "@pixi/graphics": "5.3.3",
+        "@pixi/interaction": "5.3.3",
+        "@pixi/loaders": "5.3.3",
+        "@pixi/math": "5.3.3",
+        "@pixi/mesh": "5.3.3",
+        "@pixi/mesh-extras": "5.3.3",
+        "@pixi/mixin-cache-as-bitmap": "5.3.3",
+        "@pixi/mixin-get-child-by-name": "5.3.3",
+        "@pixi/mixin-get-global-position": "5.3.3",
+        "@pixi/particles": "5.3.3",
+        "@pixi/polyfill": "5.3.3",
+        "@pixi/prepare": "5.3.3",
+        "@pixi/runner": "5.3.3",
+        "@pixi/settings": "5.3.3",
+        "@pixi/sprite": "5.3.3",
+        "@pixi/sprite-animated": "5.3.3",
+        "@pixi/sprite-tiling": "5.3.3",
+        "@pixi/spritesheet": "5.3.3",
+        "@pixi/text": "5.3.3",
+        "@pixi/text-bitmap": "5.3.3",
+        "@pixi/ticker": "5.3.3",
+        "@pixi/utils": "5.3.3"
+      }
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -10258,6 +10721,16 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
       "dev": true
     },
+    "resource-loader": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/resource-loader/-/resource-loader-3.0.1.tgz",
+      "integrity": "sha512-fBuCRbEHdLCI1eglzQhUv9Rrdcmqkydr1r6uHE2cYHvRBrcLXeSmbE/qI/urFt8rPr/IGxir3BUwM5kUK8XoyA==",
+      "dev": true,
+      "requires": {
+        "mini-signals": "^1.2.0",
+        "parse-uri": "^1.0.0"
+      }
+    },
     "restore-cursor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve ",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --modern --report",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -27,7 +27,9 @@
     "eslint": "^7.5.0",
     "eslint-plugin-vue": "^7.0.0-0",
     "leaflet": "^1.7.1",
+    "leaflet-pixi-overlay": "^1.8.1",
     "normalize-scss": "^7.0.1",
+    "pixi.js": "^5.3.3",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
     "typescript": "~3.9.3",

public/index.html

@@ -14,13 +14,87 @@
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 
 	<link rel="icon" href="images/dynmap.ico" type="image/ico" />
+    <style>
+        html, body {
+            background-color: #121212;
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        #splash {
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            transition: 0.3s opacity linear;
+            z-index: 10000;
+            background-color: #121212;
+        }
+
+        #splash svg {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+    </style>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
+    <div id="splash">
+        <svg viewBox="0 0 300.000000 300.000000" fill="#cccccc" width="200" height="200">
+            <g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" stroke="none">
+            <path d="M1541 2839 c-91 -28 -162 -103 -182 -195 -7 -30 -16 -54 -22 -54 -5
+            0 -55 12 -110 27 l-102 26 -320 -133 c-176 -73 -332 -139 -347 -146 -18 -9
+            -31 -27 -38 -52 -6 -20 -87 -469 -181 -996 -159 -901 -168 -960 -154 -983 23
+            -34 54 -43 91 -28 17 7 214 119 437 249 223 130 411 236 418 236 7 0 245 -92
+            530 -205 286 -113 525 -205 532 -205 14 0 730 260 785 285 18 8 37 27 43 41 8
+            22 -25 194 -171 898 -99 479 -185 886 -191 904 -12 36 -35 52 -76 52 -15 0
+            -149 -29 -296 -64 -230 -55 -273 -63 -305 -54 -52 14 -54 19 -37 67 56 159
+            -49 320 -217 335 -29 3 -68 1 -87 -5z m145 -173 c38 -38 44 -77 19 -126 -17
+            -32 -61 -60 -95 -60 -53 0 -110 57 -110 110 0 29 26 76 52 94 12 9 40 16 61
+            16 31 0 46 -7 73 -34z m-422 -205 c39 -11 89 -25 112 -30 34 -9 53 -25 105
+            -88 44 -55 67 -92 76 -127 13 -51 25 -66 55 -66 22 0 48 38 48 70 0 31 55 110
+            76 110 8 0 44 -7 79 -16 48 -12 65 -21 65 -34 0 -9 34 -387 75 -840 41 -453
+            75 -838 75 -855 l0 -32 -476 188 c-262 103 -477 189 -479 191 -2 3 101 1540
+            104 1546 2 4 16 2 85 -17z m-195 -53 c0 -82 -95 -1477 -100 -1482 -14 -12
+            -720 -418 -723 -415 -4 4 199 1158 207 1182 1 5 14 -8 28 -29 15 -22 54 -73
+            88 -114 33 -41 61 -85 61 -97 0 -46 18 -73 49 -73 35 0 47 13 55 66 6 31 25
+            62 77 125 111 133 141 209 120 302 -37 163 -213 245 -365 169 -31 -16 -56 -26
+            -56 -22 0 21 40 223 45 228 9 9 488 210 503 211 8 1 12 -15 11 -51z m1371 -5
+            c0 -5 74 -365 165 -802 91 -436 165 -801 165 -810 0 -12 -75 -44 -307 -129
+            -170 -62 -313 -112 -318 -112 -11 0 -172 1736 -162 1746 5 5 414 108 450 113
+            4 0 7 -2 7 -6z m-1677 -513 c21 -23 27 -40 27 -74 0 -85 -82 -131 -160 -91
+            -37 19 -50 43 -50 93 0 101 116 146 183 72z"></path>
+            <path d="M2252 1514 c-94 -47 -148 -137 -139 -233 7 -80 34 -134 117 -235 49
+            -60 76 -103 82 -130 11 -50 24 -66 53 -66 29 0 42 16 51 65 5 28 27 65 77 125
+            139 169 161 288 74 402 -72 95 -207 126 -315 72z m151 -123 c110 -42 85 -211
+            -31 -211 -66 0 -111 42 -112 103 0 49 13 73 53 97 36 22 54 24 90 11z"></path>
+            </g>
+        </svg>
+    </div>
     <div id="mcmap" class="dynmap"></div>
     <script src="standalone/config.js"></script>
+    <script>
+        const splash = document.getElementById('splash');
+
+        window.hideSplash = function() {
+            requestAnimationFrame(function() {
+                splash.style.opacity = 0;
+            });
+        };
+
+        splash.addEventListener('transitionend', function() {
+            splash.hidden = true;
+        });
+    </script>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

@@ -1,11 +1,11 @@
 <template>
-	<Leaflet></Leaflet>
+	<Map></Map>
 	<Sidebar></Sidebar>
 </template>
 
 <script lang="ts">
 import {defineComponent, computed, ref} from 'vue';
-import Leaflet from './components/Leaflet.vue';
+import Map from './components/Map.vue';
 import Sidebar from './components/Sidebar.vue';
 import {useStore} from "./store";
 import {ActionTypes} from "@/store/action-types";
@@ -13,7 +13,7 @@ import {ActionTypes} from "@/store/action-types";
 export default defineComponent({
 	name: 'WorldList',
 	components: {
-		Leaflet,
+		Map,
 		Sidebar,
 	},
 
@@ -43,6 +43,7 @@ export default defineComponent({
 		loadConfiguration() {
 			useStore().dispatch(ActionTypes.LOAD_CONFIGURATION, undefined).then(() => {
 				this.startUpdates();
+				window.hideSplash();
 			});
 		},
 

src/api.ts

@@ -1,7 +1,8 @@
 import axios, {AxiosResponse} from 'axios';
 import {
+	DynmapArea, DynmapCircle,
 	DynmapComponentConfig,
-	DynmapConfigurationResponse, DynmapMap, DynmapMessageConfig,
+	DynmapConfigurationResponse, DynmapLine, DynmapMap, DynmapMarker, DynmapMarkerSet, DynmapMessageConfig,
 	DynmapPlayer,
 	DynmapServerConfig,
 	DynmapUpdateResponse,
@@ -18,7 +19,7 @@ function buildServerConfig(response: AxiosResponse): DynmapServerConfig {
 		chatInterval: data['webchat-interval'] || 5,
 		defaultMap: data.defaultmap || undefined,
 		defaultWorld: data.defaultworld || undefined,
-		defaultZoom: data.defaultZoom || 0,
+		defaultZoom: data.defaultzoom || 0,
 		followMap: data.followmap || undefined,
 		followZoom: data.followzoom || 0,
 		updateInterval: data.updaterate || 3000,
@@ -52,12 +53,12 @@ function buildWorlds(response: AxiosResponse): Array<DynmapWorld> {
 		worlds: Array<DynmapWorld> = [];
 
 	(data.worlds || []).forEach((world: any) => {
-		const maps: Array<DynmapMap> = [];
+		const maps: Map<string, DynmapMap> = new Map();
 
 		(world.maps || []).forEach((map: any) => {
-			maps.push({
+			maps.set(map.name, {
 				world: world,
-				background: map.background || '#000000',
+				background: '#121212', //map.background || '#000000',
 				backgroundDay: map.backgroundday || '#000000',
 				backgroundNight: map.backgroundnight || '#000000',
 				compassView: map.compassView || 'S',
@@ -97,7 +98,14 @@ function buildWorlds(response: AxiosResponse): Array<DynmapWorld> {
 function buildComponents(response: AxiosResponse): DynmapComponentConfig {
 	const data = response.data,
 		components: DynmapComponentConfig = {
+			markers: {
+				showLabels: false,
+			},
 			playerMarkers: undefined,
+			coordinatesControl: undefined,
+			linkControl: false,
+			clockControl: undefined,
+			logoControls: [],
 		};
 
 	(data.components || []).forEach((component: any) => {
@@ -116,12 +124,167 @@ function buildComponents(response: AxiosResponse): DynmapComponentConfig {
 				}
 
 				break;
+
+			case "coord":
+				components.coordinatesControl = {
+					showY: !(component.hidey || false),
+					label: component.label || "Location: ",
+					showRegion: component['show-mcr'] || false,
+					showChunk: component['show-chunk'] || false,
+				}
+
+				break;
+
+			case "link":
+				components.linkControl = true;
+
+				break;
+
+			case "digitalclock":
+				components.clockControl = {
+					showDigitalClock: true,
+					showWeather: false,
+				}
+				break;
+
+			case "timeofdayclock":
+				components.clockControl = {
+					showDigitalClock: component.showdigitalclock || false,
+					showWeather: component.showweather || false,
+				}
 		}
 	});
 
 	return components;
 }
 
+function buildMarkers(data: any): Map<string, DynmapMarker> {
+	const markers = Object.freeze(new Map()) as Map<string, DynmapMarker>;
+
+	for(const key in data) {
+		if (!Object.prototype.hasOwnProperty.call(data, key)) {
+			continue;
+		}
+
+		const marker = data[key];
+
+		markers.set(key, {
+			label: marker.label || '',
+			location: {
+				x: marker.x || 0,
+				y: marker.y || 0,
+				z: marker.z || 0,
+			},
+			dimensions: marker.dim ? marker.dim.split('x') : [16, 16],
+			icon: marker.icon || "default",
+			isHTML: marker.markup || false,
+			minZoom: marker.minzoom || undefined,
+			maxZoom: marker.maxZoom || undefined,
+			popupContent: marker.desc || undefined,
+		});
+	}
+
+	return markers;
+}
+
+function buildAreas(data: any): Map<string, DynmapArea> {
+	const areas = Object.freeze(new Map()) as Map<string, DynmapArea>;
+
+	for(const key in data) {
+		if (!Object.prototype.hasOwnProperty.call(data, key)) {
+			continue;
+		}
+
+		const area = data[key];
+
+		areas.set(key, {
+			style: {
+				color: area.color || '#ff0000',
+				opacity: area.opacity || 1,
+				weight: area.weight || 1,
+				fillColor: area.fillcolor || '#ff0000',
+				fillOpacity: area.fillopacity || 0,
+			},
+			label: area.label || '',
+			isHTML: area.markup || false,
+			x: area.x || [0, 0],
+			y: [area.ybottom || 0, area.ytop || 0],
+			z: area.z || [0, 0],
+			minZoom: area.minzoom || undefined,
+			maxZoom: area.maxZoom || undefined,
+			popupContent: area.desc || undefined,
+		});
+	}
+
+	return areas;
+}
+
+function buildLines(data: any): Map<string, DynmapLine> {
+	const lines = Object.freeze(new Map()) as Map<string, DynmapLine>;
+
+	for(const key in data) {
+		if (!Object.prototype.hasOwnProperty.call(data, key)) {
+			continue;
+		}
+
+		const line = data[key];
+
+		lines.set(key, {
+			x: line.x || [0, 0],
+			y: [line.ybottom || 0, line.ytop || 0],
+			z: line.z || [0, 0],
+			style: {
+				color: line.color || '#ff0000',
+				opacity: line.opacity || 1,
+				weight: line.weight || 1,
+			},
+			label: line.label || '',
+			isHTML: line.markup || false,
+			minZoom: line.minzoom || undefined,
+			maxZoom: line.maxZoom || undefined,
+			popupContent: line.desc || undefined,
+		});
+	}
+
+	return lines;
+}
+
+function buildCircles(data: any): Map<string, DynmapCircle> {
+	const circles = Object.freeze(new Map()) as Map<string, DynmapCircle>;
+
+	for(const key in data) {
+		if (!Object.prototype.hasOwnProperty.call(data, key)) {
+			continue;
+		}
+
+		const circle = data[key];
+
+		circles.set(key, {
+			location: {
+				x: circle.x || 0,
+				y: circle.y || 0,
+				z: circle.z || 0,
+			},
+			radius: [circle.xr || 0, circle.zr || 0],
+			style: {
+				fillColor: circle.fillcolor || '#ff0000',
+				fillOpacity: circle.fillopacity || 0,
+				color: circle.color || '#ff0000',
+				opacity: circle.opacity || 1,
+				weight: circle.weight || 1,
+			},
+			label: circle.label || '',
+			isHTML: circle.markup || false,
+
+			minZoom: circle.minzoom || undefined,
+			maxZoom: circle.maxZoom || undefined,
+			popupContent: circle.desc || undefined,
+		});
+	}
+
+	return circles;
+}
+
 export default {
 	getConfiguration(): Promise<DynmapConfigurationResponse> {
 		return axios.get(window.config.url.configuration).then((response): DynmapConfigurationResponse => {
@@ -141,35 +304,89 @@ export default {
 
 		return axios.get(url).then((response): DynmapUpdateResponse => {
 			const data = response.data,
-				players: Array<DynmapPlayer> = [];
+				players: Set<DynmapPlayer> = new Set();
 
-			// (data.players || []).forEach((player: any) => {
+			(data.players || []).forEach((player: any) => {
-			for(let i = 0; i < 408; i++) {
+				players.add({
-				players.push({
+					account: player.account || "",
-					account: "VIDEO GAMES " + i,//player.account || "",
+					health: player.health || 0,
-					health: Math.round(Math.random() * 10),//player.health || 0,
+					armor: player.armor || 0,
-					armor: Math.round(Math.random() * 10),//player.armor || 0,
+					name: player.name || "Steve",
-					name: "VIDEO GAMES " + i,//Math.round(Math.random() * 10),//player.name || "Steve",
+					sort: player.sort || 0,
-					sort: 0,//player.sort || 0,
 					location: {
-						x: Math.round(Math.random() * 100) - 50, //player.x || 0,
+						x: player.x || 0,
-						y: Math.round(Math.random() * 100) - 50, //player.y || 0,
+						y: player.y || 0,
-						z: Math.round(Math.random() * 100) - 50, //player.z || 0,
+						z: player.z || 0,
-						world: "earth", //player.world || undefined,
+						world: player.world || undefined,
+					}
+				});
+			});
+
+			for(let i = 0; i < 408; i++) {
+				players.add({
+					account: "VIDEO GAMES " + i,
+					health: Math.round(Math.random() * 10),
+					armor: Math.round(Math.random() * 10),
+					name: "VIDEO GAMES " + i,
+					sort: 0,
+					location: {
+						x: Math.round(Math.random() * 1000) - 500,
+						y: 64,
+						z: Math.round(Math.random() * 1000) - 500,
+						world: "world",
 					}
 				});
-				// });
 			}
 
 			return {
+				worldState: {
 					timeOfDay: data.servertime || 0,
 					thundering: data.isThundering || false,
 					raining: data.hasStorm || false,
+				},
 				playerCount: data.count || 0,
 				configHash: data.configHash || 0,
 				timestamp: data.timestamp || 0,
 				players,
 			}
 		});
+	},
+
+	getMarkerSets(world: string): Promise<Map<string, DynmapMarkerSet>> {
+		const url = `${window.config.url.markers}_markers_/marker_${world}.json`;
+
+		return axios.get(url).then((response): Map<string, DynmapMarkerSet> => {
+			const data = response.data,
+				sets: Map<string, DynmapMarkerSet> = new Map();
+
+			data.sets = data.sets || {};
+
+			for(const key in data.sets) {
+				if(!Object.prototype.hasOwnProperty.call(data.sets, key)) {
+					continue;
+				}
+
+				const set = data.sets[key],
+					markers = buildMarkers(set.markers || {}),
+					circles = buildCircles(set.circles || {}),
+					areas = buildAreas(set.areas || {}),
+					lines = buildLines(set.lines || {});
+
+				sets.set(key, {
+					label: set.label || "Unnamed set",
+					hidden: set.hidden || false,
+					priority: set.layerprio || 0,
+					showLabels: set.showlabels || undefined,
+					minZoom: set.minzoom || undefined,
+					maxZoom: set.maxzoom || undefined,
+					markers,
+					areas,
+					lines,
+					circles,
+				});
+			}
+
+			return sets;
+		});
 	}
 }

src/assets/css/rtgame.css

@@ -1,371 +0,0 @@
-/* latin */
-@font-face {
-	font-family: 'Raleway';
-	font-style: normal;
-	font-weight: 400;
-	src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-html {
-	font-size: .625em;
-}
-
-body {
-	font-family: Raleway, sans-serif;
-	color: #cccccc;
-	text-shadow: 0.1rem 0.1rem #000000;
-	letter-spacing: 0.02rem;
-	font-size: 1.2em;
-}
-
-.dynmap .sidebar {
-	background-color: #222222;
-	border: none;
-	color: inherit;
-	width: 21rem;
-	box-shadow: -2px 0px 4px 1px rgba(17,17,17,0.8);
-}
-
-.dynmap .panel {
-	padding: 1rem 1.5rem;
-}
-
-.panel .scrollup,
-.panel .scrolldown {
-	background-color: #111111;
-	border: none;
-	cursor: pointer;
-	height: 2.5rem;
-}
-
-.panel .scrollup:hover,
-.panel .scrollup:focus ,
-.panel .scrolldown:hover,
-.panel .scrolldown:focus {
-	border: none;
-	height: 2.5rem;
-}
-
-.dynmap .sidebar .panel > .pin {
-	right: 1.5rem;
-    top: 1.5rem;
-    width: 2rem;
-    height: 2rem;
-    background-size: cover;
-}
-
-.dynmap .panel .section {
-	border: none;
-	padding: 0;
-	margin: 0 0 2rem;
-}
-
-.dynmap .panel .section legend {
-	color: #eeeeee;
-	font-size: 1.4rem;
-	letter-spacing: 0.04rem;
-	padding: 0.8rem 0.4rem 0.8rem 0;
-	margin-bottom: 0.5rem;
-}
-
-.dynmap .panel .subsection {
-	margin-bottom: 1rem;
-	border-bottom: none;
-	display: flex;
-	align-items: center;
-}
-
-.dynmap .panel .sublist {
-	display: flex;
-	align-items: center;
-	flex: 0 0 auto;
-	margin-left: auto;
-}
-
-.dynmap .panel .sublist .item {
-	float: none;
-	background-color: #111111 !important;
-	width: 2.6rem;
-	height: 2.6rem;
-	border-radius: 0.2rem;
-	cursor: pointer;
-	margin: 0;
-}
-
-.dynmap .panel .sublist .item + .item {
-	margin-left: 0.5rem;
-}
-
-.dynmap .panel .sublist .item a {
-	display: block;
-	width: 100%;
-	height: 100%;
-}
-
-.dynmap .panel .playerlist {
-	display: flex;
-	flex-direction: column;
-}
-
-.dynmap .playerlist .player {
-    display: inline-block;
-    float: none;
-    width: auto;
-    padding: 0;
-    border: none;
-    padding: 0.5rem 0.2rem;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-}
-
-.dynmap .playerlist .player.following {
-	border: none;
-	border-radius: 0;
-	padding: 0.5rem 0.2rem;
-}
-
-.dynmap .playerlist .player .playerIcon {
-	margin: 0 1rem 0 0;
-	padding: 0;
-}
-
-.dynmap .panel .playerlist .player a {
-	color: inherit;
-}
-
-.dynmap .hitbar {
-	background-color: #222222;
-}
-
-.leaflet-container {
-	font-family: inherit;
-}
-
-.leaflet-left {
-    display: flex;
-    flex-direction: column;
-    height: 50%;
-    align-items: flex-start;
-}
-
-.leaflet-left:before,
-.leaflet-left.leaflet-bottom:after {
-	content: '';
-	position: absolute;
-	display: block;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 4rem;
-	background-color: #222222;
-	z-index: -1;
-    box-shadow: 2px -4px 4px 1px rgba(17,17,17,0.8);
-}
-
-.leaflet-left.leaflet-bottom:after {
-	top: auto;
-	bottom: 0;
-	left: 4rem;
-	height: 4rem;
-	right: 0;
-	width: auto;
-	box-shadow: 0 -2px 4px 1px rgba(17,17,17,0.8);
-	position: fixed;
-}
-
-.leaflet-left.leaflet-top {
-	justify-content: flex-start;
-	z-index: 2;
-}
-
-.leaflet-left.leaflet-bottom {
-	justify-content: flex-end;
-	z-index: 1;
-	box-shadow: 2px 0px 4px 1px rgba(17,17,17,0.8);
-}
-
-.leaflet-left .leaflet-control {
-	margin-left: 0;
-	position: relative;
-	z-index: 2;
-}
-
-.leaflet-top .leaflet-control {
-	margin-top: 2rem;
-}
-
-.leaflet-container .leaflet-control-zoom {
-	margin-top: 1rem;
-	border: none;
-	order: 1;
-}
-
-.leaflet-control-zoom a,
-.leaflet-control-zoom a.leaflet-control-zoom-disabled,
-.leaflet-control-layers,
-.leaflet-control-layers-list,
-.dynmap .dynmap-link a {
-	background-color: #111111;
-	color: #eeeeee;
-}
-
-.leaflet-bar,
-.leaflet-control-layers,
-.dynmap .dynmap-link a {
-	box-shadow: none;
-}
-
-.leaflet-control-zoom a,
-.leaflet-control-layers-toggle,
-.dynmap .dynmap-link a {
-	width: 4rem;
-	height: 4rem;
-	border-radius: 0;
-}
-
-.leaflet-control-zoom a:hover,
-.leaflet-control-zoom a:focus,
-.dynmap .dynmap-link a:hover,
-.dynmap .dynmap-link a:focus,
-.leaflet-control-layers:hover,
-.leaflet-control-layers:focus {
-	background-color: rgba(64,64,64,0.6);
-	color: #ffffff;
-}
-
-.leaflet-control-zoom a {
-	border: none;
-	border-radius: 0;
-	font-size: 2rem;
-	line-height: 2rem;
-	padding: 1rem;
-	box-sizing: border-box;
-}
-
-.leaflet-control-zoom a.leaflet-control-zoom-disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-
-.leaflet-control-layers {
-	border-radius: 0;
-	order: 2;
-}
-
-.leaflet-control-layers-list {
-	position: absolute;
-    top: 0;
-    left: 4rem;
-    width: 15rem;
-    padding: 1rem;
-    color: #cccccc;
-}
-
-.leaflet-control-layers-expanded {
-	padding: 0;
-}
-
-.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
-	display: block;
-}
-
-.leaflet-control-layers-expanded .leaflet-control-layers-list {
-	position: absolute;
-}
-
-.dynmap .dynmap-link {
-	padding: 0;
-	margin-bottom: 0;
-}
-
-.largeclock.digitalclock {
-	position: fixed;
-    bottom: 0;
-    margin: 0;
-    right: 4rem;
-    top: auto;
-    right: auto;
-    left: 4rem;
-    background-color: #111111;
-    height: 4rem;
-    border: none;
-    font-size: 3rem;
-    line-height: 4rem;
-    box-shadow: none;
-}
-
-.dynmap .coord-control {
-	position: fixed;
-    bottom: 0;
-    left: 21rem;
-    background: none;
-    border: none;
-    padding: 0;
-    color: inherit;
-    width: auto;
-    font-size: 2rem;
-    white-space: nowrap;
-    margin: 0;
-    height: 4rem;
-    line-height: 4rem;
-}
-
-.leaflet-container .leaflet-control-attribution {
-	background-color: transparent;
-    box-shadow: none;
-    margin: 0;
-    width: 4rem;
-    height: 4rem;
-    order: 0;
-    padding: 0;
-}
-
-.leaflet-container .leaflet-control-attribution a {
-	width: 100%;
-    height: 100%;
-    display: block;
-    padding: 1rem 0.5rem;
-    box-sizing: border-box;
-}
-
-.leaflet-container .leaflet-control-attribution img {
-	display: block;
-    max-width: 100% !important;
-}
-
-.dynmap .mapMarker:hover .markerName,
-.dynmap .mapMarker .markerName-show,
-.dynmap .playerNameSm {
-	padding: 0.2rem 0.5rem;
-	color: #eeeeee;
-}
-
-.leaflet-touch .leaflet-control-layers,
-.leaflet-touch .leaflet-control-zoom {
-	border: none;
-}
-
-.leaflet-touch .leaflet-control-layers-toggle,
-.leaflet-touch .leaflet-control-zoom a {
-	width: 4rem;
-	height: 4rem;
-}
-
-.leaflet-touch .leaflet-bar-part {
-	border: none;
-}
-
-.leaflet-touch .leaflet-bar-part-bottom,
-.leaflet-touch .leaflet-bar-part-top {
-	border-radius: 0;
-}
-
-/*.leaflet-touch .coord-control {*/
-/*	display: none;*/
-/*}*/
-
-.sidebar .content.worldlist {
-	min-height: 20rem;
-}

src/components/Leaflet.vue

@@ -1,50 +0,0 @@
-<template>
-	<div class="map">
-		<MapLayer v-for="[name, map] in maps" :key="name" :map="map" :name="name" :leaflet="leaflet"></MapLayer>
-		<PlayersLayer></PlayersLayer>
-	</div>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "@vue/runtime-core";
-import L from 'leaflet';
-import {useStore} from '@/store';
-import MapLayer from "@/components/map/layer/MapLayer.vue";
-import PlayersLayer from "@/components/map/layer/PlayersLayer.vue";
-
-export default defineComponent({
-	components: {
-		MapLayer,
-		PlayersLayer
-	},
-
-	data() {
-		return {
-			leaflet: undefined as L.Map | undefined,
-		}
-	},
-
-	computed: {
-		maps() {
-			return useStore().state.maps;
-		},
-	},
-
-	mounted() {
-		this.leaflet = new L.Map(this.$el, {
-			zoom: 1,
-			center: new L.LatLng(0, 0),
-			zoomAnimation: true,
-			zoomControl: true,
-			preferCanvas: true,
-			attributionControl: false,
-			crs: L.CRS.Simple,
-			worldCopyJump: false,
-		});
-	},
-})
-</script>
-
-<style scoped>
-
-</style>

src/components/Map.vue

@@ -0,0 +1,195 @@
+<template>
+	<div class="map" :style="{'background-color': mapBackground }">
+		<MapLayer v-for="[name, map] in maps" :key="name" :map="map" :name="name" :leaflet="leaflet"></MapLayer>
+		<PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer>
+		<MarkerSetLayer v-for="[name, markerSet] in markerSets" :key="name" :markerSet="markerSet" :leaflet="leaflet"></MarkerSetLayer>
+
+		<LogoControl v-for="(logo, index) in logoControls" :key="index" :options="logo" :leaflet="leaflet"></LogoControl>
+		<CoordinatesControl v-if="coordinatesControlEnabled" :leaflet="leaflet"></CoordinatesControl>
+		<LinkControl v-if="linkControlEnabled" :leaflet="leaflet"></LinkControl>
+		<ClockControl v-if="clockControlEnabled" :leaflet="leaflet"></ClockControl>
+	</div>
+</template>
+
+<script lang="ts">
+import {defineComponent, computed} from "@vue/runtime-core";
+import L from 'leaflet';
+import '@/leaflet/map';
+import {useStore} from '@/store';
+import MapLayer from "@/components/map/layer/MapLayer.vue";
+import PlayersLayer from "@/components/map/layer/PlayersLayer.vue";
+import MarkerSetLayer from "@/components/map/layer/MarkerSetLayer.vue";
+import CoordinatesControl from "@/components/map/control/CoordinatesControl.vue";
+import ClockControl from "@/components/map/control/ClockControl.vue";
+import LinkControl from "@/components/map/control/LinkControl.vue";
+import LogoControl from "@/components/map/control/LogoControl.vue";
+import {MutationTypes} from "@/store/mutation-types";
+import {DynmapPlayer} from "@/dynmap";
+import {ActionTypes} from "@/store/action-types";
+
+export default defineComponent({
+	components: {
+		MapLayer,
+		PlayersLayer,
+		MarkerSetLayer,
+		CoordinatesControl,
+		ClockControl,
+		LinkControl,
+		LogoControl
+	},
+
+	setup() {
+		const store = useStore(),
+			leaflet = undefined as L.Map | undefined,
+
+			maps = computed(() => store.state.maps),
+			markerSets = computed(() => store.state.markerSets),
+			configuration = computed(() => store.state.configuration),
+
+			playerMarkersEnabled = computed(() => store.getters.playerMarkersEnabled),
+			coordinatesControlEnabled = computed(() => store.getters.coordinatesControlEnabled),
+			clockControlEnabled = computed(() => store.getters.clockControlEnabled),
+			linkControlEnabled = computed(() => store.state.components.linkControl),
+			logoControls = computed(() => store.state.components.logoControls),
+
+			currentWorld = computed(() => store.state.currentWorld),
+			currentMap = computed(() => store.state.currentMap),
+			currentProjection = computed(() => store.state.currentProjection),
+			following = computed(() => store.state.following),
+
+			mapBackground = computed((): string => {
+				//TODO: day/night
+				const currentMap = useStore().state.currentMap;
+
+				return currentMap && currentMap.background ? currentMap.background : 'transparent';
+			});
+
+		return {
+			leaflet,
+			maps,
+			markerSets,
+			configuration,
+			playerMarkersEnabled,
+			coordinatesControlEnabled,
+			clockControlEnabled,
+			linkControlEnabled,
+			logoControls,
+			following,
+			mapBackground,
+			currentWorld,
+			currentMap,
+			currentProjection
+		}
+	},
+
+	watch: {
+		following: {
+			handler(newValue, oldValue) {
+				if (newValue) {
+					this.updateFollow(newValue, !oldValue || newValue.account !== oldValue.account);
+				}
+			},
+			deep: true
+		},
+		currentWorld(newValue) {
+			if(newValue) {
+				useStore().dispatch(ActionTypes.GET_MARKER_SETS, undefined);
+			}
+		},
+		configuration: {
+			handler(newValue) {
+				console.log(newValue.defaultZoom);
+				if(this.leaflet) {
+					this.leaflet.setZoom(newValue.defaultZoom, {
+						animate: false,
+						noMoveStart: true,
+					});
+				}
+			},
+			deep: true,
+		}
+	},
+
+	mounted() {
+		this.leaflet = new L.Map(this.$el, Object.freeze({
+			zoom: this.configuration.defaultZoom,
+			center: new L.LatLng(0, 0),
+			fadeAnimation: false,
+			zoomAnimation: true,
+			zoomControl: true,
+			preferCanvas: true,
+			attributionControl: false,
+			crs: L.CRS.Simple,
+			worldCopyJump: false,
+			markerZoomAnimation: false,
+		}));
+
+		this.leaflet.addControl(new L.Control.Layers({}, {},{
+			position: 'topleft',
+		}));
+
+		this.leaflet.on('moveend', () => {
+			const location = this.currentProjection.latLngToLocation(this.leaflet!.getCenter(), 64),
+				locationString = `${Math.round(location.x)},${Math.round(location.y)},${Math.round(location.z)}`,
+				url = `#${this.currentWorld!.name};${this.currentMap!.name};${locationString}`;
+
+			window.history.replaceState({
+				location,
+				world: this.currentWorld!.name,
+				map: this.currentMap!.name,
+			}, '', url);
+		})
+	},
+
+	methods: {
+		updateFollow(player: DynmapPlayer, newFollow: boolean) {
+			const store = useStore(),
+				currentWorld = store.state.currentWorld;
+
+			if(!this.leaflet) {
+				console.warn('Map isn\'t initialized yet. Ignoring follow');
+			}
+
+			if(!player.location.world) {
+				console.error('Player isn\'t in a world somehow');
+				return;
+			}
+
+			if(!currentWorld || currentWorld.name !== player.location.world) {
+				const followMapName = store.state.configuration.followMap,
+					world = store.state.worlds.get(player.location.world);
+
+				if(!world) {
+					console.error('Player isn\'t in a known world somehow');
+					return;
+				}
+
+				let map = followMapName && world.maps.has(followMapName)
+					? world.maps.get(followMapName)
+					: world.maps.entries().next().value[1]
+
+				if(map !== store.state.currentMap) {
+					console.log(`Switching map to match player ${world.name} ${map.name}`);
+					store.commit(MutationTypes.SET_CURRENT_MAP, {worldName: world.name, mapName: map.name});
+				}
+			}
+
+			this.leaflet!.panTo(store.state.currentProjection.locationToLatLng(player.location));
+
+			if(newFollow) {
+				console.log(`Setting zoom for new follow ${store.state.configuration.followZoom}`);
+				this.leaflet!.setZoom(store.state.configuration.followZoom);
+			}
+		}
+	}
+})
+</script>
+
+<style scoped>
+	.map {
+		width: 100%;
+		height: 100%;
+		background: #000;
+		z-index: 0;
+	}
+</style>