From 12d88a39061922c7cc2a50d15606c4167ee487cb Mon Sep 17 00:00:00 2001 From: Gugustinette Date: Sat, 1 Jun 2024 01:51:49 +0200 Subject: [PATCH 01/14] First MarkerCluster idea --- .nuxtrc | 2 +- package-lock.json | 10 ++++ package.json | 1 + playground/app.vue | 10 ++++ playground/nuxt.config.ts | 13 ++++- playground/pages/map/markercluster.vue | 57 +++++++++++++++++++++ src/module.ts | 25 +++++++-- src/runtime/composables/useMarkerCluster.ts | 36 +++++++++++++ 8 files changed, 148 insertions(+), 6 deletions(-) create mode 100644 playground/pages/map/markercluster.vue create mode 100644 src/runtime/composables/useMarkerCluster.ts diff --git a/.nuxtrc b/.nuxtrc index f033419..167e6c7 100644 --- a/.nuxtrc +++ b/.nuxtrc @@ -1,2 +1,2 @@ -imports.autoImport=false +imports.autoImport=true typescript.includeWorkspace=true diff --git a/package-lock.json b/package-lock.json index ac2c73d..921e2d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "caniuse-lite": "^1.0.30001625", "changelogen": "^0.5.3", "eslint": "^8.42.0", + "leaflet.markercluster": "^1.5.3", "nuxt": "^3.5.1", "vitepress": "^1.1.3", "vitest": "^1.5.2" @@ -8597,6 +8598,15 @@ "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==", + "dev": true, + "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 08628c5..daab83f 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "caniuse-lite": "^1.0.30001625", "changelogen": "^0.5.3", "eslint": "^8.42.0", + "leaflet.markercluster": "^1.5.3", "nuxt": "^3.5.1", "vitepress": "^1.1.3", "vitest": "^1.5.2" diff --git a/playground/app.vue b/playground/app.vue index 19c58a3..aa83dce 100644 --- a/playground/app.vue +++ b/playground/app.vue @@ -11,6 +11,9 @@
  • GeoJson
    • +
  • + Marker Cluster +
  • Draw
    • @@ -23,5 +26,12 @@ diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 7d5364b..23f4ead 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -1,7 +1,16 @@ export default defineNuxtConfig({ modules: ['../src/module'], - devtools: { enabled: true }, + devtools: { + enabled: true, + + timeline: { + enabled: true + } + }, app: { baseURL: '/Nuxt-Leaflet/' + }, + nuxtLeaflet: { + markercluster: true } -}) +}) \ No newline at end of file diff --git a/playground/pages/map/markercluster.vue b/playground/pages/map/markercluster.vue new file mode 100644 index 0000000..66cac40 --- /dev/null +++ b/playground/pages/map/markercluster.vue @@ -0,0 +1,57 @@ + + + diff --git a/src/module.ts b/src/module.ts index ff81372..9413dd8 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,7 +1,9 @@ -import { defineNuxtModule, addComponent } from '@nuxt/kit' +import { defineNuxtModule, addComponent, createResolver, addImports } from '@nuxt/kit' // Module options TypeScript interface definition -export interface ModuleOptions {} +export interface ModuleOptions { + markercluster?: boolean +} // Components to export export const components = [ @@ -39,10 +41,13 @@ export default defineNuxtModule({ // Default configuration options of the Nuxt module defaults: {}, async setup (options, nuxt) { + // Create a resolver for the module + const resolver = createResolver(import.meta.url) + // Add Leaflet's CSS nuxt.options.css.push('leaflet/dist/leaflet.css') - // Export Vue Leaflet components + // Auto-import Vue Leaflet components for (const component of components) { addComponent({ name: component, @@ -52,5 +57,19 @@ export default defineNuxtModule({ mode: 'all' }) } + + // If markercluster is enabled + if (options.markercluster) { + // Add Leaflet MarkerCluster CSS + nuxt.options.css.push('leaflet.markercluster/dist/MarkerCluster.css') + nuxt.options.css.push('leaflet.markercluster/dist/MarkerCluster.Default.css') + + // Auto-import the runtime composables + addImports({ + name: 'useMarkerCluster', + as: 'useMarkerCluster', + from: resolver.resolve('runtime/composables/useMarkerCluster') + }) + } } }) diff --git a/src/runtime/composables/useMarkerCluster.ts b/src/runtime/composables/useMarkerCluster.ts new file mode 100644 index 0000000..d7e7b16 --- /dev/null +++ b/src/runtime/composables/useMarkerCluster.ts @@ -0,0 +1,36 @@ +import { markerProps } from '@vue-leaflet/vue-leaflet/dist/src/functions/marker'; + +interface Props { + mapInstance: any; + markers: { + name: string; + lat: number; + lng: number; + options?: typeof markerProps; + }[]; +} + +export const useMarkerCluster = async (props: Props) => { + // Import MarkerClusterGroup from leaflet.markercluster + // This is a dynamic import, so it will only be loaded when this function is called + // Also, importing it at the top level will cause errors because it could be loaded before the Leaflet library + const { MarkerClusterGroup } = await import('leaflet.markercluster'); + + // Initialize marker cluster + const markerCluster = new MarkerClusterGroup(); + + // For each marker in props + props.markers.forEach((location: any) => { + // Create a Leaflet marker + const marker = L.marker([location.lat, location.lng], { + title: location.name, + draggable: false + }); + + // Add the marker to the cluster + markerCluster.addLayer(marker); + }); + + // Add the marker cluster to the map + props.mapInstance.leafletObject.addLayer(markerCluster); +} From 691d6f6bdf37d58e2e087d8a511c53f44d442508 Mon Sep 17 00:00:00 2001 From: Gugustinette Date: Sat, 1 Jun 2024 02:11:37 +0200 Subject: [PATCH 02/14] Init some documentation for markercluster --- docs/.vitepress/config.ts | 17 +++--- docs/guide/marker-cluster.md | 83 ++++++++++++++++++++++++++ playground/pages/map/map.vue | 4 +- playground/pages/map/markercluster.vue | 4 +- 4 files changed, 96 insertions(+), 12 deletions(-) create mode 100644 docs/guide/marker-cluster.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 186a45b..0f26ba0 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -22,6 +22,15 @@ export default defineConfig({ { text: 'Usage', link: '/getting-started/usage' } ] }, + { + text: 'Guide', + items: [ + { text: 'Using L', link: '/guide/using-l' }, + { text: 'Accessing Map Instance', link: '/guide/accessing-map-instance' }, + { text: 'Leaflet.markercluster', link: '/guide/marker-cluster' }, + { text: 'Leaflet Draw (Experimental)', link: '/guide/leaflet-draw' } + ] + }, { text: 'Components', items: [ @@ -49,14 +58,6 @@ export default defineConfig({ { text: 'LTooltip', link: '/components/l-tooltip' }, { text: 'LWmsTileLayer', link: '/components/l-wms-tile-layer' }, ] - }, - { - text: 'Guide', - items: [ - { text: 'Using L', link: '/guide/using-l' }, - { text: 'Accessing Map Instance', link: '/guide/accessing-map-instance' }, - { text: 'Leaflet Draw (Experimental)', link: '/guide/leaflet-draw' } - ] } ], diff --git a/docs/guide/marker-cluster.md b/docs/guide/marker-cluster.md new file mode 100644 index 0000000..b595593 --- /dev/null +++ b/docs/guide/marker-cluster.md @@ -0,0 +1,83 @@ +# Using Leaflet.markercluster + +The guide explains how to use the [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) plugin. +A dedicated composable is available to help you use this plugin. + +- First install markercluster + +```bash +npm install leaflet.markercluster +``` + +- Update your Nuxt config to activate the plugin + +```ts{3-5} +export default defineNuxtConfig({ + modules: ['nuxt3-leaflet'], + nuxtLeaflet: { + markercluster: true + } +}) +``` + +- Use the `useMarkerCluster` composable in your component + +```vue{52-55} + + + +``` diff --git a/playground/pages/map/map.vue b/playground/pages/map/map.vue index 534f002..42b1967 100644 --- a/playground/pages/map/map.vue +++ b/playground/pages/map/map.vue @@ -6,7 +6,7 @@ :zoom="6" :max-zoom="18" :center="[47.21322, -1.559482]" - @ready="mapInitialized" + @ready="onMapReady" > { +const onMapReady = () => { console.log('Map is ready') console.log(map.value.maxZoom) } diff --git a/playground/pages/map/markercluster.vue b/playground/pages/map/markercluster.vue index 66cac40..8ad3f11 100644 --- a/playground/pages/map/markercluster.vue +++ b/playground/pages/map/markercluster.vue @@ -6,7 +6,7 @@ :zoom="6" :max-zoom="18" :center="[47.21322, -1.559482]" - @ready="mapInitialized" + @ready="onMapReady" > { +const onMapReady = () => { useMarkerCluster({ mapInstance: map.value, markers: locations From 225903ee5d8947f1a0918bdc438334a12dabcc6f Mon Sep 17 00:00:00 2001 From: Gugustinette Date: Tue, 18 Jun 2024 12:54:59 +0200 Subject: [PATCH 03/14] Update configKey / Polish doc / Polish module API --- docs/.vitepress/config.ts | 14 ++- docs/about/q&a.md | 7 ++ docs/guide/accessing-map-instance.md | 2 +- docs/guide/leaflet-draw.md | 118 -------------------- docs/guide/marker-cluster.md | 23 +++- playground/nuxt.config.ts | 4 +- playground/pages/map/markercluster.vue | 11 +- src/module.ts | 8 +- src/runtime/composables/useMarkerCluster.ts | 21 ++-- src/types/dev-types.d.ts | 6 + 10 files changed, 69 insertions(+), 145 deletions(-) create mode 100644 docs/about/q&a.md delete mode 100644 docs/guide/leaflet-draw.md create mode 100644 src/types/dev-types.d.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 0f26ba0..fca3c93 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -26,13 +26,13 @@ export default defineConfig({ text: 'Guide', items: [ { text: 'Using L', link: '/guide/using-l' }, - { text: 'Accessing Map Instance', link: '/guide/accessing-map-instance' }, - { text: 'Leaflet.markercluster', link: '/guide/marker-cluster' }, - { text: 'Leaflet Draw (Experimental)', link: '/guide/leaflet-draw' } + { text: 'Accessing a map instance', link: '/guide/accessing-map-instance' }, + { text: 'Leaflet.markercluster', link: '/guide/marker-cluster' } ] }, { text: 'Components', + collapsed: true, items: [ { text: 'Introduction', link: '/components/introduction' }, { text: 'LCircle', link: '/components/l-circle' }, @@ -58,7 +58,13 @@ export default defineConfig({ { text: 'LTooltip', link: '/components/l-tooltip' }, { text: 'LWmsTileLayer', link: '/components/l-wms-tile-layer' }, ] - } + }, + { + text: 'About', + items: [ + { text: 'Q&A', link: '/about/q&a' }, + ] + }, ], socialLinks: [ diff --git a/docs/about/q&a.md b/docs/about/q&a.md new file mode 100644 index 0000000..939f1b7 --- /dev/null +++ b/docs/about/q&a.md @@ -0,0 +1,7 @@ +# Q&A + +## Will Leaflet.draw be supported in the future ? + +[Leaflet.draw](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html) was created to provide a simple way to draw shapes on a map made with Leaflet. + +However, as the project is not maintained anymore (last update in 2018, see [Github repository](https://github.com/Leaflet/Leaflet.draw)), we choose not to include its support in the module. diff --git a/docs/guide/accessing-map-instance.md b/docs/guide/accessing-map-instance.md index ade536a..2d58df4 100644 --- a/docs/guide/accessing-map-instance.md +++ b/docs/guide/accessing-map-instance.md @@ -1,4 +1,4 @@ -# Accessing a Map Instance +# Accessing a map instance The guide explains how to access a Leaflet map instance from a Vue component, as featured in the [original vue-leaflet library](https://github.com/vue-leaflet/vue-leaflet/blob/master/docs/faq/index.md#how-can-i-access-the-leaflet-map-object). diff --git a/docs/guide/leaflet-draw.md b/docs/guide/leaflet-draw.md deleted file mode 100644 index f0c11cc..0000000 --- a/docs/guide/leaflet-draw.md +++ /dev/null @@ -1,118 +0,0 @@ -# Leaflet Draw (Experimental) - -This shows how to use the [Leaflet Draw](https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html) plugin, by importing the script asynchronously from a CDN. - -::: warning -This is still not proved as stable and may not work as expected. -::: - -## Demo - - - - - - - - - -```vue - - - -``` diff --git a/docs/guide/marker-cluster.md b/docs/guide/marker-cluster.md index b595593..5b88dd5 100644 --- a/docs/guide/marker-cluster.md +++ b/docs/guide/marker-cluster.md @@ -3,6 +3,10 @@ The guide explains how to use the [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) plugin. A dedicated composable is available to help you use this plugin. +Options for the markers are the same as the ones available in the [Leaflet documentation](https://leafletjs.com/reference.html#marker). + +## Installation + - First install markercluster ```bash @@ -14,15 +18,15 @@ npm install leaflet.markercluster ```ts{3-5} export default defineNuxtConfig({ modules: ['nuxt3-leaflet'], - nuxtLeaflet: { - markercluster: true + leaflet: { + markerCluster: true } }) ``` - Use the `useMarkerCluster` composable in your component -```vue{52-55} +```vue{26-55,59-62}