Split Map

playground/nuxt.config.ts

@@ -7,6 +7,8 @@ export default defineNuxtConfig({
         'vuetify-nuxt-module',
         '@nuxtjs/leaflet',
     ],
+    css: ['../src/runtime/assets/scss/splitmap.scss'],
+
     devtools: { enabled: true },
     compatibilityDate: '2024-08-02',
     imports: {

playground/src/components/layout/SideBar.vue

@@ -78,6 +78,10 @@ const components = [
         title: 'SLocationSearch',
         link: '/components/s-location-search',
     },
+    {
+        title: 'SplitMap',
+        link: '/components/splitmap',
+    },
 ]
 </script>
 

playground/src/pages/Components/s-location-search.vue

@@ -35,7 +35,6 @@
                     </tr>
                 </thead>
                 <tbody>
-
                     <tr>
                         <td>size</td>
                         <td>string</td>
@@ -54,8 +53,7 @@
                             circle, and shaped.
                         </td>
                     </tr>
-
-
+
                     <tr>
                         <td>lmap</td>
                         <td>any</td>

playground/src/pages/Components/splitmap.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <l-map
+            ref="lmap"
+            style="min-height: 500px"
+            :zoom="zoom"
+            :center="center"
+            @ready="onMapReady"
+        >
+            <LTileLayer
+                ref="layer1"
+                url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
+                attribution='&amp;copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+                layer-type="base"
+                name="OpenStreetMap"
+            />
+            <LTileLayer
+                ref="layer2"
+                url="https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png"
+            />
+        </l-map>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type L from 'leaflet'
+import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
+import type { PointExpression } from 'leaflet'
+import { ref } from 'vue'
+
+// Map references
+const lmap = ref<any>(null)
+const zoom = ref(15)
+const center = ref([47.21322, -1.559482] as PointExpression)
+
+const { $SplitMap } = useNuxtApp()
+
+const splitControl = ref<L.Control | null>(null)
+const layer1 = ref(null)
+const layer2 = ref(null)
+
+const controlOptions = ref({ thumbSize: 42, padding: 0 })
+
+const onMapReady = () => {
+    afterMapReady()
+}
+
+const afterMapReady = () => {
+    try {
+        if ($SplitMap && lmap.value?.leafletObject) {
+            splitControl.value = $SplitMap(
+                layer1.value.leafletObject,
+                layer2.value.leafletObject,
+                controlOptions.value
+            )
+
+            splitControl.value?.addTo(lmap.value.leafletObject)
+        } else {
+            console.error('SplitMap or lmap is not available')
+        }
+    } catch (error) {
+        console.error('Error initializing SplitMap control:', error)
+    }
+}
+
+</script>
+
+<style lang="scss"></style>

src/module.ts

@@ -15,19 +15,26 @@ export default defineNuxtModule<ModuleOptions>({
     defaults: {},
     setup(_options, _nuxt) {
         const resolver = createResolver(import.meta.url)
+        const runtimeDir = resolver.resolve('./runtime')
+        const isDevelopment =
+            runtimeDir.endsWith('src/runtime') ||
+            runtimeDir.endsWith('src\\runtime')
 
-        addPlugin(resolver.resolve('./runtime/plugin'))
+        const styleExtension = isDevelopment ? '.scss' : '.css'
+
+        _nuxt.options.css.push(
+            resolver.resolve('./runtime/assets/scss/splitmap' + styleExtension)
+        )
+
+        addPlugin(resolver.resolve('./runtime/plugins/splitmap'))
         addComponentsDir({
             path: resolver.resolve('./runtime/components'),
             global: true,
             pathPrefix: false,
         })
 
         _nuxt.hook('nitro:config', (nitroConfig) => {
-            // Ensure `publicAssets` is an array and push the new asset directory configuration
             nitroConfig.publicAssets ||= []
-
-            // Add directory and maxAge to public assets
             nitroConfig.publicAssets.push({
                 dir: resolver.resolve('./runtime/public'),
                 maxAge: 60 * 60 * 24 * 365, // 1 year in seconds

src/runtime/assets/scss/splitmap.scss

@@ -0,0 +1,121 @@
+.leaflet-sbs-range {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    z-index: 999;
+}
+.leaflet-sbs-divider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -2px;
+    width: 4px;
+    background-color: rgb(var(--v-theme-primary));
+    pointer-events: none;
+    z-index: 999;
+}
+.leaflet-sbs-range {
+    appearance: none;
+    display: inline-block !important;
+    vertical-align: middle;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.25);
+    min-width: 100px;
+    cursor: pointer;
+    pointer-events: none;
+    z-index: 999;
+}
+.leaflet-sbs-range::-ms-fill-upper {
+    background: transparent;
+}
+.leaflet-sbs-range::-ms-fill-lower {
+    background: rgba(255, 255, 255, 0.25);
+}
+/* Browser thingies */
+
+.leaflet-sbs-range::-moz-range-track {
+    opacity: 0;
+}
+.leaflet-sbs-range::-ms-track {
+    opacity: 0;
+}
+.leaflet-sbs-range::-ms-tooltip {
+    display: none;
+}
+/* For whatever reason, these need to be defined
+   * on their own so dont group them */
+
+.leaflet-sbs-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin: 0;
+    padding: 0;
+    background: rgb(var(--v-theme-primary));
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid rgb(var(--v-theme-primary));
+    background-image: url('/icons/compare2.svg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+    filter: brightness(0) saturate(100%) rgb(var(--v-theme-primary));
+}
+
+.leaflet-sbs-range::-ms-thumb {
+    margin: 0;
+    padding: 0;
+    background: rgb(var(--v-theme-primary));
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid rgb(var(--v-theme-primary));
+    background-image: url('/icons/compare2.svg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+    filter: brightness(0) saturate(100%) rgb(var(--v-theme-primary));
+}
+
+.leaflet-sbs-range::-moz-range-thumb {
+    padding: 0;
+    right: 0;
+    background: rgb(var(--v-theme-primary));
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid rgb(var(--v-theme-primary));
+    background-image: url('/icons/compare2.svg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+    filter: brightness(0) saturate(100%) rgb(var(--v-theme-primary));
+}
+
+.leaflet-sbs-range:disabled::-moz-range-thumb {
+    cursor: default;
+}
+.leaflet-sbs-range:disabled::-ms-thumb {
+    cursor: default;
+}
+.leaflet-sbs-range:disabled::-webkit-slider-thumb {
+    cursor: default;
+}
+.leaflet-sbs-range:disabled {
+    cursor: default;
+}
+.leaflet-sbs-range:focus {
+    outline: none !important;
+}
+.leaflet-sbs-range::-moz-focus-outer {
+    border: 0;
+}