diff --git a/eslint.config.mjs b/eslint.config.mjs
index 2f00f60..bdb77f0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -6,6 +6,7 @@ export default withNuxt({
     ignores: ['node_modules', '.nuxt', 'dist', 'test', 'playground/*'],
     rules: {
         'vue/multi-word-component-names': 'off', 
+        '@typescript-eslint/no-explicit-any':'off'
     },
     languageOptions: {
         globals: {
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 36563dc..9f46be5 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,7 +1,12 @@
 export default defineNuxtConfig({
     srcDir: 'src/',
     ssr: false,
-    modules: ['../src/module', '@nuxt/eslint', 'vuetify-nuxt-module','@nuxtjs/leaflet'],
+    modules: [
+        '../src/module',
+        '@nuxt/eslint',
+        'vuetify-nuxt-module',
+        '@nuxtjs/leaflet',
+    ],
     devtools: { enabled: true },
     compatibilityDate: '2024-08-02',
     imports: {
@@ -24,7 +29,7 @@ export default defineNuxtConfig({
                         dark: false,
                         colors: {
                             // background: '#FFFFFF',
-                             primary: '#008080',
+                            primary: '#008080',
                             // secondary: '#E34234',
                             // white: '#FFFFFF',
                             floor: '#DCDCDC',
diff --git a/playground/src/components/layout/SideBar.vue b/playground/src/components/layout/SideBar.vue
index bdc239d..7ab5205 100644
--- a/playground/src/components/layout/SideBar.vue
+++ b/playground/src/components/layout/SideBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-navigation-drawer  width="400" color="primary">
+    <v-navigation-drawer width="400" color="primary">
         <v-list v-model:opened="groups">
             <v-list-group value="started">
                 <template #activator="{ props }">
diff --git a/playground/src/layouts/default.vue b/playground/src/layouts/default.vue
index 90eb265..d67a64b 100644
--- a/playground/src/layouts/default.vue
+++ b/playground/src/layouts/default.vue
@@ -4,7 +4,7 @@
             <v-app-bar-nav-icon icon="mdi-view-dashboard-variant" to="/" />
             <v-app-bar-title to="/">Spatial UI Elements</v-app-bar-title>
 
-            <v-spacer/>
+            <v-spacer />
             <v-btn
                 icon="mdi-github"
                 variant="elevated"
diff --git a/playground/src/pages/Components/s-base-map.vue b/playground/src/pages/Components/s-base-map.vue
index 970bcad..4420cac 100644
--- a/playground/src/pages/Components/s-base-map.vue
+++ b/playground/src/pages/Components/s-base-map.vue
@@ -38,7 +38,7 @@
                     <tr>
                         <td>lmap</td>
                         <td>any</td>
-                        <td></td>
+                        <td />
                         <td>
                             <i>lmap</i> props contains the reference to leaflet
                             map.
@@ -51,7 +51,6 @@
 </template>
 
 <script setup lang="ts">
-import L from 'leaflet'
 import { LMap, LTileLayer, LControl } from '@vue-leaflet/vue-leaflet'
 
 import ComponentDoc from '~/components/layout/ComponentDoc.vue'
diff --git a/playground/src/pages/Components/s-footer.vue b/playground/src/pages/Components/s-footer.vue
index fdcbfea..9e6eddb 100644
--- a/playground/src/pages/Components/s-footer.vue
+++ b/playground/src/pages/Components/s-footer.vue
@@ -29,7 +29,7 @@
 ],
                             </pre>
                         </td>
-                        <td/>
+                        <td />
                     </tr>
                 </tbody>
             </v-table>
diff --git a/playground/src/pages/Components/s-header-logo.vue b/playground/src/pages/Components/s-header-logo.vue
index a4742d6..6e3410f 100644
--- a/playground/src/pages/Components/s-header-logo.vue
+++ b/playground/src/pages/Components/s-header-logo.vue
@@ -47,9 +47,9 @@
                         <td>right</td>
                         <td>ImageProps[]</td>
                         <td>
-                            <pre/>
+                            <pre />
                         </td>
-                        <td/>
+                        <td />
                     </tr>
                     <tr>
                         <td>configuration</td>
diff --git a/playground/src/pages/Components/s-header.vue b/playground/src/pages/Components/s-header.vue
index fa45925..15d4c20 100644
--- a/playground/src/pages/Components/s-header.vue
+++ b/playground/src/pages/Components/s-header.vue
@@ -10,7 +10,7 @@
                 :configuration="configuration"
                 :menu="menu"
             />
-            <div class="pt-4"/>
+            <div class="pt-4" />
         </template>
         <template #prop>
             <v-table>
@@ -26,7 +26,7 @@
                     <tr>
                         <td>title</td>
                         <td>string</td>
-                        <td/>
+                        <td />
                         <td>Requred</td>
                     </tr>
                     <tr>
@@ -53,14 +53,14 @@
                     <tr>
                         <td>menu</td>
                         <td>IRoute</td>
-                        <td/>
-                        <td/>
+                        <td />
+                        <td />
                     </tr>
                     <tr>
                         <td>imageIcon</td>
                         <td>string</td>
                         <td>SERVIR Logo as default</td>
-                        <td/>
+                        <td />
                     </tr>
                 </tbody>
             </v-table>
diff --git a/playground/src/pages/Components/s-legend.vue b/playground/src/pages/Components/s-legend.vue
index a0eff5d..1df081c 100644
--- a/playground/src/pages/Components/s-legend.vue
+++ b/playground/src/pages/Components/s-legend.vue
@@ -22,30 +22,30 @@
                     <tr>
                         <td>legends</td>
                         <td>LegendItem[]</td>
-                        <td></td>
+                        <td />
                         <td>
-<i>
-    <pre>
+                            <i>
+                                <pre>
     interface LegendItem {
         color: string
         name: number
     }
-</pre>
-</i>
-                            
+</pre
+                                >
+                            </i>
                         </td>
                     </tr>
                     <tr>
                         <td>width</td>
                         <td>string</td>
                         <td>200px</td>
-                        <td></td>
+                        <td />
                     </tr>
                     <tr>
                         <td>title</td>
                         <td>string</td>
                         <td>Legend</td>
-                        <td></td>
+                        <td />
                     </tr>
                 </tbody>
             </v-table>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index f9f81da..4808a19 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -10,15 +10,15 @@
                 geospatial applications with a focus on flexibility,
                 performance, and ease of integration for SERVIR Science
                 applications.
-                <br >
-                <br >
+                <br />
+                <br />
                 <div class="d-flex align-center justify-center">
                     <img
                         class=""
                         src="/logos/servir.svg"
                         alt="description"
                         width="200"
-                    >
+                    />
                 </div>
             </v-card-text>
         </v-card>
diff --git a/src/runtime/components/SBaseMap.vue b/src/runtime/components/SBaseMap.vue
index 473a6f9..556c15e 100644
--- a/src/runtime/components/SBaseMap.vue
+++ b/src/runtime/components/SBaseMap.vue
@@ -2,9 +2,9 @@
     <v-expansion-panels v-model="panel">
         <v-expansion-panel color="primary">
             <v-expansion-panel-title
+                v-slot="{ expanded }"
                 expand-icon="mdi-map"
                 collapse-icon="mdi-close"
-                v-slot="{ expanded }"
                 density=""
             >
                 <b>{{ expanded ? 'BaseMap' : ' ' }}</b>
@@ -59,12 +59,11 @@ import L from 'leaflet'
 
 import { useDisplay } from 'vuetify'
 const { smAndDown } = useDisplay()
-interface Props {
+interface Prop {
     lmap: any
 }
-const props = withDefaults(defineProps<Props>(), {})
+const prop = withDefaults(defineProps<Prop>(), {})
 const panel = ref(null)
-const selectedLayer = ref<string | null>(null)
 
 const layers = [
     {
@@ -145,17 +144,17 @@ const layers = [
 ]
 
 const changeBaseLayer = (layerTitle) => {
-    if (!props.lmap) return
+    if (!prop.lmap) return
 
     layers.forEach((layer) => {
-        if (props.lmap.leafletObject.hasLayer(layer.layer)) {
-            props.lmap.leafletObject.removeLayer(layer.layer)
+        if (prop.lmap.leafletObject.hasLayer(layer.layer)) {
+            prop.lmap.leafletObject.removeLayer(layer.layer)
         }
     })
 
     const newLayer = layers.find((layer) => layer.title === layerTitle)
     if (newLayer) {
-        props.lmap.leafletObject.addLayer(newLayer.layer)
+        prop.lmap.leafletObject.addLayer(newLayer.layer)
     }
 }
 </script>
diff --git a/src/runtime/components/SFooter.vue b/src/runtime/components/SFooter.vue
index 2982247..8f2e0a9 100644
--- a/src/runtime/components/SFooter.vue
+++ b/src/runtime/components/SFooter.vue
@@ -42,7 +42,7 @@
                     </v-row>
                 </v-col>
                 <slot />
-                <v-col cols="12" sm="6"/>
+                <v-col cols="12" sm="6" />
             </v-row>
         </v-container>
     </v-footer>
diff --git a/src/runtime/components/SHeader.vue b/src/runtime/components/SHeader.vue
index 86b7a88..b198032 100644
--- a/src/runtime/components/SHeader.vue
+++ b/src/runtime/components/SHeader.vue
@@ -77,7 +77,7 @@
                 <v-card-title class="text-wrap">
                     <b>{{ props.title }}</b></v-card-title
                 >
-                <v-divider/>
+                <v-divider />
 
                 <v-list density="compact" nav>
                     <v-list-item
diff --git a/src/runtime/components/SLegend.vue b/src/runtime/components/SLegend.vue
index 1899796..c125d33 100644
--- a/src/runtime/components/SLegend.vue
+++ b/src/runtime/components/SLegend.vue
@@ -2,16 +2,16 @@
     <v-expansion-panels v-model="panel" class="slegend">
         <v-expansion-panel color="primary">
             <v-expansion-panel-title
+                v-slot="{ expanded }"
                 expand-icon="mdi-map-legend"
                 collapse-icon="mdi-close"
-                v-slot="{ expanded }"
             >
                 <b>{{ expanded ? props.title : ' ' }}</b>
             </v-expansion-panel-title>
             <v-expansion-panel-text>
                 <v-card :width="props.width" variant="flat">
                     <v-card-item color="transparent">
-                        <v-row direction="column" noGutters>
+                        <v-row direction="column" no-gutters>
                             <v-col
                                 v-for="legend in legends"
                                 :key="legend.name"
@@ -54,14 +54,14 @@ interface LegendItem {
 }
 
 interface Props {
-    legends: LegendItem[],
-    width?:string,
-    title?:string
+    legends: LegendItem[]
+    width?: string
+    title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    width:'200px',
-    title:'Legend'
+    width: '200px',
+    title: 'Legend',
 })
 
 watch(