diff --git a/package-lock.json b/package-lock.json index c67b09a..ed1b9e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "axios": "^1.4.0", "js-yaml": "^4.1.0", "leaflet": "^1.9.4", + "leaflet.markercluster": "^1.5.3", "markdown-it-anchor": "^8.6.7", "pinia": "^2.1.6", "unhead": "^1.3.4", @@ -3346,6 +3347,14 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" }, + "node_modules/leaflet.markercluster": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", + "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==", + "peerDependencies": { + "leaflet": "^1.3.1" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", diff --git a/package.json b/package.json index afaa8fe..f228c2e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "axios": "^1.4.0", "js-yaml": "^4.1.0", "leaflet": "^1.9.4", + "leaflet.markercluster": "^1.5.3", "markdown-it-anchor": "^8.6.7", "pinia": "^2.1.6", "unhead": "^1.3.4", diff --git a/src/components/Map/VMap.client.vue b/src/components/Map/VMap.client.vue index f677ceb..410f568 100644 --- a/src/components/Map/VMap.client.vue +++ b/src/components/Map/VMap.client.vue @@ -16,6 +16,9 @@ import { makeTileFromConfiguration } from './utils/makeTileFromConfiguration' import '@geoman-io/leaflet-geoman-free' import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css' +import 'leaflet.markercluster/dist/leaflet.markercluster' +import 'leaflet.markercluster/dist/MarkerCluster.css' +import 'leaflet.markercluster/dist/MarkerCluster.Default.css' delete L.Icon.Default.prototype._getIconUrl @@ -94,6 +97,16 @@ const props = defineProps({ prefix: { type: [String, Boolean], default: false + }, + + cluster: { + type: Boolean, + default: true + }, + + maxClusterRadius: { + type: Number, + default: 20 } }) @@ -155,7 +168,8 @@ onMounted(() => { center: props.center, zoom: props.zoom, worldCopyJump: true, - dragging: props.dragging + dragging: props.dragging, + maxZoom: props.maxZoom } if (props.disableZoom) { @@ -169,7 +183,9 @@ onMounted(() => { } drawnItems = new L.FeatureGroup() - geoJSONGroup = new L.FeatureGroup() + geoJSONGroup = props.cluster + ? new L.markerClusterGroup({ maxClusterRadius: props.maxClusterRadius }) + : new L.FeatureGroup() mapObject = L.map(leafletMap.value, options) mapObject.attributionControl.setPrefix(props.prefix) diff --git a/src/modules/otus/utils/files.js b/src/modules/otus/utils/files.js deleted file mode 100644 index 449b666..0000000 --- a/src/modules/otus/utils/files.js +++ /dev/null @@ -1,29 +0,0 @@ -function downloadTextFile(text, fileType, fileName) { - const blob = new Blob([text], { type: fileType }) - const a = document.createElement('a') - - a.download = fileName - a.href = URL.createObjectURL(blob) - a.dataset.downloadurl = [fileType, a.download, a.href].join(':') - a.style.display = 'none' - document.body.appendChild(a) - a.click() - document.body.removeChild(a) - setTimeout(() => { - URL.revokeObjectURL(a.href) - }, 1500) -} - -function blobToArrayBuffer(blob) { - return new Promise((resolve, reject) => { - const reader = new FileReader() - - reader.addEventListener('loadend', (_) => { - resolve(reader.result) - }) - reader.addEventListener('error', reject) - reader.readAsArrayBuffer(blob) - }) -} - -export { blobToArrayBuffer, downloadTextFile } diff --git a/src/modules/otus/utils/index.js b/src/modules/otus/utils/index.js index 9fe8130..1094c15 100644 --- a/src/modules/otus/utils/index.js +++ b/src/modules/otus/utils/index.js @@ -1,4 +1,3 @@ -export * from './files' export * from './isRankGroup' export * from './makeGeoJSONFeature' export * from './removeDuplicateShapes'