From 96f39c9ca3f7b166529ffeb99102196e76049560 Mon Sep 17 00:00:00 2001 From: coriander31415 Date: Mon, 22 Feb 2021 09:59:45 +0200 Subject: [PATCH 1/5] test: leaflet osm --- package-lock.json | 32 +++++++++++++++---- package.json | 6 ++-- src/app/app-routing.module.ts | 2 ++ src/app/app.module.ts | 2 ++ src/app/map/components/map/map.component.html | 5 +++ src/app/map/components/map/map.component.scss | 17 ++++++++++ src/app/map/components/map/map.component.ts | 31 ++++++++++++++++++ src/app/map/map.module.ts | 24 ++++++++++++++ .../pages/map-page/map-page.component.html | 1 + .../pages/map-page/map-page.component.scss | 0 .../pages/map-page/map-page.component.spec.ts | 28 ++++++++++++++++ .../map/pages/map-page/map-page.component.ts | 15 +++++++++ src/app/map/services/marker.service.spec.ts | 16 ++++++++++ src/app/map/services/marker.service.ts | 13 ++++++++ src/styles.scss | 1 + 15 files changed, 185 insertions(+), 8 deletions(-) create mode 100644 src/app/map/components/map/map.component.html create mode 100644 src/app/map/components/map/map.component.scss create mode 100644 src/app/map/components/map/map.component.ts create mode 100644 src/app/map/map.module.ts create mode 100644 src/app/map/pages/map-page/map-page.component.html create mode 100644 src/app/map/pages/map-page/map-page.component.scss create mode 100644 src/app/map/pages/map-page/map-page.component.spec.ts create mode 100644 src/app/map/pages/map-page/map-page.component.ts create mode 100644 src/app/map/services/marker.service.spec.ts create mode 100644 src/app/map/services/marker.service.ts diff --git a/package-lock.json b/package-lock.json index 89a0b9d..0693452 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2000,6 +2000,12 @@ "@types/range-parser": "*" } }, + "@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.3", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz", @@ -2037,6 +2043,15 @@ "@types/node": "*" } }, + "@types/leaflet": { + "version": "1.5.23", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.23.tgz", + "integrity": "sha512-S/xpuwjZuwYMP+4ZzQ10PX0Jy+0XmwPeojtjqhbca9UXaINdoru91Qm/DUUXyh4qYm3CP6Vher06l/UcA9tUKQ==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, "@types/mime": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz", @@ -5894,9 +5909,9 @@ } }, "eslint-config-prettier": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-7.1.0.tgz", - "integrity": "sha512-9sm5/PxaFG7qNJvJzTROMM1Bk1ozXVTKI0buKOyb0Bsr1hrwi0H/TzxF/COtf1uxikIK8SwhX7K6zg78jAzbeA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-7.2.0.tgz", + "integrity": "sha512-rV4Qu0C3nfJKPOAhFujFxB7RMP+URFyQqqOZW9DMRD7ZDTFyjaIlETU3xzHELt++4ugC0+Jm084HQYkkJe+Ivg==", "dev": true }, "eslint-import-resolver-node": { @@ -6084,9 +6099,9 @@ "dev": true }, "eslint-plugin-prettier": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.0.tgz", - "integrity": "sha512-tMTwO8iUWlSRZIwS9k7/E4vrTsfvsrcM5p1eftyuqWH25nKsz/o6/54I7jwQ/3zobISyC7wMy9ZsFwgTxOcOpQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz", + "integrity": "sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==", "dev": true, "requires": { "prettier-linter-helpers": "^1.0.0" @@ -8754,6 +8769,11 @@ "package-json": "^6.3.0" } }, + "leaflet": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", + "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==" + }, "less": { "version": "3.12.2", "resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz", diff --git a/package.json b/package.json index ced311f..770eb33 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "flag-icon-css": "^3.5.0", "i18n-iso-countries": "^6.4.0", "jsonwebtoken": "^8.5.1", + "leaflet": "^1.7.1", "libphonenumber-js": "^1.9.8", "mongoose": "~5.10.11", "mongoose-unique-validator": "^2.0.3", @@ -69,6 +70,7 @@ "@types/express": "^4.17.11", "@types/jasmine": "~3.6.0", "@types/jsonwebtoken": "^8.5.0", + "@types/leaflet": "^1.5.23", "@types/mongoose-unique-validator": "^1.0.4", "@types/morgan": "^1.9.2", "@types/node": "^12.19.13", @@ -77,12 +79,12 @@ "codelyzer": "^6.0.0", "eslint": "^7.6.0", "eslint-config-airbnb-typescript": "^12.0.0", - "eslint-config-prettier": "^7.1.0", + "eslint-config-prettier": "^7.2.0", "eslint-plugin-html": "^6.1.1", "eslint-plugin-import": "^2.22.0", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", - "eslint-plugin-prettier": "^3.3.0", + "eslint-plugin-prettier": "^3.3.1", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c250638..253a79e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router'; import { MainPageComponent } from './base/pages/main-page/main-page.component'; // import { NotFoundPageComponent } from './base/components/not-found-page/not-found-page.component'; +import { MapPageComponent } from './map/pages/map-page/map-page.component'; const routes: Routes = [ { path: 'home', component: MainPageComponent }, @@ -12,6 +13,7 @@ const routes: Routes = [ }, { path: '', redirectTo: '/home', pathMatch: 'full' }, // { path: '**', component: NotFoundPageComponent } // TODO Wildcard route for a 404 page + { path: 'map', component: MapPageComponent }, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a80c7e0..c30a08f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,6 +14,7 @@ import { SettingsModule } from './settings/settings.module'; import { AuthInterceptor } from './core/interceptors/auth.interceptor'; import { ErrorComponent } from './shared/components/error/error.component'; import { WarningComponent } from './shared/components/warning/warning.component'; +import { MapModule } from './map/map.module'; // this function for load any static json file from ./assets/i18n export function HttpLoaderFactory(http: HttpClient): TranslateLoader { @@ -34,6 +35,7 @@ export function initializeApp1(appInitService: AppInitService) { HttpClientModule, BaseModule, SettingsModule, + MapModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, diff --git a/src/app/map/components/map/map.component.html b/src/app/map/components/map/map.component.html new file mode 100644 index 0000000..50b0304 --- /dev/null +++ b/src/app/map/components/map/map.component.html @@ -0,0 +1,5 @@ +
+
+
+
+
\ No newline at end of file diff --git a/src/app/map/components/map/map.component.scss b/src/app/map/components/map/map.component.scss new file mode 100644 index 0000000..3fa096b --- /dev/null +++ b/src/app/map/components/map/map.component.scss @@ -0,0 +1,17 @@ +.map-container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 30px; +} + +.map-frame { + border: 2px solid wheat; + height: 100%; +} + +#map { + height: 100%; +} \ No newline at end of file diff --git a/src/app/map/components/map/map.component.ts b/src/app/map/components/map/map.component.ts new file mode 100644 index 0000000..63d4f04 --- /dev/null +++ b/src/app/map/components/map/map.component.ts @@ -0,0 +1,31 @@ +import { AfterViewInit, Component } from '@angular/core'; +import * as L from 'leaflet'; +import { MarkerService } from '../../services/marker.service'; + +@Component({ + selector: 'app-map', + templateUrl: './map.component.html', + styleUrls: ['./map.component.scss'] +}) +export class MapComponent implements AfterViewInit { + private map!: L.Map; + + constructor(private markerService: MarkerService) { } + + ngAfterViewInit(): void { + this.initMap(); + } + + private initMap(): void { + this.map = L.map('map', { + center: [50.45466, 30.5238], + zoom: 2 + }); + + const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' + }); + tiles.addTo(this.map); + } +} diff --git a/src/app/map/map.module.ts b/src/app/map/map.module.ts new file mode 100644 index 0000000..fea7784 --- /dev/null +++ b/src/app/map/map.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MapPageComponent } from './pages/map-page/map-page.component'; +import { MapComponent } from './components/map/map.component'; +import { SharedModule } from '../shared/shared.module'; +import { MarkerService } from './services/marker.service'; + +@NgModule({ + declarations: [ + MapPageComponent, + MapComponent + ], + imports: [ + CommonModule, + SharedModule + ], + exports: [ + MapPageComponent + ], + providers: [ + MarkerService + ], +}) +export class MapModule { } diff --git a/src/app/map/pages/map-page/map-page.component.html b/src/app/map/pages/map-page/map-page.component.html new file mode 100644 index 0000000..5d297a3 --- /dev/null +++ b/src/app/map/pages/map-page/map-page.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/map/pages/map-page/map-page.component.scss b/src/app/map/pages/map-page/map-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/map/pages/map-page/map-page.component.spec.ts b/src/app/map/pages/map-page/map-page.component.spec.ts new file mode 100644 index 0000000..ca0ae31 --- /dev/null +++ b/src/app/map/pages/map-page/map-page.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { MapPageComponent } from './map-page.component'; + +describe('MapPageComponent', () => { + let component: MapPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MapPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MapPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/map/pages/map-page/map-page.component.ts b/src/app/map/pages/map-page/map-page.component.ts new file mode 100644 index 0000000..2e4ae8e --- /dev/null +++ b/src/app/map/pages/map-page/map-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-map-page', + templateUrl: './map-page.component.html', + styleUrls: ['./map-page.component.scss'] +}) +export class MapPageComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/map/services/marker.service.spec.ts b/src/app/map/services/marker.service.spec.ts new file mode 100644 index 0000000..ba67db9 --- /dev/null +++ b/src/app/map/services/marker.service.spec.ts @@ -0,0 +1,16 @@ +/* tslint:disable:no-unused-variable */ + +import { TestBed, async, inject } from '@angular/core/testing'; +import { MarkerService } from './marker.service'; + +describe('Service: Marker', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [MarkerService] + }); + }); + + it('should ...', inject([MarkerService], (service: MarkerService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/map/services/marker.service.ts b/src/app/map/services/marker.service.ts new file mode 100644 index 0000000..531c946 --- /dev/null +++ b/src/app/map/services/marker.service.ts @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import * as L from 'leaflet'; + +@Injectable({ + providedIn: 'root' +}) +export class MarkerService { +private map!: L.Map; + +constructor(private http: HttpClient) { } + +} diff --git a/src/styles.scss b/src/styles.scss index ea2ce6c..f06353b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,6 +4,7 @@ @import '~ngx-sharebuttons/themes/material/material-dark-theme'; @import '~@angular/material/theming'; @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap'); +@import "~leaflet/dist/leaflet.css"; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only From 3e625970d5798ceb669c75dc48dc3a34ed09d574 Mon Sep 17 00:00:00 2001 From: coriander31415 Date: Tue, 23 Feb 2021 08:51:28 +0200 Subject: [PATCH 2/5] test: markers rendering --- .prettierrc.json | 3 +- src/app/map/components/map/map.component.ts | 7 +++-- src/app/map/services/marker.service.ts | 34 +++++++++++++++++++-- src/assets/test/us_capitals.geojson | 1 + 4 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 src/assets/test/us_capitals.geojson diff --git a/.prettierrc.json b/.prettierrc.json index 9eb8187..62736e0 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -7,5 +7,6 @@ "quoteProps": "as-needed", "trailingComma": "none", "bracketSpacing": true, - "arrowParens": "always" + "arrowParens": "always", + "editor.formatOnSave": true } diff --git a/src/app/map/components/map/map.component.ts b/src/app/map/components/map/map.component.ts index 63d4f04..ae11b2a 100644 --- a/src/app/map/components/map/map.component.ts +++ b/src/app/map/components/map/map.component.ts @@ -14,12 +14,15 @@ export class MapComponent implements AfterViewInit { ngAfterViewInit(): void { this.initMap(); + // this.markerService.makeCapitalMarkers(this.map); + this.markerService.makeCapitalCircleMarkers(this.map); } private initMap(): void { this.map = L.map('map', { - center: [50.45466, 30.5238], - zoom: 2 + // center: [50.45466, 30.5238], // Kyiv + center: [39.8282, -98.5795], // USA + zoom: 4 }); const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { diff --git a/src/app/map/services/marker.service.ts b/src/app/map/services/marker.service.ts index 531c946..e3a2992 100644 --- a/src/app/map/services/marker.service.ts +++ b/src/app/map/services/marker.service.ts @@ -6,8 +6,38 @@ import * as L from 'leaflet'; providedIn: 'root' }) export class MarkerService { -private map!: L.Map; + capitals: string = '../../assets/test/us_capitals.geojson'; -constructor(private http: HttpClient) { } + static ScaledRadius(val: number, maxVal: number): number { + return 20 * (val / maxVal); + } + constructor(private http: HttpClient) {} + + // test geo-markers + makeCapitalMarkers(map: L.Map): void { + this.http.get(this.capitals).subscribe((res: any) => { + for (const c of res.features) { + const lat = c.geometry.coordinates[0]; + const lon = c.geometry.coordinates[1]; + const marker = L.marker([lon, lat]).addTo(map); + } + }); + } + + // test circle markers resized by population + makeCapitalCircleMarkers(map: L.Map): void { + this.http.get(this.capitals).subscribe((res: any) => { + // Find the maximum population to scale the radii by. + const maxVal = Math.max(...res.features.map((x: any) => x.properties.population), 0); + + for (const c of res.features) { + const lat = c.geometry.coordinates[0]; + const lon = c.geometry.coordinates[1]; + const circle = L.circleMarker([lon, lat], { + radius: MarkerService.ScaledRadius(c.properties.population, maxVal) + }).addTo(map); + } + }); + } } diff --git a/src/assets/test/us_capitals.geojson b/src/assets/test/us_capitals.geojson new file mode 100644 index 0000000..4265129 --- /dev/null +++ b/src/assets/test/us_capitals.geojson @@ -0,0 +1 @@ +{"type": "FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"Point","coordinates":[-86.300629,32.38012]},"properties":{"id":"1","abbrev":"AL","state":"Alabama","capital":"Montgomery","latitude":"32.380120","longitude":"-86.300629","population":"205764","cartodb_id":1,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-134.406794,58.29974]},"properties":{"id":"2","abbrev":"AK","state":"Alaska","capital":"Juneau","latitude":"58.299740","longitude":"-134.406794","population":"31275","cartodb_id":2,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-112.075774,33.44826]},"properties":{"id":"4","abbrev":"AZ","state":"Arizona","capital":"Phoenix","latitude":"33.448260","longitude":"-112.075774","population":"1445632","cartodb_id":3,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-92.274494,34.748655]},"properties":{"id":"5","abbrev":"AR","state":"Arkansas","capital":"Little Rock","latitude":"34.748655","longitude":"-92.274494","population":"193524","cartodb_id":4,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-121.491014,38.579065]},"properties":{"id":"6","abbrev":"CA","state":"California","capital":"Sacramento","latitude":"38.579065","longitude":"-121.491014","population":"466488","cartodb_id":5,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-116.193409,43.60698]},"properties":{"id":"16","abbrev":"ID","state":"Idaho","capital":"Boise","latitude":"43.606980","longitude":"-116.193409","population":"205671","cartodb_id":12,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-104.992259,39.74001]},"properties":{"id":"8","abbrev":"CO","state":"Colorado","capital":"Denver","latitude":"39.740010","longitude":"-104.992259","population":"600158","cartodb_id":6,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-72.674069,41.763325]},"properties":{"id":"9","abbrev":"CT","state":"Connecticut","capital":"Hartford","latitude":"41.763325","longitude":"-72.674069","population":"124775","cartodb_id":7,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.524734,39.158035]},"properties":{"id":"10","abbrev":"DE","state":"Delaware","capital":"Dover","latitude":"39.158035","longitude":"-75.524734","population":"36047","cartodb_id":8,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-84.280649,30.439775]},"properties":{"id":"12","abbrev":"FL","state":"Florida","capital":"Tallahassee","latitude":"30.439775","longitude":"-84.280649","population":"181376","cartodb_id":9,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-84.391109,33.748315]},"properties":{"id":"13","abbrev":"GA","state":"Georgia","capital":"Atlanta","latitude":"33.748315","longitude":"-84.391109","population":"420003","cartodb_id":10,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-157.857614,21.30477]},"properties":{"id":"15","abbrev":"HI","state":"Hawaii","capital":"Honolulu","latitude":"21.304770","longitude":"-157.857614","population":"337256","cartodb_id":11,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-89.643604,39.801055]},"properties":{"id":"17","abbrev":"IL","state":"Illinois","capital":"Springfield","latitude":"39.801055","longitude":"-89.643604","population":"116250","cartodb_id":13,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-86.149964,39.76691]},"properties":{"id":"18","abbrev":"IN","state":"Indiana","capital":"Indianapolis","latitude":"39.766910","longitude":"-86.149964","population":"820445","cartodb_id":14,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-93.615659,41.58979]},"properties":{"id":"19","abbrev":"IA","state":"Iowa","capital":"Des Moines","latitude":"41.589790","longitude":"-93.615659","population":"203433","cartodb_id":15,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-95.671184,39.049285]},"properties":{"id":"20","abbrev":"KS","state":"Kansas","capital":"Topeka","latitude":"39.049285","longitude":"-95.671184","population":"127473","cartodb_id":16,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-84.878694,38.19507]},"properties":{"id":"21","abbrev":"KY","state":"Kentucky","capital":"Frankfort","latitude":"38.195070","longitude":"-84.878694","population":"25527","cartodb_id":17,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-91.186994,30.443345]},"properties":{"id":"22","abbrev":"LA","state":"Louisiana","capital":"Baton Rouge","latitude":"30.443345","longitude":"-91.186994","population":"229493","cartodb_id":18,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-69.776218,44.318036]},"properties":{"id":"23","abbrev":"ME","state":"Maine","capital":"Augusta","latitude":"44.318036","longitude":"-69.776218","population":"19136","cartodb_id":19,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-76.489934,38.9767]},"properties":{"id":"24","abbrev":"MD","state":"Maryland","capital":"Annapolis","latitude":"38.976700","longitude":"-76.489934","population":"38394","cartodb_id":20,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-71.056699,42.358635]},"properties":{"id":"25","abbrev":"MA","state":"Massachusetts","capital":"Boston","latitude":"42.358635","longitude":"-71.056699","population":"617594","cartodb_id":21,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-84.552249,42.73194]},"properties":{"id":"26","abbrev":"MI","state":"Michigan","capital":"Lansing","latitude":"42.731940","longitude":"-84.552249","population":"114297","cartodb_id":22,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-93.093326,44.943829]},"properties":{"id":"27","abbrev":"MN","state":"Minnesota","capital":"Saint Paul","latitude":"44.943829","longitude":"-93.093326","population":"285068","cartodb_id":23,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-90.180489,32.29869]},"properties":{"id":"28","abbrev":"MS","state":"Mississippi","capital":"Jackson","latitude":"32.298690","longitude":"-90.180489","population":"173514","cartodb_id":24,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-92.177839,38.577515]},"properties":{"id":"29","abbrev":"MO","state":"Missouri","capital":"Jefferson City","latitude":"38.577515","longitude":"-92.177839","population":"43079","cartodb_id":25,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-112.021202,46.58976]},"properties":{"id":"30","abbrev":"MT","state":"Montana","capital":"Helana","latitude":"46.589760","longitude":"-112.021202","population":"28190","cartodb_id":26,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-119.766999,39.164885]},"properties":{"id":"32","abbrev":"NV","state":"Nevada","capital":"Carson City","latitude":"39.164885","longitude":"-119.766999","population":"55274","cartodb_id":28,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-71.536604,43.20725]},"properties":{"id":"33","abbrev":"NH","state":"New Hampshire","capital":"Concord","latitude":"43.207250","longitude":"-71.536604","population":"42695","cartodb_id":29,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-74.759404,40.217875]},"properties":{"id":"34","abbrev":"NJ","state":"New Jersey","capital":"Trenton","latitude":"40.217875","longitude":"-74.759404","population":"84913","cartodb_id":30,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-105.937406,35.691543]},"properties":{"id":"35","abbrev":"NM","state":"New Mexico","capital":"Santa Fe","latitude":"35.691543","longitude":"-105.937406","population":"67947","cartodb_id":31,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.755254,42.651445]},"properties":{"id":"36","abbrev":"NY","state":"New York","capital":"Albany","latitude":"42.651445","longitude":"-73.755254","population":"97856","cartodb_id":32,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-78.642669,35.78551]},"properties":{"id":"37","abbrev":"NC","state":"North Carolina","capital":"Raleigh","latitude":"35.785510","longitude":"-78.642669","population":"403892","cartodb_id":33,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-100.779334,46.805372]},"properties":{"id":"38","abbrev":"ND","state":"North Dakota","capital":"Bismarck","latitude":"46.805372","longitude":"-100.779334","population":"61272","cartodb_id":34,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-83.002984,39.96196]},"properties":{"id":"39","abbrev":"OH","state":"Ohio","capital":"Columbus","latitude":"39.961960","longitude":"-83.002984","population":"787033","cartodb_id":35,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-97.520354,35.472015]},"properties":{"id":"40","abbrev":"OK","state":"Oklahoma","capital":"Oklahoma City","latitude":"35.472015","longitude":"-97.520354","population":"579999","cartodb_id":36,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-123.043814,44.93326]},"properties":{"id":"41","abbrev":"OR","state":"Oregon","capital":"Salem","latitude":"44.933260","longitude":"-123.043814","population":"154637","cartodb_id":37,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-76.88223,40.259865]},"properties":{"id":"42","abbrev":"PA","state":"Pennsylvania","capital":"Harrisburg","latitude":"40.259865","longitude":"-76.882230","population":"49528","cartodb_id":38,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-71.411994,41.823875]},"properties":{"id":"44","abbrev":"RI","state":"Rhode Island","capital":"Providence","latitude":"41.823875","longitude":"-71.411994","population":"178042","cartodb_id":39,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-81.045249,33.99855]},"properties":{"id":"45","abbrev":"SC","state":"South Carolina","capital":"Columbia","latitude":"33.998550","longitude":"-81.045249","population":"129272","cartodb_id":40,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-100.350158,44.368924]},"properties":{"id":"46","abbrev":"SD","state":"South Dakota","capital":"Pierre","latitude":"44.368924","longitude":"-100.350158","population":"13646","cartodb_id":41,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-86.778365,36.167783]},"properties":{"id":"47","abbrev":"TN","state":"Tennessee","capital":"Nashville","latitude":"36.167783","longitude":"-86.778365","population":"601222","cartodb_id":42,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-97.742984,30.267605]},"properties":{"id":"48","abbrev":"TX","state":"Texas","capital":"Austin","latitude":"30.267605","longitude":"-97.742984","population":"790390","cartodb_id":43,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-111.888229,40.759505]},"properties":{"id":"49","abbrev":"UT","state":"Utah","capital":"Salt Lake City","latitude":"40.759505","longitude":"-111.888229","population":"186440","cartodb_id":44,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-72.576264,44.260299]},"properties":{"id":"50","abbrev":"VT","state":"Vermont","capital":"Montpelier","latitude":"44.260299","longitude":"-72.576264","population":"7855","cartodb_id":45,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-77.433654,37.5407]},"properties":{"id":"51","abbrev":"VA","state":"Virginia","capital":"Richmond","latitude":"37.540700","longitude":"-77.433654","population":"204214","cartodb_id":46,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.891366,47.039231]},"properties":{"id":"53","abbrev":"WA","state":"Washington","capital":"Olympia","latitude":"47.039231","longitude":"-122.891366","population":"46478","cartodb_id":47,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-81.638989,38.350195]},"properties":{"id":"54","abbrev":"WV","state":"West Virginia","capital":"Charleston","latitude":"38.350195","longitude":"-81.638989","population":"51400","cartodb_id":48,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-89.386694,43.07295]},"properties":{"id":"55","abbrev":"WI","state":"Wisconsin","capital":"Madison","latitude":"43.072950","longitude":"-89.386694","population":"233209","cartodb_id":49,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-104.821544,41.134815]},"properties":{"id":"56","abbrev":"WY","state":"Wyoming","capital":"Cheyenne","latitude":"41.134815","longitude":"-104.821544","population":"59466","cartodb_id":50,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:48:58Z"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-96.707739,40.81362]},"properties":{"id":"27","abbrev":"NE","state":"Nebraska","capital":"Lincoln","latitude":"40.813620","longitude":"-96.707739","population":"258379","cartodb_id":27,"created_at":"2014-07-02T14:48:58Z","updated_at":"2014-07-02T14:50:22Z"}}]} \ No newline at end of file From 022a491c15d8a6a26a4dd958157804ac605ef88a Mon Sep 17 00:00:00 2001 From: coriander31415 Date: Fri, 26 Feb 2021 11:07:54 +0200 Subject: [PATCH 3/5] test: render markers based on GetAllOrg reqst --- src/app/map/components/map/map.component.ts | 5 +- src/app/map/services/marker.service.ts | 62 +++++++++++++-------- 2 files changed, 43 insertions(+), 24 deletions(-) diff --git a/src/app/map/components/map/map.component.ts b/src/app/map/components/map/map.component.ts index ae11b2a..5e15365 100644 --- a/src/app/map/components/map/map.component.ts +++ b/src/app/map/components/map/map.component.ts @@ -15,14 +15,15 @@ export class MapComponent implements AfterViewInit { ngAfterViewInit(): void { this.initMap(); // this.markerService.makeCapitalMarkers(this.map); - this.markerService.makeCapitalCircleMarkers(this.map); + // this.markerService.makeCapitalCircleMarkers(this.map); + this.markerService.makeProjectsMarkers(this.map); } private initMap(): void { this.map = L.map('map', { // center: [50.45466, 30.5238], // Kyiv center: [39.8282, -98.5795], // USA - zoom: 4 + zoom: 2 }); const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { diff --git a/src/app/map/services/marker.service.ts b/src/app/map/services/marker.service.ts index e3a2992..0b756cd 100644 --- a/src/app/map/services/marker.service.ts +++ b/src/app/map/services/marker.service.ts @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as L from 'leaflet'; @@ -6,7 +7,9 @@ import * as L from 'leaflet'; providedIn: 'root' }) export class MarkerService { - capitals: string = '../../assets/test/us_capitals.geojson'; + // capitals: string = '../../assets/test/us_capitals.geojson'; + projectsLink = + 'https://api.globalgiving.org/api/public/projectservice/all/projects/active?api_key=9f4d5d1b-2ecc-4d62-972b-d5bc07df5d92'; static ScaledRadius(val: number, maxVal: number): number { return 20 * (val / maxVal); @@ -14,30 +17,45 @@ export class MarkerService { constructor(private http: HttpClient) {} - // test geo-markers - makeCapitalMarkers(map: L.Map): void { - this.http.get(this.capitals).subscribe((res: any) => { - for (const c of res.features) { - const lat = c.geometry.coordinates[0]; - const lon = c.geometry.coordinates[1]; - const marker = L.marker([lon, lat]).addTo(map); - } + makeProjectsMarkers(map: L.Map): void { + this.http.get(this.projectsLink).subscribe((res: any) => { + res.projects.project.forEach((c: any) => { + const lat = c.latitude; + const lon = c.longitude; + const popupInfo = `${c.title} (${c.contactCity}, ${c.contactCountry})`; + console.log('country, latitude, longitude: ', c.country, c.latitude, c.longitude); + if (lon !== undefined && lat !== undefined) { + const marker = L.marker([lat, lon]).addTo(map); + marker.bindPopup(popupInfo).openPopup(); + } + }); }); } + // test geo-markers + // makeCapitalMarkers(map: L.Map): void { + // this.http.get(this.capitals).subscribe((res: any) => { + // for (const c of res.features) { + // const lat = c.geometry.coordinates[0]; + // const lon = c.geometry.coordinates[1]; + // const marker = L.marker([lon, lat]).addTo(map); + // } + // }); + // } + // test circle markers resized by population - makeCapitalCircleMarkers(map: L.Map): void { - this.http.get(this.capitals).subscribe((res: any) => { - // Find the maximum population to scale the radii by. - const maxVal = Math.max(...res.features.map((x: any) => x.properties.population), 0); + // makeCapitalCircleMarkers(map: L.Map): void { + // this.http.get(this.capitals).subscribe((res: any) => { + // // Find the maximum population to scale the radii by. + // const maxVal = Math.max(...res.features.map((x: any) => x.properties.population), 0); - for (const c of res.features) { - const lat = c.geometry.coordinates[0]; - const lon = c.geometry.coordinates[1]; - const circle = L.circleMarker([lon, lat], { - radius: MarkerService.ScaledRadius(c.properties.population, maxVal) - }).addTo(map); - } - }); - } + // for (const c of res.features) { + // const lat = c.geometry.coordinates[0]; + // const lon = c.geometry.coordinates[1]; + // const circle = L.circleMarker([lon, lat], { + // radius: MarkerService.ScaledRadius(c.properties.population, maxVal) + // }).addTo(map); + // } + // }); + // } } From 2a82d2bf4fc5a2cc01d351cc8feb43d5849a894c Mon Sep 17 00:00:00 2001 From: kastrubait <60570588+kastrubait@users.noreply.github.com> Date: Sat, 27 Feb 2021 08:04:26 +0300 Subject: [PATCH 4/5] feat: geoJson create --- .../project-list/project-list.component.ts | 52 ++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/src/app/base/components/project-list/project-list.component.ts b/src/app/base/components/project-list/project-list.component.ts index 26d4190..d2edf84 100644 --- a/src/app/base/components/project-list/project-list.component.ts +++ b/src/app/base/components/project-list/project-list.component.ts @@ -7,7 +7,7 @@ import { MatDialog } from '@angular/material/dialog'; import { WarningComponent } from '../../../shared/components/warning/warning.component'; import { - IProjectWithFavourite, IQueryOptions, ISearchResults + IProjectWithFavourite, IQueryOptions, ISearchResults, IProject } from '../../../core/models/projects.model'; import { GlobalGivingApiService } from '../../../core/service/global-giving-api.service'; import { DataService } from '../../../core/service/data.service'; @@ -16,6 +16,29 @@ import { AuthService } from '../../../core/service/auth.service'; import { SettingsService } from '../../../settings/servise/settings.service'; import { IFavourite } from '../../../settings/models/favourite.model'; +interface IGeometry { + type: string; + coordinates: number[]; +} + +interface PropertiesGeoJSON { + projectId: number; + title: string; + contactCity: string; + contactCountry: string; +} + +interface IGeoJson { + type: string; + geometry: IGeometry; + properties: PropertiesGeoJSON; +} + +interface ICollectionsGeoJSON { + type: string; + features: IGeoJson[]; +} + @Component({ selector: 'app-project-list', templateUrl: './project-list.component.html', @@ -63,6 +86,8 @@ export class ProjectListComponent implements OnInit, OnDestroy { direction: '' }; + dataForMap!: ICollectionsGeoJSON; + constructor( private globalGivingApiService: GlobalGivingApiService, private settingsService: SettingsService, @@ -125,6 +150,9 @@ export class ProjectListComponent implements OnInit, OnDestroy { fundingIndicator: (Math.floor(100 * (obj.funding / obj.goal)) > 100) ? '100%' : `${Math.floor(100 * (obj.funding / obj.goal))}%` })); + this.dataForMap = this.createGeoJson(this.dataProjects); + localStorage.setItem('rs_geoJson', JSON.stringify(this.dataForMap)); + console.log(this.dataForMap); this.error = false; this.errorMessage = ''; this.preloader.hide(); @@ -187,6 +215,28 @@ export class ProjectListComponent implements OnInit, OnDestroy { } } + createGeoJson(data: IProject[]): ICollectionsGeoJSON { + const geoJson: ICollectionsGeoJSON = { type: 'FeatureCollection', features: [] }; + // eslint-disable-next-line array-callback-return + data.map((dataItem): void => { + const newFeature = { + type: "Feature", + geometry: { + type: "Point", + coordinates: [dataItem.longitude, dataItem.latitude] + }, + properties: { + projectId: dataItem.id, + title: dataItem.title, + contactCountry: dataItem.contactCountry, + contactCity: dataItem.contactCity + } + } + geoJson.features.push(newFeature); + }); + return geoJson; + } + ngOnDestroy(): void { this.subscriptions.forEach((sb) => sb.unsubscribe()) } From 659b1d40fef7971224f822268ff241935ac26eba Mon Sep 17 00:00:00 2001 From: coriander31415 Date: Mon, 1 Mar 2021 15:57:21 +0200 Subject: [PATCH 5/5] test: geoJSON markers from LocalStorage --- src/app/map/services/marker.service.ts | 58 +++++++++++++++++++------- 1 file changed, 43 insertions(+), 15 deletions(-) diff --git a/src/app/map/services/marker.service.ts b/src/app/map/services/marker.service.ts index 0b756cd..eed5c2a 100644 --- a/src/app/map/services/marker.service.ts +++ b/src/app/map/services/marker.service.ts @@ -1,5 +1,9 @@ +/* eslint-disable @typescript-eslint/restrict-template-expressions */ +/* eslint-disable @typescript-eslint/no-unsafe-member-access */ +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ +/* eslint-disable no-restricted-syntax */ /* eslint-disable max-len */ -import { Injectable } from '@angular/core'; +import { Injectable, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as L from 'leaflet'; @@ -8,8 +12,10 @@ import * as L from 'leaflet'; }) export class MarkerService { // capitals: string = '../../assets/test/us_capitals.geojson'; - projectsLink = - 'https://api.globalgiving.org/api/public/projectservice/all/projects/active?api_key=9f4d5d1b-2ecc-4d62-972b-d5bc07df5d92'; + // projectsLink = + // 'https://api.globalgiving.org/api/public/projectservice/all/projects/active?api_key=9f4d5d1b-2ecc-4d62-972b-d5bc07df5d92'; + + geoJsonFromLocal = localStorage.getItem('rs_geoJson'); static ScaledRadius(val: number, maxVal: number): number { return 20 * (val / maxVal); @@ -17,20 +23,42 @@ export class MarkerService { constructor(private http: HttpClient) {} + // test markers from geoJSON makeProjectsMarkers(map: L.Map): void { - this.http.get(this.projectsLink).subscribe((res: any) => { - res.projects.project.forEach((c: any) => { - const lat = c.latitude; - const lon = c.longitude; - const popupInfo = `${c.title} (${c.contactCity}, ${c.contactCountry})`; - console.log('country, latitude, longitude: ', c.country, c.latitude, c.longitude); - if (lon !== undefined && lat !== undefined) { - const marker = L.marker([lat, lon]).addTo(map); - marker.bindPopup(popupInfo).openPopup(); + if (this.geoJsonFromLocal !== null) { + // console.log(this.geoJsonFromLocal); + const projGeoJson = JSON.parse(this.geoJsonFromLocal); + console.log("projGeoJson: ", projGeoJson); + // this.http.get(projGeoJson).subscribe((res: any) => { + for (const c of projGeoJson.features) { + const lat = c.geometry.coordinates[0]; + const lon = c.geometry.coordinates[1]; + const popupInfo = `${c.properties.title} (${c.properties.contactCity}, ${c.properties.contactCountry})`; + console.log("Project ID:", c.properties.projectId, "Cordinates:", lat, lon); + if (lon !== null || lat !== null) { + const marker = L.marker([lon, lat]).addTo(map); + marker.bindPopup(popupInfo).openPopup(); + } } - }); - }); - } + // }); + } +} + + // test markers from http link + // makeProjectsMarkers(map: L.Map): void { + // this.http.get(this.projectsLink).subscribe((res: any) => { + // res.projects.project.forEach((c: any) => { + // const lat = c.latitude; + // const lon = c.longitude; + // const popupInfo = `${c.title} (${c.contactCity}, ${c.contactCountry})`; + // console.log('country, latitude, longitude: ', c.country, c.latitude, c.longitude); + // if (lon !== undefined && lat !== undefined) { + // const marker = L.marker([lat, lon]).addTo(map); + // marker.bindPopup(popupInfo).openPopup(); + // } + // }); + // }); + // } // test geo-markers // makeCapitalMarkers(map: L.Map): void {