xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Adding cluster marker to map #256

Browse Source
This commit is contained in:
Patrik J. Braun 2021-04-30 23:40:32 +02:00
parent 4f2b02b7e0
commit 494eab6f08
9 changed files with 142 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
angular.json
View File

@ -72,6 +72,8 @@
"open-iconic/font/css/open-iconic-bootstrap.css",
"ngx-toastr/toastr.css",
"leaflet/dist/leaflet.css",
"leaflet.markercluster/dist/MarkerCluster.css",
"leaflet.markercluster/dist/MarkerCluster.Default.css",
"src/frontend/styles.css"
],
"scripts": [],
@ -144,6 +146,8 @@
"open-iconic/font/css/open-iconic-bootstrap.css",
"ngx-bootstrap/datepicker/bs-datepicker.css",
"leaflet/dist/leaflet.css",
"leaflet.markercluster/dist/MarkerCluster.css",
"leaflet.markercluster/dist/MarkerCluster.Default.css",
"src/frontend/styles.css"
],
"assets": [

27
package-lock.json generated
View File

@ -770,6 +770,12 @@
"integrity": "sha512-lq7LduBP/vXcaSEmKnx7mzCR8WsoYqh9pB6BNnq53yeCwsqRbG3GdKye1/i8VvoRzjDsmQBPQsIFZ9uclXrtgg==",
"dev": true
},
"@asymmetrik/ngx-leaflet-markercluster": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@asymmetrik/ngx-leaflet-markercluster/-/ngx-leaflet-markercluster-5.0.1.tgz",
"integrity": "sha512-XqRSgMKZN/670/nRXtjZ98fniuCzvQnZ5EDEOr+coEC4OI0OYeDIvAN253C5U8kJX6hIdzDtQcbOrC1milWUBw==",
"dev": true
},
"@babel/code-frame": {
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
@ -3424,9 +3430,9 @@
}
},
"@types/geojson": {
"version": "7946.0.4",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.4.tgz",
"integrity": "sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q==",
"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": {
@ -3514,6 +3520,15 @@
"@types/geojson": "*"
}
},
"@types/leaflet.markercluster": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.4.4.tgz",
"integrity": "sha512-BQAilNWlBpYl4+PrsJXLOh4vyv7KfWi5kh3Fclg5y4gEeNeXKqhS6y1zzBB4+wcTuVUnMWfm2G0MfqA4yA5A5A==",
"dev": true,
"requires": {
"@types/leaflet": "*"
}
},
"@types/mime": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@ -12101,6 +12116,12 @@
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==",
"dev": true
},
"leaflet.markercluster": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz",
"integrity": "sha512-Fvf/cq4o806mJL50n+fZW9+QALDDLPvt7vuAjlD2vfnxx3srMDs2vWINJze4nKYJYRY45OC6tM/669C3pLwMCA==",
"dev": true
},
"less": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",

7
package.json
View File

@ -74,7 +74,8 @@
"@angular/platform-browser": "11.2.9",
"@angular/platform-browser-dynamic": "11.2.9",
"@angular/router": "11.2.9",
"@asymmetrik/ngx-leaflet": "^8.1.0",
"@asymmetrik/ngx-leaflet": "8.1.0",
"@asymmetrik/ngx-leaflet-markercluster": "5.0.1",
"@ngx-loading-bar/core": "5.1.1",
"@types/bcrypt": "3.0.1",
"@types/bcryptjs": "2.4.2",
@ -91,7 +92,8 @@
"@types/image-size": "0.8.0",
"@types/jasmine": "3.6.9",
"@types/jsonwebtoken": "8.5.1",
"@types/leaflet": "^1.7.0",
"@types/leaflet": "1.7.0",
"@types/leaflet.markercluster": "1.4.4",
"@types/node": "14.14.37",
"@types/node-geocoder": "3.24.1",
"@types/sharp": "0.23.1",
@ -123,6 +125,7 @@
"karma-remap-istanbul": "0.6.0",
"karma-systemjs": "0.16.0",
"leaflet": "^1.7.1",
"leaflet.markercluster": "1.5.0",
"mocha": "8.3.2",
"natural-orderby": "2.0.3",
"ngx-bootstrap": "6.2.0",

6
src/frontend/app/app.module.ts
View File

@ -10,7 +10,7 @@ import {FullScreenService} from './ui/gallery/fullscreen.service';
import {AuthenticationService} from './model/network/authentication.service';
import {UserMangerSettingsComponent} from './ui/settings/usermanager/usermanager.settings.component';
import {FrameComponent} from './ui/frame/frame.component';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import {LeafletModule} from '@asymmetrik/ngx-leaflet';
import {LoadingBarModule} from '@ngx-loading-bar/core';
import {GalleryLightboxMediaComponent} from './ui/gallery/lightbox/media/media.lightbox.gallery.component';
import {GalleryPhotoLoadingComponent} from './ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component';
@ -98,6 +98,7 @@ import {SearchQueryParserService} from './ui/gallery/search/search-query-parser.
import {GallerySearchFieldComponent} from './ui/gallery/search/search-field/search-field.gallery.component';
import {AppRoutingModule} from './app.routing';
import {CookieService} from 'ngx-cookie-service';
import {LeafletMarkerClusterModule} from '@asymmetrik/ngx-leaflet-markercluster';
@Injectable()
@ -146,7 +147,8 @@ export class CustomUrlSerializer implements UrlSerializer {
BsDatepickerModule.forRoot(),
TimepickerModule.forRoot(),
LoadingBarModule,
LeafletModule
LeafletModule,
LeafletMarkerClusterModule
],
declarations: [AppComponent,
LoginComponent,

47
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
View File

@ -84,3 +84,50 @@
left: calc(50% - 25px);
}
::ng-deep .marker-cluster-small {
background-color: rgba(0, 148, 255, 0.6);
width: 30px;
height: 30px;
color: white;
}
::ng-deep .marker-cluster-small div {
background-color: #0094ff;
width: 20px;
height: 20px;
}
::ng-deep .marker-cluster-small span {
line-height: 20px;
}
::ng-deep .marker-cluster-medium {
background-color: rgba(0, 123, 255, 0.6);
color: white;
}
::ng-deep .marker-cluster-medium div {
background-color: #007bff;
}
::ng-deep .marker-cluster-large {
background-color: rgba(0, 98, 255, 0.6);
width: 50px;
height: 50px;
color: white;
}
::ng-deep .marker-cluster-large div {
background-color: #0062ff;
width: 40px;
height: 40px;
}
::ng-deep .marker-cluster-large span {
font-size: 16px;
line-height: 39px;
}

61
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -13,6 +13,7 @@ import {MapService} from '../map.service';
import {
control,
Control,
divIcon,
icon,
LatLng,
latLng,
@ -23,6 +24,8 @@ import {
MapOptions,
Marker,
marker,
markerClusterGroup,
MarkerClusterGroup,
Point,
polyline,
tileLayer
@ -47,13 +50,43 @@ export class GalleryMapLightboxComponent implements OnChanges {
@ViewChild('root', {static: true}) elementRef: ElementRef;
public mapOptions: MapOptions = {
zoom: 2,
// setting max zoom is needed to MarkerCluster https://github.com/Leaflet/Leaflet.markercluster/issues/611
maxZoom: 2,
center: latLng(0, 0)
};
private smallIconSize = new Point(Config.Client.Media.Thumbnail.iconSize * 0.75, Config.Client.Media.Thumbnail.iconSize * 0.75);
private iconSize = new Point(Config.Client.Media.Thumbnail.iconSize, Config.Client.Media.Thumbnail.iconSize);
private mapLayersControlOption: LeafletControlLayersConfig & { overlays: { Photos: LayerGroup, Paths: LayerGroup } } =
{baseLayers: {}, overlays: {Photos: layerGroup([]), Paths: layerGroup([])}};
private usedIconSize = this.iconSize;
private mapLayersControlOption: LeafletControlLayersConfig & { overlays: { Photos: MarkerClusterGroup, Paths: LayerGroup } } =
{
baseLayers: {}, overlays: {
Photos: markerClusterGroup({
animate: true,
animateAddingMarkers: true,
iconCreateFunction: (cluster) => {
const childCount = cluster.getChildCount();
let size: number;
let c = ' marker-cluster-';
if (childCount < 10) {
c += 'small';
size = 30;
} else if (childCount < 100) {
c += 'medium';
size = 40;
} else {
c += 'large';
size = 50;
}
return divIcon({
html: '<div><span>' + childCount + '</span></div>',
className: 'marker-cluster' + c,
iconSize: new Point(size, size)
});
}
}), Paths: layerGroup([])
}
};
private mapLayerControl: Control.Layers;
private thumbnailsOnLoad: ThumbnailBase[] = [];
private startPosition: Dimension = null;
@ -229,7 +262,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
const setIcon = () => {
mkr.setIcon(icon({
iconUrl: iconTh.Src,
iconSize: this.iconSize, // size of the icon
iconSize: this.usedIconSize, // size of the icon
}));
};
@ -281,19 +314,27 @@ export class GalleryMapLightboxComponent implements OnChanges {
onMapReady(map: Map): void {
this.leafletMap = map;
this.leafletMap.setMaxZoom(undefined);
this.leafletMap.zoomControl.setPosition('bottomright');
this.mapLayerControl.addTo(this.leafletMap);
}
onLeafletZoom(): void {
if (Config.Client.Map.useImageMarkers === false) {
return;
}
if ((this.leafletMap.getZoom() < 15 && this.usedIconSize === this.smallIconSize) ||
(this.leafletMap.getZoom() >= 15 && this.usedIconSize === this.iconSize)) {
// all set no change needed
return;
}
this.usedIconSize = this.leafletMap.getZoom() < 15 ? this.smallIconSize : this.iconSize;
(this.mapLayersControlOption.overlays.Photos.getLayers() as Marker[]).forEach(mkr => {
if (this.leafletMap.getZoom() < 15) {
mkr.getIcon().options.iconSize = this.smallIconSize;
mkr.setIcon(mkr.getIcon());
} else {
mkr.getIcon().options.iconSize = this.iconSize;
mkr.setIcon(mkr.getIcon());
}
mkr.getIcon().options.iconSize = this.usedIconSize;
mkr.setIcon(mkr.getIcon());
});
}

9
src/frontend/app/ui/gallery/map/map.gallery.component.css
View File

@ -1,20 +1,21 @@
.map{
/*z-index: 0;*/
.leaflet-map {
z-index: 0;
width: 100%;
height: 100%;
}
.clickable{
.clickable {
cursor: pointer;
}
.oi{
.oi {
font-size: 59pt;
}
#map {
width: 100%;
height: 100%;
z-index: 0;
}
.overlay {

2
src/frontend/app/ui/gallery/map/map.gallery.component.html
View File

@ -2,7 +2,7 @@
<app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox>
<div class="clickable" id="map" #map (click)="click()">
<div
class="map"
class="leaflet-map"
leaflet
[leafletOptions]="options"
[leafletLayers]="markerLayer"

1
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
View File

@ -1,5 +1,6 @@
.nav-container {
position: relative;
z-index: 2;
}
.right-side {