self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-10 11:10:35 +02:00
Code Issues Releases Activity

improving map marker cluster design

Browse Source
This commit is contained in:
Patrik J. Braun 2021-05-02 08:50:43 +02:00
parent 058d99a0ed
commit 491400523e
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,12 +89,14 @@
width: 30px;
height: 30px;
color: white;
border-radius: 50%!important;
}
::ng-deep .marker-cluster-small div {
background-color: #0094ff;
width: 20px;
height: 20px;
border-radius: 50%!important;
}
::ng-deep .marker-cluster-small span {
@ -105,10 +107,12 @@
::ng-deep .marker-cluster-medium {
background-color: rgba(0, 123, 255, 0.6);
color: white;
border-radius: 50%!important;
}
::ng-deep .marker-cluster-medium div {
background-color: #007bff;
border-radius: 50%!important;
}
::ng-deep .marker-cluster-large {
@ -116,12 +120,14 @@
width: 50px;
height: 50px;
color: white;
border-radius: 50%!important;
}
::ng-deep .marker-cluster-large div {
background-color: #0062ff;
width: 40px;
height: 40px;
border-radius: 50%!important;
}
::ng-deep .marker-cluster-large span {

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

@ -61,8 +61,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
{
baseLayers: {}, overlays: {
Photos: markerClusterGroup({
animate: true,
animateAddingMarkers: true,
maxClusterRadius: 20,
iconCreateFunction: (cluster) => {
const childCount = cluster.getChildCount();
let size: number;
@ -158,7 +157,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
height: GalleryMapLightboxComponent.getScreenHeight()
} as Dimension);
this.showImages();
this.centerMap();
// this.centerMap();
PageHelper.hideScrollY();
await Utils.wait(0);
this.lightboxDimension = ({
@ -197,7 +196,6 @@ export class GalleryMapLightboxComponent implements OnChanges {
showImages(): void {
this.hideImages();
this.mapLayersControlOption.overlays.Photos.clearLayers();
// make sure to enable photos layers when opening map
if (this.leafletMap && !this.leafletMap.hasLayer(this.mapLayersControlOption.overlays.Photos)) {
@ -264,6 +262,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
iconUrl: iconTh.Src,
iconSize: this.usedIconSize, // size of the icon
}));
mkr.options.alt = p.name;
};
if (iconTh.Available === true) {
@ -289,6 +288,8 @@ export class GalleryMapLightboxComponent implements OnChanges {
th.destroy();
});
this.thumbnailsOnLoad = [];
this.mapLayersControlOption.overlays.Photos.clearLayers();
}
@HostListener('window:keydown', ['$event'])
@ -332,7 +333,10 @@ export class GalleryMapLightboxComponent implements OnChanges {
}
this.usedIconSize = this.leafletMap.getZoom() < 15 ? this.smallIconSize : this.iconSize;
(this.mapLayersControlOption.overlays.Photos.getLayers() as Marker[]).forEach(mkr => {
// if alt is not present icon is not yet set, so do not change the size
if (!mkr.options.alt) {
return;
}
mkr.getIcon().options.iconSize = this.usedIconSize;
mkr.setIcon(mkr.getIcon());
});