Added initial Leaflet JS work

angular.json

@@ -27,7 +27,8 @@
               { "glob": "worker-json.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "./node_modules/leaflet/dist/leaflet.css"
             ],
             "scripts": []
           },

package-lock.json

@@ -1011,6 +1011,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "@asymmetrik/ngx-leaflet": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet/-/ngx-leaflet-6.0.1.tgz",
+      "integrity": "sha512-8jYlmpXhPVUjjApfx136U5d+vhv10z0S4yeNLYGXHV8NSvTA9LiGzWki61udhQjBxeYcKjImKLOv3TV/N4Uz+Q=="
+    },
     "@babel/code-frame": {
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
@@ -1878,6 +1883,12 @@
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
       "dev": true
     },
+    "@types/geojson": {
+      "version": "7946.0.7",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
+      "dev": true
+    },
     "@types/glob": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
@@ -1904,6 +1915,15 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/leaflet": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.7.tgz",
+      "integrity": "sha512-FiPU4NQwH+jQ2wc3IjD7+9hgNZ95m4ry8qILO+eS6L4eUUVSXr+472+k4SRVEW+8j18QwqY7PFqudDQzfpRXTQ==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -7315,6 +7335,11 @@
         "invert-kv": "^2.0.0"
       }
     },
+    "leaflet": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
+      "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="
+    },
     "less": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/less/-/less-3.9.0.tgz",

package.json

@@ -19,10 +19,12 @@
     "@angular/platform-browser": "~8.2.11",
     "@angular/platform-browser-dynamic": "~8.2.11",
     "@angular/router": "~8.2.11",
+    "@asymmetrik/ngx-leaflet": "^6.0.1",
     "@ng-bootstrap/ng-bootstrap": "^5.1.1",
     "@types/pegjs": "^0.10.1",
     "ace-builds": "^1.4.7",
     "bootstrap": "^4.3.1",
+    "leaflet": "^1.6.0",
     "rxjs": "~6.4.0",
     "ts-pegjs": "^0.2.6",
     "tslib": "^1.10.0",
@@ -33,9 +35,10 @@
     "@angular/cli": "~8.3.12",
     "@angular/compiler-cli": "~8.2.11",
     "@angular/language-service": "~8.2.11",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/leaflet": "^1.5.7",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { DbsComponent } from "./pages/config/dbs/dbs.component";
 import { ServersComponent } from "./pages/config/servers/servers.component";
 import { ServerComponent } from "./pages/config/servers/server/server.component";
 import { IslandInstanceComponent } from "./pages/config/servers/island-instance/island-instance.component";
+import { MapComponent } from "./pages/config/map/map.component";
 
 
 const routes: Routes = [
@@ -20,7 +21,8 @@ const routes: Routes = [
       {path: 'quests', component: QuestsComponent},
       {path: 'servers', component: ServersComponent},
       {path: 'server/:index', component: ServerComponent},
-      {path: 'server/:index/island/:islandIndex', component: IslandInstanceComponent}
+      {path: 'server/:index/island/:islandIndex', component: IslandInstanceComponent},
+      {path: 'map', component: MapComponent}
     ]
   }
 ];

src/app/app.module.ts

@@ -23,6 +23,8 @@ import { TemplateComponent } from './pages/config/servers/template/template.comp
 import { SelectListComponent } from './components/form/select-list/select-list.component';
 import { SelectObjectComponent } from './components/form/select-object/select-object.component';
 import { IslandInstanceComponent } from './pages/config/servers/island-instance/island-instance.component';
+import { LeafletModule } from "@asymmetrik/ngx-leaflet";
+import { MapComponent } from './pages/config/map/map.component';
 
 @NgModule({
   declarations: [
@@ -42,13 +44,15 @@ import { IslandInstanceComponent } from './pages/config/servers/island-instance/
     TemplateComponent,
     SelectListComponent,
     SelectObjectComponent,
-    IslandInstanceComponent
+    IslandInstanceComponent,
+    MapComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     NgbModule,
-    FormsModule
+    FormsModule,
+    LeafletModule.forRoot()
   ],
   providers: [Server, PegjsService],
   bootstrap: [AppComponent]

src/app/pages/config/map/map.component.html

@@ -0,0 +1,9 @@
+<div style="height: 400px;"
+     leaflet
+     [leafletOptions]="options"
+     [(leafletCenter)]="center"
+     [(leafletZoom)]="zoom">
+    <div *ngFor="let l of layers" [leafletLayer]="l"></div>
+</div>
+<p>Zoom: {{ zoom }}</p>
+<p>Center lat: {{ center.lat }} Center long: {{ center.lng }}</p>

src/app/pages/config/map/map.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { CRS, LatLng, latLng, LatLngBounds, latLngBounds, Rectangle, tileLayer } from "leaflet";
+import { Server } from "../../../server";
+
+const SIZE_SCALE = 100_000;
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnInit {
+
+  options = {
+    crs: CRS.Simple,
+    zoom: 0,
+    maxBounds: undefined,
+    maxBoundsViscosity: 0.5,
+    center: undefined,
+    layers: []
+  };
+
+  center: LatLng;
+  zoom: number;
+  layers = [];
+
+  constructor(private server: Server) {
+  }
+
+  ngOnInit() {
+    // all in Y X format. Also, upside down! (0,0 is bottom left instead of top left)
+    // Also, due to insanely large sizes, divide by 100_000
+    const maxX = (this.server.serverGrid.gridSize * this.server.serverGrid.totalGridsX) / SIZE_SCALE;
+    const maxY = (this.server.serverGrid.gridSize * this.server.serverGrid.totalGridsY) / SIZE_SCALE;
+    const northEast = new LatLng(0, maxX);
+    const southWest = new LatLng(maxY, 0);
+    this.options.maxBounds = new LatLngBounds(southWest, northEast);
+    this.options.center = new LatLng(0, 0);
+    this.options.layers[0] = new Rectangle(this.options.maxBounds, {
+      color: '#3c3c00',
+      weight: 5,
+      fillColor: 'lightblue',
+      fill: true
+    });
+
+    this.server.serverGrid.servers.forEach(i => {
+      const servMinX = (this.server.serverGrid.gridSize * i.gridX) / SIZE_SCALE;
+      const servMaxX = servMinX + (this.server.serverGrid.gridSize / SIZE_SCALE);
+      const servMinY = (this.server.serverGrid.gridSize * i.gridY) / SIZE_SCALE;
+      const servMaxY = servMinY + (this.server.serverGrid.gridSize / SIZE_SCALE);
+      const servNE = new LatLng(servMinY, servMaxX);
+      const servSW = new LatLng(servMaxY, servMinX);
+      const servBounds = new LatLngBounds(servSW, servNE);
+      this.layers.push(new Rectangle(servBounds,{color: 'pink', weight: 5}));
+    })
+  }
+}