From 8746c235189d88a6e2a0b2126b3e70df2b8b3f5a Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Sun, 5 Jan 2020 14:14:03 +0000 Subject: [PATCH] Added initial Leaflet JS work --- angular.json | 3 +- package-lock.json | 25 +++++++++ package.json | 5 +- src/app/app-routing.module.ts | 4 +- src/app/app.module.ts | 8 ++- src/app/pages/config/map/map.component.html | 9 ++++ src/app/pages/config/map/map.component.scss | 0 src/app/pages/config/map/map.component.ts | 57 +++++++++++++++++++++ 8 files changed, 106 insertions(+), 5 deletions(-) create mode 100644 src/app/pages/config/map/map.component.html create mode 100644 src/app/pages/config/map/map.component.scss create mode 100644 src/app/pages/config/map/map.component.ts diff --git a/angular.json b/angular.json index aa7ba77..4a214be 100644 --- a/angular.json +++ b/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": [] }, diff --git a/package-lock.json b/package-lock.json index b43a6ee..6a689a8 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a30b1a6..3e976ba 100644 --- a/package.json +++ b/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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 67c52a9..a9042e9 100644 --- a/src/app/app-routing.module.ts +++ b/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} ] } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 30c8910..bdc1989 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/pages/config/map/map.component.html b/src/app/pages/config/map/map.component.html new file mode 100644 index 0000000..715a6db --- /dev/null +++ b/src/app/pages/config/map/map.component.html @@ -0,0 +1,9 @@ +
+
+
+

Zoom: {{ zoom }}

+

Center lat: {{ center.lat }} Center long: {{ center.lng }}

\ No newline at end of file diff --git a/src/app/pages/config/map/map.component.scss b/src/app/pages/config/map/map.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/config/map/map.component.ts b/src/app/pages/config/map/map.component.ts new file mode 100644 index 0000000..d1dca20 --- /dev/null +++ b/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})); + }) + } +}