Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,243 changes: 490 additions & 753 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^7.2.0",
"@lychee-org/leaflet.photo": "^1.0.0",
"@mollie/api-client": "^4.4.0",
"@paypal/paypal-js": "^9.4.1",
"@primeuix/themes": "^2.0.3",
Expand Down
103 changes: 103 additions & 0 deletions resources/js/composables/photo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import L from "leaflet";

const PhotosLayer = L.FeatureGroup.extend({
options: {
icon: {
iconSize: [40, 40],
},
},

initialize: function (photos: any, options: any) {
L.setOptions(this, options);
// @ts-expect-error initialize does exists
L.FeatureGroup.prototype.initialize.call(this, photos);
},

addLayers: function (photos: any) {
if (photos) {
for (let i = 0, len = photos.length; i < len; i++) {
this.addLayer(photos[i]);
}
}
return this;
},

addLayer: function (photo: any) {
L.FeatureGroup.prototype.addLayer.call(this, this.createMarker(photo));
},

createMarker: function (photo: any) {
const marker: L.Marker & { photo?: any } = L.marker(photo, {
icon: L.divIcon(
L.extend(
{
html: '<div style="background-image: url(' + photo.thumbnail + ');"></div>​',
Comment thread
ildyria marked this conversation as resolved.
className: "leaflet-marker-photo",
},
photo,
this.options.icon,
),
),
title: photo.caption || "",
});
marker.photo = photo;
return marker;
},
});

const photosLayerFunc = function (photos: any, options: any) {
// @ts-expect-error we are expecting 2 arguments
return new PhotosLayer(photos, options);
};

const Cluster = L.MarkerClusterGroup.extend({
options: {
featureGroup: photosLayerFunc,
maxClusterRadius: 100,
showCoverageOnHover: false,
iconCreateFunction: function (cluster: any) {
return new L.DivIcon(
L.extend(
{
className: "leaflet-marker-photo",
html:
'<div style="background-image: url(' +
cluster.getAllChildMarkers()[0].photo.thumbnail +
');"></div>​<b>' +
cluster.getChildCount() +
"</b>",
},
this.icon,
),
);
},
icon: {
iconSize: new L.Point(40, 40),
},
},

initialize: function (options: any) {
options = L.Util.setOptions(this, options);
// @ts-expect-error initialize does exists
L.MarkerClusterGroup.prototype.initialize.call(this);
this._photos = options.featureGroup(null, options);
},

add: function (photos: any) {
this.addLayer(this._photos.addLayers(photos));
return this;
},

clear: function () {
this._photos.clearLayers();
this.clearLayers();
},
});

const clusterFunc = function (options: any) {
// @ts-expect-error we do expect an argument
return new Cluster(options);
};

export { photosLayerFunc, clusterFunc };
2 changes: 0 additions & 2 deletions resources/js/services/sidebar-map.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import L from "leaflet";
import "leaflet-rotatedmarker/leaflet.rotatedMarker.js";
import "leaflet.markercluster/dist/leaflet.markercluster.js";
import "@lychee-org/leaflet.photo/Leaflet.Photo.js";
import "leaflet/dist/leaflet.css";
import "@lychee-org/leaflet.photo/Leaflet.Photo.css";
import { ref } from "vue";
import AlbumService from "./album-service";
import Constants from "./constants";
Expand Down
34 changes: 31 additions & 3 deletions resources/js/views/gallery-panels/Map.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,7 @@ import { useRouter } from "vue-router";
import L, { LatLngBoundsLiteral } from "leaflet";
import "leaflet-rotatedmarker/leaflet.rotatedMarker.js";
import "leaflet.markercluster/dist/leaflet.markercluster.js";
import "@lychee-org/leaflet.photo/Leaflet.Photo.js";
import "leaflet/dist/leaflet.css";
import "@lychee-org/leaflet.photo/Leaflet.Photo.css";
import "leaflet-gpx/gpx.js";
import { useToast } from "primevue/usetoast";
import Toolbar from "primevue/toolbar";
Expand All @@ -41,6 +39,7 @@ import { useTogglablesStateStore } from "@/stores/ModalsState";
import { onMounted } from "vue";
import { useLeftMenuStateStore } from "@/stores/LeftMenuState";
import GoBack from "@/components/headers/GoBack.vue";
import { clusterFunc } from "@/composables/photo";

type MapPhotoEntry = {
lat?: number | null;
Expand Down Expand Up @@ -130,7 +129,7 @@ function fetchData() {
function open() {
// Define how the photos on the map should look
// @ts-expect-error Leaflet.Photo is not typed
photoLayer.value = L.photo.cluster().on("click", function (e: MapClickEvent) {
photoLayer.value = clusterFunc().on("click", function (e: MapClickEvent) {
const photo: MapPhotoEntry = {
photoID: e.layer.photo.photoID,
albumID: e.layer.photo.albumID,
Expand Down Expand Up @@ -295,3 +294,32 @@ onMounted(() => {
loadMapProvider();
});
</script>
<style lang="css">
.leaflet-marker-photo {
border: 2px solid #fff;
box-shadow: 3px 3px 10px #888;
}

.leaflet-marker-photo div {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

.leaflet-marker-photo b {
position: absolute;
top: -7px;
right: -11px;
color: #555;
background-color: #fff;
border-radius: 8px;
height: 12px;
min-width: 12px;
line-height: 12px;
text-align: center;
padding: 3px;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
</style>
1 change: 0 additions & 1 deletion resources/sass/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
@import "primeicons/primeicons.css";
@import "leaflet/dist/leaflet.css";
@import "leaflet.markercluster/dist/MarkerCluster.css";
@import "@lychee-org/leaflet.photo/Leaflet.Photo.css";

@import "tailwindcss";
@plugin "@tailwindcss/typography";
Expand Down
45 changes: 40 additions & 5 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,28 @@ import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import i18n from "laravel-vue-i18n/vite";
import tailwindcss from "@tailwindcss/vite";
import type { Plugin } from 'vite';


function leafletGlobalPlugin(): Plugin {
const LEAFLET_PLUGINS = [
'leaflet-gpx',
'leaflet-rotatedmarker',
'leaflet.markercluster',
];
return {
name: 'vite-plugin-leaflet-global',
transform(code, id) {
if (
LEAFLET_PLUGINS.some((p) => id.includes(p)) &&
!id.endsWith('.css') &&
!id.includes('?vue&type=style')
) {
return { code: `import L from 'leaflet';\n${code}`, map: null };
}
},
};
}

const laravelPlugin = laravel({
input: ["resources/sass/app.css", "resources/js/app.ts"],
Expand Down Expand Up @@ -59,6 +81,7 @@ const localDevelopMiddleware: PluginOption = {
const baseConfig = {
base: "./",
plugins: [
leafletGlobalPlugin(),
tailwindcss(),
vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false } } }),
i18n(),
Expand Down Expand Up @@ -89,13 +112,25 @@ const baseConfig = {
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes("node_modules")) {
return id.toString().split("node_modules/")[1].split("/")[0].toString();
}
codeSplitting: {
groups: [
{
test: /primevue/,
name: 'primevue',
},
],
},
},
},
}
// rollupOptions: {
// output: {
// // manualChunks(id) {
// // if (id.includes("node_modules")) {
// // return id.toString().split("node_modules/")[1].split("/")[0].toString();
// // }
// // },
// },
// },
},
} as UserConfig;

Expand Down
Loading