hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add marker-clustering support

Browse Source
This commit is contained in:
tim-herbst 2020-12-19 16:27:16 +01:00 committed by Tim Herbst
parent 82c5c3e3c0
commit bb5921fe15
3 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
projects/project-3/frontend/package-lock.json generated
View File

@ -7106,6 +7106,11 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==" "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
}, },
"leaflet.markercluster": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",
"integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw=="
},
"less": { "less": {
"version": "3.13.1", "version": "3.13.1",
"resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz", "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",

1
projects/project-3/frontend/package.json
View File

@ -23,6 +23,7 @@
"@angular/platform-browser-dynamic": "~10.2.0", "@angular/platform-browser-dynamic": "~10.2.0",
"@angular/router": "~10.2.0", "@angular/router": "~10.2.0",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"leaflet.markercluster": "^1.4.1",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"zone.js": "~0.10.2" "zone.js": "~0.10.2"

10
projects/project-3/frontend/src/app/service/map.service.ts
View File

@ -1,5 +1,6 @@
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import * as L from 'leaflet'; import * as L from 'leaflet';
import 'leaflet.markercluster';
import {HttpClient} from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import {environment} from '../../environments/environment'; import {environment} from '../../environments/environment';
@ -48,9 +49,16 @@ export class MapService {
} }
public makeStationsWithDummyData(): void { public makeStationsWithDummyData(): void {
const markerClusters = L.markerClusterGroup({
spiderflyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true
});
for (const station of dummyData) { for (const station of dummyData) {
L.marker([station.lat, station.lon], {icon: createIcon}).addTo(this.map); const marker = L.marker([station.lat, station.lon], {icon: createIcon});
markerClusters.addLayer(marker);
} }
this.map.addLayer(markerClusters);
} }
public makeStationMarkers(): void { public makeStationMarkers(): void {