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/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/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())
}
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..5e15365
--- /dev/null
+++ b/src/app/map/components/map/map.component.ts
@@ -0,0 +1,35 @@
+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();
+ // this.markerService.makeCapitalMarkers(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: 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..eed5c2a
--- /dev/null
+++ b/src/app/map/services/marker.service.ts
@@ -0,0 +1,89 @@
+/* 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, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import * as L from 'leaflet';
+
+@Injectable({
+ providedIn: 'root'
+})
+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';
+
+ geoJsonFromLocal = localStorage.getItem('rs_geoJson');
+
+ static ScaledRadius(val: number, maxVal: number): number {
+ return 20 * (val / maxVal);
+ }
+
+ constructor(private http: HttpClient) {}
+
+ // test markers from geoJSON
+ makeProjectsMarkers(map: L.Map): void {
+ 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 {
+ // 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
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