self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-12 11:15:22 +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; width: 30px;
height: 30px; height: 30px;
color: white; color: white;
border-radius: 50%!important;
} }
::ng-deep .marker-cluster-small div { ::ng-deep .marker-cluster-small div {
background-color: #0094ff; background-color: #0094ff;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%!important;
} }
::ng-deep .marker-cluster-small span { ::ng-deep .marker-cluster-small span {
@ -105,10 +107,12 @@
::ng-deep .marker-cluster-medium { ::ng-deep .marker-cluster-medium {
background-color: rgba(0, 123, 255, 0.6); background-color: rgba(0, 123, 255, 0.6);
color: white; color: white;
border-radius: 50%!important;
} }
::ng-deep .marker-cluster-medium div { ::ng-deep .marker-cluster-medium div {
background-color: #007bff; background-color: #007bff;
border-radius: 50%!important;
} }
::ng-deep .marker-cluster-large { ::ng-deep .marker-cluster-large {
@ -116,12 +120,14 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
color: white; color: white;
border-radius: 50%!important;
} }
::ng-deep .marker-cluster-large div { ::ng-deep .marker-cluster-large div {
background-color: #0062ff; background-color: #0062ff;
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%!important;
} }
::ng-deep .marker-cluster-large span { ::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: { baseLayers: {}, overlays: {
Photos: markerClusterGroup({ Photos: markerClusterGroup({
animate: true, maxClusterRadius: 20,
animateAddingMarkers: true,
iconCreateFunction: (cluster) => { iconCreateFunction: (cluster) => {
const childCount = cluster.getChildCount(); const childCount = cluster.getChildCount();
let size: number; let size: number;
@ -158,7 +157,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
height: GalleryMapLightboxComponent.getScreenHeight() height: GalleryMapLightboxComponent.getScreenHeight()
} as Dimension); } as Dimension);
this.showImages(); this.showImages();
this.centerMap(); // this.centerMap();
PageHelper.hideScrollY(); PageHelper.hideScrollY();
await Utils.wait(0); await Utils.wait(0);
this.lightboxDimension = ({ this.lightboxDimension = ({
@ -197,7 +196,6 @@ export class GalleryMapLightboxComponent implements OnChanges {
showImages(): void { showImages(): void {
this.hideImages(); this.hideImages();
this.mapLayersControlOption.overlays.Photos.clearLayers();
// make sure to enable photos layers when opening map // make sure to enable photos layers when opening map
if (this.leafletMap && !this.leafletMap.hasLayer(this.mapLayersControlOption.overlays.Photos)) { if (this.leafletMap && !this.leafletMap.hasLayer(this.mapLayersControlOption.overlays.Photos)) {
@ -264,6 +262,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
iconUrl: iconTh.Src, iconUrl: iconTh.Src,
iconSize: this.usedIconSize, // size of the icon iconSize: this.usedIconSize, // size of the icon
})); }));
mkr.options.alt = p.name;
}; };
if (iconTh.Available === true) { if (iconTh.Available === true) {
@ -289,6 +288,8 @@ export class GalleryMapLightboxComponent implements OnChanges {
th.destroy(); th.destroy();
}); });
this.thumbnailsOnLoad = []; this.thumbnailsOnLoad = [];
this.mapLayersControlOption.overlays.Photos.clearLayers();
} }
@HostListener('window:keydown', ['$event']) @HostListener('window:keydown', ['$event'])
@ -332,7 +333,10 @@ export class GalleryMapLightboxComponent implements OnChanges {
} }
this.usedIconSize = this.leafletMap.getZoom() < 15 ? this.smallIconSize : this.iconSize; this.usedIconSize = this.leafletMap.getZoom() < 15 ? this.smallIconSize : this.iconSize;
(this.mapLayersControlOption.overlays.Photos.getLayers() as Marker[]).forEach(mkr => { (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.getIcon().options.iconSize = this.usedIconSize;
mkr.setIcon(mkr.getIcon()); mkr.setIcon(mkr.getIcon());
}); });