diff --git a/package.json b/package.json
index 13133efba..ff65102f9 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "blob-util": "^2.0.2",
     "buefy": "^0.9.29",
     "bulma": "^1.0.0",
+    "cartocolor": "^5.0.2",
     "color-string": "^1.9.1",
     "colormap": "^2.3.1",
     "comlink": "^4.4.2",
@@ -119,6 +120,10 @@
     "sax-wasm": "^2.2.4",
     "shallow-equal": "^1.2.1",
     "shapefile": "^0.6.6",
+    "spatialite": "^0.1.0",
+    "spl.js": "^0.1.2",
+    "sql.js": "^1.13.0",
+
     "the-new-css-reset": "^1.7.3",
     "threads": "^1.7.0",
     "three": "^0.127.0",
diff --git a/src/Globals.ts b/src/Globals.ts
index dc9f52cf4..8aee7f379 100644
--- a/src/Globals.ts
+++ b/src/Globals.ts
@@ -168,6 +168,7 @@ export interface FileSystemConfig {
   example?: boolean
   isGithub?: boolean
   isZIB?: boolean
+  isS3?: boolean // AWS S3 bucket with public access
   flask?: boolean // Flask filesystem supports OMX open matrix API - see https://github.com/simwrapper/omx-server
 }
 
diff --git a/src/components/LegendColors.vue b/src/components/LegendColors.vue
index 6f9cfc462..e733b4c24 100644
--- a/src/components/LegendColors.vue
+++ b/src/components/LegendColors.vue
@@ -1,11 +1,24 @@
 <template lang="pug">
+
 .legend-colors.flex-col
-  h4 {{ title }}
-  p {{ description }}
+  h4(v-if="title") {{ title }}
+  p(v-if="description") {{ description }}
   ul.list-items
-    li.legend-row(v-for="item in items" :key="item.value + item.value[0]")
-      .item-label(v-if="item.label") {{ item.label }}
-      .item-swatch(:style="`backgroundColor: rgb(${item.color})`")
+    li.legend-row(v-for="(item, idx) in items" :key="item.label + idx")
+      // Subtitle
+      span.legend-subtitle(v-if="item.type === 'subtitle'") {{ item.label }}
+      // Feature entry
+      template(v-else)
+        .item-swatch(v-if="item.shape === 'line' || item.type === 'line'"
+          :style="`width:32px;height:${item.size||4}px;background:rgb(${item.color});border-radius:2px;align-self:center;`"
+        )
+        .item-swatch(v-else-if="item.shape === 'polygon' || item.type === 'polygon'"
+          :style="`width:20px;height:20px;background:rgb(${item.color});border-radius:4px;border:1px solid #888;display:inline-block;`"
+        )
+        .item-swatch(v-else-if="item.shape === 'circle' || item.type === 'circle'"
+          :style="`width:${item.size||12}px;height:${item.size||12}px;background:rgb(${item.color});border-radius:50%;border:1px solid #888;display:inline-block;`"
+        )
+        .item-label {{ item.label }}
 
 </template>
 
@@ -32,6 +45,13 @@ export default defineComponent({
   margin: 0;
 }
 
+.legend-subtitle {
+  font-weight: bold;
+  margin-top: 0.5em;
+  margin-bottom: 0.25em;
+  display: block;
+}
+
 .item-label {
   margin: '0 0.5rem 0.0rem 0';
   font-weight: 'bold';
diff --git a/src/dash-panels/_allPanels.ts b/src/dash-panels/_allPanels.ts
index 0573d1075..9507f6d95 100644
--- a/src/dash-panels/_allPanels.ts
+++ b/src/dash-panels/_allPanels.ts
@@ -28,6 +28,7 @@ export const panelLookup: { [key: string]: AsyncComponent } = {
   xml: defineAsyncComponent(() => import('./xml.vue')),
 
   // full-screen map visualizations:
+  aequilibrae: defineAsyncComponent(() => import('./aequilibrae-map.vue')),
   carriers: defineAsyncComponent(() => import('./carriers.vue')),
   flowmap: defineAsyncComponent(() => import('./flowmap.vue')),
   links: defineAsyncComponent(() => import('./links.vue')),
diff --git a/src/dash-panels/aequilibrae-map.vue b/src/dash-panels/aequilibrae-map.vue
new file mode 100644
index 000000000..45f2ab9a3
--- /dev/null
+++ b/src/dash-panels/aequilibrae-map.vue
@@ -0,0 +1,49 @@
+<template lang="pug">
+aeq-reader.aeq-panel(
+  :root="fileSystemConfig.slug"
+  :subfolder="subfolder"
+  :config="config"
+  :thumbnail="false"
+  @isLoaded="isLoaded"
+  @error="$emit('error', $event)"
+)
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import AeqReader from '@/plugins/aequilibrae-map/AequilibraEMapComponent.vue'
+
+export default defineComponent({
+  name: 'AequilibraEMapPanel',
+  components: { AeqReader },
+  props: {
+    config: Object,
+    datamanager: Object,
+    fileSystemConfig: Object,
+    subfolder: String,
+    yamlConfig: String,
+  },
+  methods: {
+    isLoaded() {
+      this.$emit('isLoaded')
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+
+.aeq-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/dash-panels/tile.vue b/src/dash-panels/tile.vue
index e749104ff..c0e76f015 100644
--- a/src/dash-panels/tile.vue
+++ b/src/dash-panels/tile.vue
@@ -1,10 +1,14 @@
 <template lang="pug">
 .content
   .tiles-container(v-if="imagesAreLoaded")
-    .tile(v-for="(value, index) in this.dataSet.data" v-bind:style="{ 'background-color': colors[index % colors.length]}" @click="")
+    .tile(
+      v-for="(value, index) in this.dataSet.data"
+      :style="getTileStyle(index)"
+      @click=""
+    )
       a(:href="value[urlIndex]" target="_blank" :class="{ 'is-not-clickable': !value[urlIndex] }")
-        p.tile-title {{ value[tileNameIndex] }}
-        p.tile-value {{ value[tileValueIndex] }}
+        p.tile-title(:style="{ color: tileTextColor }") {{ value[tileNameIndex] }}
+        p.tile-value(:style="{ color: tileTextColor }") {{ value[tileValueIndex] }}
         .tile-image(v-if="value[tileImageIndex] != undefined && checkIfItIsACustomIcon(value[tileImageIndex])" :style="{'background': base64Images[index], 'background-size': 'contain'}")
         img.tile-image(v-else-if="value[tileImageIndex] != undefined && checkIfIconIsInAssetsFolder(value[tileImageIndex])" v-bind:src="getLocalImage(value[tileImageIndex].trim())" :style="{'background': ''}")
         font-awesome-icon.tile-image(v-else-if="value[tileImageIndex] != undefined" :icon="value[tileImageIndex].trim()" size="2xl" :style="{'background': '', 'color': 'black'}")
@@ -22,9 +26,53 @@ import HTTPFileSystem from '@/js/HTTPFileSystem'
 import globalStore from '@/store'
 import { arrayBufferToBase64 } from '@/js/util'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { openDb } from '@/plugins/sqlite-map/db'
+import { initSql } from '@/plugins/sqlite-map/loader'
+import { loadDbWithCache } from '@/plugins/sqlite-map/helpers'
 
 const BASE_URL = import.meta.env.BASE_URL
 
+// color palette options
+const PALETTE_PASTEL = [
+  '#F08080', // Light coral pink
+  '#FFB6C1', // Pale pink
+  '#FFDAB9', // peach
+  '#FFECB3', // cream yellow
+  '#B0E0E6', // light blue
+  '#98FB98', // light green
+  '#FFD700', // golden yellow
+  '#FFA07A', // salmon pink
+  '#E0FFFF', // light turquoise
+  '#FFDAB9', // pink
+  '#FFC0CB', // pink
+  '#FFA500', // orange
+  '#FF8C00', // dark orange
+  '#FF7F50', // coral red
+  '#FFE4B5', // papaya
+  '#ADD8E6', // light blue
+  '#90EE90', // light green
+  '#FFD700', // golden yellow
+  '#FFC0CB', // pink
+  '#FFA500', // Orange
+]
+
+const PALETTE_VIVID = [
+  '#FF006E', // Vivid Pink
+  '#FB5607', // Vivid Orange
+  '#FFBE0B', // Vivid Yellow
+  '#8338EC', // Vivid Purple
+  '#3A86FF', // Vivid Blue
+  '#06FFA5', // Vivid Green
+  '#FF4365', // Vivid Red
+  '#00D9FF', // Vivid Cyan
+  '#FF1493', // Vivid Deep Pink
+  '#FF8C00', // Vivid Deep Orange
+]
+
+const PALETTE_MONOCHROME = [
+  '#f7f7fe', // Light gray
+]
+
 export default defineComponent({
   name: 'Tile',
   components: { FontAwesomeIcon },
@@ -44,29 +92,9 @@ export default defineComponent({
       // dataSet is either x,y or allRows[]
       dataSet: {} as { data?: any; x?: any[]; y?: any[]; allRows?: any },
       YAMLrequirementsOverview: { dataset: '' },
-      colors: [
-        '#F08080', // Light coral pink
-        '#FFB6C1', // Pale pink
-        '#FFDAB9', // peach
-        '#FFECB3', // cream yellow
-        '#B0E0E6', // light blue
-        '#98FB98', // light green
-        '#FFD700', // golden yellow
-        '#FFA07A', // salmon pink
-        '#E0FFFF', // light turquoise
-        '#FFDAB9', // pink
-        '#FFC0CB', // pink
-        '#FFA500', // orange
-        '#FF8C00', // dark orange
-        '#FF7F50', // coral red
-        '#FFE4B5', // papaya
-        '#ADD8E6', // light blue
-        '#90EE90', // light green
-        '#FFD700', // golden yellow
-        '#FFC0CB', // pink
-        '#FFA500', // Orange
-      ],
+      colors: PALETTE_PASTEL,
       colorsD3: [
+        // TODO: remove? Is this being used?
         '#1F77B4',
         '#FF7F0E',
         '#2CA02C',
@@ -117,10 +145,29 @@ export default defineComponent({
     fileApi(): HTTPFileSystem {
       return new HTTPFileSystem(this.fileSystemConfig, globalStore)
     },
+    tileBorderColor(): string {
+      return this.globalState.isDarkMode ? '#fff' : '#000'
+    },
+    tileTextColor(): string {
+      return this.globalState.isDarkMode ? '#fff' : '#363636'
+    },
   },
   async mounted() {
-    this.dataSet = await this.loadFile()
-    this.validateDataSet()
+    // Set color palette from config if specified, otherwise default to pastel
+    if (this.config.colors) {
+      const paletteKey = this.config.colors.toLowerCase()
+      if (paletteKey === 'vivid') {
+        this.colors = PALETTE_VIVID
+      } else if (paletteKey === 'monochrome') {
+        this.colors = PALETTE_MONOCHROME
+      } else {
+        // Default to pastel for any other value or unrecognized palette
+        this.colors = PALETTE_PASTEL
+      }
+    }
+
+    this.dataSet = await this.buildDataset()
+    // this.validateDataSet()
     await this.loadImages()
     this.$emit('isLoaded')
     console.log(this.dataSet)
@@ -191,6 +238,79 @@ export default defineComponent({
       return []
     },
 
+    async getDataFromSQLQuery(
+      database: string,
+      query: string,
+      singleValue = true,
+      titleColumn = 'metric',
+      valueColumn = 'value'
+    ) {
+      try {
+        const trimmedQuery = query.trim()
+        // open a sqlite connection
+        const spl = await initSql()
+        // connect to database
+        const db = await loadDbWithCache(spl, this.fileApi, openDb, database)
+        // run query and return result
+        if (singleValue) {
+          const queryResult = await db.exec(trimmedQuery).get.first
+          return queryResult
+        } else {
+          const queryResult = await db.exec(trimmedQuery).get.objs
+          const results = []
+          for (const obj of queryResult) {
+            results.push([obj[titleColumn], obj[valueColumn]]) // table columns default to 'metric' and 'value'
+          }
+          return results
+        }
+      } catch (e) {
+        console.error('' + e)
+        this.$emit('error', 'Error querying database: ' + database)
+      }
+      return { data: [] }
+    },
+
+    async buildDataset() {
+      // Datasets can be defined in a handful of ways.
+      // If `dataset` value is a string, it's a .csv to load.
+      if (typeof this.config.dataset === 'string') {
+        return await this.loadFile()
+      }
+      // It can be database & sql query
+      if (this.config.dataset.database && this.config.dataset.query) {
+        return {
+          data: await this.getDataFromSQLQuery(
+            this.config.dataset.database,
+            this.config.dataset.query,
+            false,
+            this.config.dataset.titleCol || 'metric',
+            this.config.dataset.valueCol || 'value'
+          ),
+        }
+      }
+      // Otherwise it's a list of key-value pairs.
+      // Values can either be static or be a database & sql query returning a single value.
+      if (Array.isArray(this.config.dataset)) {
+        const data: any[] = await Promise.all(
+          this.config.dataset.map(async (item: any) => {
+            const key = item.key
+            const row: any[] = []
+            row.push(key)
+            // if the database/query are defined
+            if (item.value?.database && item.value?.query) {
+              const result = await this.getDataFromSQLQuery(item.value.database, item.value.query)
+              row.push(result)
+            } else {
+              // otherwise it's a static value
+              row.push(item.value)
+            }
+            return row
+          })
+        )
+        return { data: data }
+      }
+    },
+
     validateYAML() {
       for (const key in this.YAMLrequirementsOverview) {
         if (key in this.config === false) {
@@ -227,6 +347,14 @@ export default defineComponent({
       }
       return false
     },
+
+    getTileStyle(index: number) {
+      return {
+        'background-color': this.colors[index % this.colors.length],
+        border: '1px solid ' + this.tileBorderColor,
+        color: this.tileTextColor,
+      }
+    },
   },
 })
 </script>
@@ -277,13 +405,13 @@ export default defineComponent({
   padding: 20px;
   min-width: 250px;
   font-family: $fancyFont;
+  border-color: v-bind(tileBorderColor);
 }
 
 .tile .tile-value {
-  font-size: 2rem;
+  font-size: 3rem;
   font-weight: bold;
   width: 100%;
-  color: #363636; // var(--text) but always the color from the light mode.
   grid-column-start: 2;
   grid-column-end: 4;
   text-align: center;
@@ -292,10 +420,9 @@ export default defineComponent({
 
 .tile .tile-title {
   width: 100%;
-  font-size: 1.4rem;
-  height: 5rem;
+  font-size: 2.5rem;
+  // height: 3.5rem;
   margin-bottom: 0;
-  color: #363636; // var(--text) but always the color from the light mode.
   text-align: center;
   grid-column-start: 1;
   grid-column-end: 5;
diff --git a/src/fileSystemConfig.ts b/src/fileSystemConfig.ts
index 5b25051d6..6e109b4f9 100644
--- a/src/fileSystemConfig.ts
+++ b/src/fileSystemConfig.ts
@@ -250,4 +250,4 @@ try {
   console.error('ERROR MERGING URL SHORTCUTS:', '' + e)
 }
 
-export default fileSystems
+export default fileSystems
\ No newline at end of file
diff --git a/src/js/HTTPFileSystem.ts b/src/js/HTTPFileSystem.ts
index ecf7bbf28..e5cbbcddc 100644
--- a/src/js/HTTPFileSystem.ts
+++ b/src/js/HTTPFileSystem.ts
@@ -1,5 +1,6 @@
 import micromatch from 'micromatch'
 import naturalSort from 'javascript-natural-sort'
+import { SaxEventType, SAXParser } from 'sax-wasm'
 
 import { gUnzip } from '@/js/util'
 
@@ -17,6 +18,7 @@ enum FileSystemType {
   GITHUB,
   FLASK,
   LAKEFS,
+  S3,
 }
 
 naturalSort.insensitive = true
@@ -42,6 +44,7 @@ class HTTPFileSystem {
   private isGithub: boolean
   private isZIB: boolean
   private isFlask: boolean
+  private isS3: boolean
   private type: FileSystemType
   private fileLinkLookup: any = {}
 
@@ -54,12 +57,14 @@ class HTTPFileSystem {
     this.isGithub = !!project.isGithub
     this.isFlask = !!project.flask
     this.isZIB = !!project.isZIB
+    this.isS3 = !!project.isS3
 
     this.type = FileSystemType.FETCH
     if (this.fsHandle) this.type = FileSystemType.CHROME
     if (this.isGithub) this.type = FileSystemType.GITHUB
     if (this.isFlask) this.type = FileSystemType.FLASK
     if (this.isZIB) this.type = FileSystemType.LAKEFS
+    if (this.isS3) this.type = FileSystemType.S3
 
     this.baseUrl = project.baseURL
     if (!project.baseURL.endsWith('/')) this.baseUrl += '/'
@@ -120,6 +125,9 @@ class HTTPFileSystem {
         return this._getFileFromLakeFS(scaryPath)
       case FileSystemType.FLASK:
         return this._getFileFromAzure(scaryPath)
+      case FileSystemType.S3:
+        // S3 buckets use standard HTTP GET for files
+        return this._getFileFetchResponse(scaryPath)
       case FileSystemType.FETCH:
       default:
         return this._getFileFetchResponse(scaryPath)
@@ -484,6 +492,12 @@ class HTTPFileSystem {
           .then(response => response.blob())
           .then(blob => blob.stream())
         return stream as any
+      case FileSystemType.S3:
+        // S3 buckets use standard HTTP GET for files
+        stream = await this._getFileFetchResponse(scaryPath, options).then(
+          response => response.body
+        )
+        return stream as any
       case FileSystemType.FETCH:
         stream = await this._getFileFetchResponse(scaryPath, options).then(
           response => response.body
@@ -533,6 +547,9 @@ class HTTPFileSystem {
         case FileSystemType.FLASK:
           dirEntry = await this._getDirectoryFromAzure(stillScaryPath)
           break
+        case FileSystemType.S3:
+          dirEntry = await this._getDirectoryFromS3(stillScaryPath)
+          break
         case FileSystemType.LAKEFS:
         case FileSystemType.FETCH:
         default:
@@ -617,6 +634,99 @@ class HTTPFileSystem {
     return contents
   }
 
+  async _getDirectoryFromS3(stillScaryPath: string): Promise<DirectoryEntry> {
+    // S3 uses a list API with prefix and delimiter to simulate directories
+    // https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjectsV2.html
+    
+    let prefix = stillScaryPath.replace(/^\/+/, '') // remove leading slashes
+    prefix = prefix.replaceAll('//', '/')
+    
+    // Build the S3 list URL with query parameters
+    const listUrl = `${this.baseUrl}?list-type=2&delimiter=/&prefix=${encodeURIComponent(prefix)}`
+    
+    const response = await fetch(listUrl)
+    if (response.status !== 200) {
+      console.warn('S3 list status:', response.status)
+      throw response
+    }
+    
+    const xmlText = await response.text()
+    return await this.buildListFromS3Xml(xmlText, prefix)
+  }
+
+  private async buildListFromS3Xml(xmlText: string, prefix: string): Promise<DirectoryEntry> {
+    const dirs: string[] = []
+    const files: string[] = []
+    
+    try {
+      const parser = new SAXParser(SaxEventType.OpenTag | SaxEventType.Text | SaxEventType.CloseTag, { highWaterMark: 32 * 1024 })
+      await parser.prepareWasm()
+      
+      let path = '', inKey = false, inPrefix = false
+      
+      parser.eventHandler = (event, data) => {
+        const tag = data.name
+        if (event === SaxEventType.OpenTag) {
+          if (tag === 'Key') inKey = true
+          else if (tag === 'Prefix') inPrefix = true
+        } else if (event === SaxEventType.Text && (inKey || inPrefix)) {
+          path += data.value
+        } else if (event === SaxEventType.CloseTag) {
+          if (tag === 'Key') {
+            inKey = false
+            if (path && path.startsWith(prefix)) {
+              const key = path.substring(prefix.length)
+              if (key && !key.endsWith('/')) files.push(key)
+            }
+            path = ''
+          } else if (tag === 'Prefix') {
+            inPrefix = false
+            if (path && path.startsWith(prefix)) {
+              const dir = path.substring(prefix.length).replace(/\/$/, '')
+              if (dir) dirs.push(dir)
+            }
+            path = ''
+          }
+        }
+      }
+      
+      parser.write(new TextEncoder().encode(xmlText))
+      parser.end()
+      
+    } catch (error) {
+      console.warn('SAX parsing failed, falling back to regex:', error)
+      
+      // Fallback to regex parsing if sax-wasm fails
+      const contentsRegex = /<Contents>[\s\S]*?<Key>(.*?)<\/Key>[\s\S]*?<\/Contents>/g
+      let match
+      while ((match = contentsRegex.exec(xmlText)) !== null) {
+        let key = match[1]
+        if (key.startsWith(prefix)) {
+          key = key.substring(prefix.length)
+        }
+        if (key && key !== '' && !key.endsWith('/')) {
+          files.push(key)
+        }
+      }
+      
+      const prefixRegex = /<CommonPrefixes>[\s\S]*?<Prefix>(.*?)<\/Prefix>[\s\S]*?<\/CommonPrefixes>/g
+      while ((match = prefixRegex.exec(xmlText)) !== null) {
+        let dirPath = match[1]
+        if (dirPath.startsWith(prefix)) {
+          dirPath = dirPath.substring(prefix.length)
+        }
+        if (dirPath.endsWith('/')) {
+          dirPath = dirPath.slice(0, -1)
+        }
+        if (dirPath && dirPath !== '') {
+          dirs.push(dirPath)
+        }
+      }
+    }
+    
+    return { dirs, files, handles: {} }
+  }
+
   async _getDirectoryFromURL(stillScaryPath: string) {
     const response = await this._getFileResponse(stillScaryPath)
     // console.log(response)
diff --git a/src/plugins/aequilibrae-map/AequilibraEMapComponent.vue b/src/plugins/aequilibrae-map/AequilibraEMapComponent.vue
new file mode 100644
index 000000000..258275b11
--- /dev/null
+++ b/src/plugins/aequilibrae-map/AequilibraEMapComponent.vue
@@ -0,0 +1,205 @@
+<template lang="pug">
+.c-aequilibrae-viewer.flex-col(:class="{'is-thumbnail': thumbnail}")
+  .map-viewer
+    SqliteMapComponent(
+      ref="sqliteReader"
+      :config="vizConfig"
+      :subfolder="subfolder"
+      :fileApi="fileApi"
+      @isLoaded="$emit('isLoaded')"
+      v-slot="{ geoJsonFeatures, fillColors, lineColors, lineWidths, pointRadii, fillHeights, featureFilter, isRGBA, redrawCounter, legendItems: slotLegendItems, initialView }"
+    )
+      DeckMapComponent(
+        ref="deckMap"
+        v-if="geoJsonFeatures.length && bgLayers && layerId"
+        :features="geoJsonFeatures"
+        :bgLayers="bgLayers"
+        :cbTooltip="handleTooltip"
+        :cbClickEvent="handleFeatureClick"
+        :dark="globalState.isDarkMode"
+        :featureFilter="featureFilter"
+        :fillColors="fillColors"
+        :fillHeights="fillHeights"
+        :highlightedLinkIndex="-1"
+        :initialView="initialView"
+        :isRGBA="isRGBA"
+        :isAtlantis="false"
+        :lineColors="lineColors"
+        :lineWidths="lineWidths"
+        :mapIsIndependent="false"
+        :opacity="1"
+        :pointRadii="pointRadii"
+        :redraw="redrawCounter"
+        :screenshot="0"
+        :viewId="layerId"
+        :lineWidthUnits="'meters'"
+        :pointRadiusUnits="'meters'"
+      )
+      template(v-if="slotLegendItems.length")
+        // Store legend items for use outside the slot
+  .legend-overlay(v-if="currentLegendItems.length" :style="{background: legendBgColor}")
+    LegendColors(:items="currentLegendItems" title="Legend")
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import globalStore from '@/store'
+import { FileSystemConfig } from '@/Globals'
+import HTTPFileSystem from '@/js/HTTPFileSystem'
+import SqliteMapComponent from '@/plugins/sqlite-map/SqliteMapComponent.vue'
+import { parseYamlConfig } from './parseYaml'
+import { resolvePath } from '../sqlite-map/utils'
+import DeckMapComponent from '@/plugins/shape-file/DeckMapComponent.vue'
+import LegendColors from '@/components/LegendColors.vue'
+import BackgroundLayers from '@/js/BackgroundLayers'
+import type { VizDetails } from '../sqlite-map/types'
+
+export default defineComponent({
+  name: 'AequilibraEMapComponent',
+  components: { DeckMapComponent, LegendColors, SqliteMapComponent },
+  props: {
+    root: { type: String, required: true },
+    subfolder: { type: String, required: true },
+    config: { type: Object as any },
+    resize: Object as any,
+    thumbnail: Boolean,
+    yamlConfig: String,
+  },
+  data() {
+    const uid = `id-${Math.floor(1e12 * Math.random())}`
+    return {
+      globalState: globalStore.state,
+      vizConfig: {} as VizDetails,
+      layerId: `aeq-${uid}`,
+      fileApi: null as HTTPFileSystem | null,
+      bgLayers: null as BackgroundLayers | null,
+      currentLegendItems: [] as Array<{ label: string; color: string; value: any }>,
+    }
+  },
+
+  computed: {
+    fileSystem(): FileSystemConfig {
+      const project = this.$store.state.svnProjects.find(
+        (a: FileSystemConfig) => a.slug === this.root
+      )
+      if (!project) throw new Error(`Project '${this.root}' not found`)
+      return project
+    },
+    legendBgColor(): string {
+      return this.globalState.isDarkMode ? 'rgba(32,32,32,0.95)' : 'rgba(255,255,255,0.95)' // TODO: move this logic to the legend
+    },
+  },
+
+  watch: {
+    resize() {
+      this.$forceUpdate()
+    },
+  },
+
+  async mounted() {
+    // Watch for legend changes from SqliteMapComponent
+    this.$watch(
+      () => (this.$refs.sqliteReader as any)?.legendItems,
+      (newVal) => {
+        if (newVal) {
+          this.currentLegendItems = newVal
+        }
+      },
+      { deep: true }
+    )
+
+    try {
+      this.fileApi = new HTTPFileSystem(this.fileSystem, globalStore)
+      if (this.thumbnail) {
+        this.$emit('isLoaded')
+        return
+      }
+      await this.loadConfig()
+      this.bgLayers = new BackgroundLayers({
+        vizDetails: this.vizConfig,
+        fileApi: this.fileApi,
+        subfolder: this.subfolder,
+      })
+      await this.bgLayers.initialLoad()
+    } catch (err) {
+      console.error('Error loading AequilibraE reader:', err)
+    }
+  },
+
+  methods: {
+    async loadConfig(): Promise<void> {
+      if (this.config) {
+        this.vizConfig = { ...this.config }
+        this.vizConfig.database = resolvePath(this.config.database || this.config.file, this.subfolder)
+        if (this.config.extraDatabases) {
+          this.vizConfig.extraDatabases = Object.fromEntries(
+            Object.entries(this.config.extraDatabases).map(([name, path]) => [
+              name,
+              resolvePath(path as string, this.subfolder),
+            ])
+          )
+        }
+      } else if (this.yamlConfig) {
+        const yamlBlob = await this.fileApi!.getFileBlob(resolvePath(this.yamlConfig, this.subfolder))
+        this.vizConfig = await parseYamlConfig(await yamlBlob.text(), this.subfolder)
+      } else {
+        throw new Error('No config or yamlConfig provided')
+      }
+    },
+
+    handleTooltip(hoverInfo: any) { // TODO: expand to show link id & rendered value
+      const props = hoverInfo?.object?.properties
+      return props
+        ? Object.entries(props)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join('<br>')
+        : ''
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/styles.scss';
+@import '../sqlite-map/reader.scss';
+
+.c-aequilibrae-viewer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--bgCardFrame);
+  display: flex;
+  flex-direction: column;
+  z-index: 0;
+}
+
+.map-viewer {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.legend-overlay {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 100;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  padding: 0.5rem 1rem;
+  min-width: 120px;
+  max-width: 240px;
+  pointer-events: auto;
+}
+
+.loading {
+  padding: 2rem;
+  text-align: center;
+  font-size: 1.2rem;
+  color: var(--textFancy);
+}
+</style>
diff --git a/src/plugins/aequilibrae-map/parseYaml.ts b/src/plugins/aequilibrae-map/parseYaml.ts
new file mode 100644
index 000000000..1f3e03594
--- /dev/null
+++ b/src/plugins/aequilibrae-map/parseYaml.ts
@@ -0,0 +1,37 @@
+import YAML from 'yaml'
+import type { VizDetails, LayerConfig } from '../sqlite-map/types'
+import { resolvePath, resolvePaths } from '../sqlite-map/utils'
+
+export async function parseYamlConfig(
+  yamlText: string,
+  subfolder: string | null
+): Promise<VizDetails> {
+  const config = YAML.parse(yamlText)
+  const dbFile = config.database || config.file
+  if (!dbFile) throw new Error('No database field found in YAML config')
+
+  const databasePath = resolvePath(dbFile, subfolder)
+
+  // process extraDatabases paths
+  let extraDatabases: Record<string, string> | undefined
+  if (config.extraDatabases) {
+    extraDatabases = resolvePaths(config.extraDatabases, subfolder)
+  }
+
+  return {
+    title: config.title || dbFile,
+    description: config.description || '',
+    database: databasePath,
+    extraDatabases,
+    view: config.view || '',
+    layers: config.layers || {},
+    center: config.center,
+    zoom: config.zoom,
+    projection: config.projection,
+    bearing: config.bearing,
+    pitch: config.pitch,
+    geometryLimit: config.geometryLimit,
+    minimalProperties: config.minimalProperties,
+    legend: config.legend,
+  }
+}
diff --git a/src/plugins/plotly/PlotlyDiagram.vue b/src/plugins/plotly/PlotlyDiagram.vue
index 5f4016714..d0f1ae16a 100644
--- a/src/plugins/plotly/PlotlyDiagram.vue
+++ b/src/plugins/plotly/PlotlyDiagram.vue
@@ -196,6 +196,9 @@ const MyComponent = defineComponent({
       // merge user-supplied layout with SimWrapper layout defaults
       if (this.vizDetails.layout) this.mergeLayouts()
 
+      // Apply top-level axis range settings (xMin/xMax/yMin/yMax) even without a layout property
+      this.applyAxisRangeSettings()
+
       if (this.vizDetails.fixedRatio) {
         this.vizDetails.layout.xaxis = Object.assign(this.vizDetails.layout.xaxis, {
           constrain: 'domain',
@@ -259,6 +262,16 @@ const MyComponent = defineComponent({
 
         // Update the 'minXValue' if the minimum value in the 'x' array of the current trace is less than the current 'minXValue'.
         if (xAxisMin <= this.minXValue) this.minXValue = xAxisMin
+
+        // optionally, if a max/min is set for the traces, collect the greatest maxes and least mins to build the layout ranges
+        if (this.traces[i].xaxis_max !== undefined && this.traces[i].xaxis_max > this.maxXValue)
+          this.maxXValue = this.traces[i].xaxis_max
+        if (this.traces[i].yaxis_max !== undefined && this.traces[i].yaxis_max > this.maxYValue)
+          this.maxYValue = this.traces[i].yaxis_max
+        if (this.traces[i].xaxis_min !== undefined && this.traces[i].xaxis_min < this.minXValue)
+          this.minXValue = this.traces[i].xaxis_min
+        if (this.traces[i].yaxis_min !== undefined && this.traces[i].yaxis_min < this.minYValue)
+          this.minYValue = this.traces[i].yaxis_min
       }
 
       // Set the x-axis and y-axis ranges in the layout based on the calculated 'minXValue', 'maxXValue', 'minYValue', and 'maxYValue'.
@@ -283,6 +296,8 @@ const MyComponent = defineComponent({
       //     this.maxYValue +
       //     ']'
       // )
+
+
     },
     changeDimensions(dim: any) {
       if (dim?.height && dim?.width) {
@@ -308,20 +323,56 @@ const MyComponent = defineComponent({
       delete mergedLayout.height
       delete mergedLayout.width
 
+      // Apply top-level xMin/xMax/yMin/yMax if provided
+      const { xMin, xMax, yMin, yMax } = this.vizDetails
+      const hasXRange = xMin !== undefined || xMax !== undefined
+      const hasYRange = yMin !== undefined || yMax !== undefined
+
       // be selective about these:
       if (mergedLayout.xaxis) {
         mergedLayout.xaxis.automargin = true
-        mergedLayout.xaxis.autorange = true
         mergedLayout.xaxis.animate = true
+        // Only set autorange if no range is specified (via xMin/xMax or layout.xaxis.range)
+        const xRangeFromLayout = mergedLayout.xaxis.range && mergedLayout.xaxis.range.length === 2
+        if (hasXRange) {
+          mergedLayout.xaxis.range = [
+            xMin !== undefined ? xMin : null,
+            xMax !== undefined ? xMax : null
+          ]
+          mergedLayout.xaxis.autorange = false
+        } else if (xRangeFromLayout) {
+          mergedLayout.xaxis.autorange = false
+        } else {
+          mergedLayout.xaxis.autorange = true
+        }
         if (!mergedLayout.xaxis.title) mergedLayout.xaxis.title = this.layout.xaxis.title
       } else {
-        mergedLayout.xaxis = this.layout.xaxis
+        mergedLayout.xaxis = { ...this.layout.xaxis }
+        if (hasXRange) {
+          mergedLayout.xaxis.range = [
+            xMin !== undefined ? xMin : null,
+            xMax !== undefined ? xMax : null
+          ]
+          mergedLayout.xaxis.autorange = false
+        }
       }
 
       if (mergedLayout.yaxis) {
         mergedLayout.yaxis.automargin = true
-        mergedLayout.yaxis.autorange = true
         mergedLayout.yaxis.animate = true
+        // Only set autorange if no range is specified (via yMin/yMax or layout.yaxis.range)
+        const yRangeFromLayout = mergedLayout.yaxis.range && mergedLayout.yaxis.range.length === 2
+        if (hasYRange) {
+          mergedLayout.yaxis.range = [
+            yMin !== undefined ? yMin : null,
+            yMax !== undefined ? yMax : null
+          ]
+          mergedLayout.yaxis.autorange = false
+        } else if (yRangeFromLayout) {
+          mergedLayout.yaxis.autorange = false
+        } else {
+          mergedLayout.yaxis.autorange = true
+        }
 
         // bug #357: scatterplots fail if rangemode is set
         if (!this.traces.find(a => a?.type == 'scatter')) {
@@ -329,7 +380,14 @@ const MyComponent = defineComponent({
         }
         if (!mergedLayout.yaxis.title) mergedLayout.yaxis.title = this.layout.yaxis.title
       } else {
-        mergedLayout.yaxis = this.layout.yaxis
+        mergedLayout.yaxis = { ...this.layout.yaxis }
+        if (hasYRange) {
+          mergedLayout.yaxis.range = [
+            yMin !== undefined ? yMin : null,
+            yMax !== undefined ? yMax : null
+          ]
+          mergedLayout.yaxis.autorange = false
+        }
       }
 
       if (mergedLayout.yaxis2) {
@@ -345,6 +403,32 @@ const MyComponent = defineComponent({
       this.layout = mergedLayout
     },
 
+    /**
+     * Apply top-level axis range settings (xMin, xMax, yMin, yMax) from vizDetails.
+     * This handles the case where user doesn't provide a layout property but still wants axis ranges.
+     */
+    applyAxisRangeSettings() {
+      const { xMin, xMax, yMin, yMax } = this.vizDetails
+      const hasXRange = xMin !== undefined || xMax !== undefined
+      const hasYRange = yMin !== undefined || yMax !== undefined
+
+      if (hasXRange) {
+        this.layout.xaxis.range = [
+          xMin !== undefined ? xMin : null,
+          xMax !== undefined ? xMax : null
+        ]
+        this.layout.xaxis.autorange = false
+      }
+
+      if (hasYRange) {
+        this.layout.yaxis.range = [
+          yMin !== undefined ? yMin : null,
+          yMax !== undefined ? yMax : null
+        ]
+        this.layout.yaxis.autorange = false
+      }
+    },
+
     // This method checks if facet_col and/or facet_row are defined in the traces
     createFacets() {
       if (this.traces[0].facet_col == undefined && this.traces[0].facet_row == undefined) return
diff --git a/src/plugins/pluginRegistry.ts b/src/plugins/pluginRegistry.ts
index 742dc9c8d..636e83bf0 100644
--- a/src/plugins/pluginRegistry.ts
+++ b/src/plugins/pluginRegistry.ts
@@ -143,6 +143,11 @@ const plugins = [
     ],
     component: defineAsyncComponent(() => import('./logistics/LogisticsViewer.vue')),
   },
+  {
+    kebabName: "aeq-reader",
+    filePatterns: ['**/aeqviz-*.y?(a)ml'],
+    component: defineAsyncComponent(() => import('./aequilibrae-map/AequilibraEMapComponent.vue')),
+  },
 ]
 
 export const pluginComponents: { [key: string]: AsyncComponent } = {}
diff --git a/src/plugins/shape-file/DeckMapComponent.vue b/src/plugins/shape-file/DeckMapComponent.vue
index 77728fdfd..1077c8bb5 100644
--- a/src/plugins/shape-file/DeckMapComponent.vue
+++ b/src/plugins/shape-file/DeckMapComponent.vue
@@ -48,6 +48,8 @@ export default defineComponent({
     redraw: { type: Number, required: true },
     screenshot: { type: Number, required: true },
     viewId: { type: Number, required: true },
+    lineWidthUnits: { type: String, required: false, default: 'pixels' },
+    pointRadiusUnits: { type: String, required: false, default: 'pixels' },
   },
 
   data() {
@@ -322,14 +324,14 @@ export default defineComponent({
               this.highlightedLinkIndex == -1 ? null : this.highlightedLinkIndex,
             autoHighlight: true,
             highlightColor: [255, 255, 255, 160],
-            lineWidthUnits: 'pixels',
+            lineWidthUnits: this.lineWidthUnits,
             lineWidthScale: 1,
             lineWidthMinPixels: 0, //  typeof lineWidths === 'number' ? 0 : 1,
             lineWidthMaxPixels: 50,
             getOffset: OFFSET_DIRECTION.RIGHT,
             opacity: this.opacity,
             pickable: true,
-            pointRadiusUnits: 'pixels',
+            pointRadiusUnits: this.pointRadiusUnits,
             pointRadiusMinPixels: 2,
             // pointRadiusMaxPixels: 50,
             stroked: this.isStroked,
@@ -386,7 +388,7 @@ export default defineComponent({
               this.highlightedLinkIndex == -1 ? null : this.highlightedLinkIndex,
             highlightColor: [255, 255, 255, 160], // [255, 0, 204, 255],
             opacity: 1,
-            widthUnits: 'pixels',
+            widthUnits: this.lineWidthUnits,
             widthMinPixels: 1,
             offsetDirection: OFFSET_DIRECTION.RIGHT,
             transitions: {
diff --git a/src/plugins/sqlite-map/SqliteMapComponent.vue b/src/plugins/sqlite-map/SqliteMapComponent.vue
new file mode 100644
index 000000000..14f73c310
--- /dev/null
+++ b/src/plugins/sqlite-map/SqliteMapComponent.vue
@@ -0,0 +1,293 @@
+<template lang="pug">
+.sqlite-reader
+  .loading(v-if="loading") {{ loadingText }}
+  slot(
+    v-if="!loading"
+    :geoJsonFeatures="geoJsonFeatures"
+    :legendItems="legendItems"
+    :fillColors="fillColors"
+    :lineColors="lineColors"
+    :lineWidths="lineWidths"
+    :pointRadii="pointRadii"
+    :fillHeights="fillHeights"
+    :featureFilter="featureFilter"
+    :isRGBA="isRGBA"
+    :redrawCounter="redrawCounter"
+    :initialView="initialView"
+  )
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from 'vue'
+import globalStore from '@/store'
+import { initSql, releaseSql, acquireLoadingSlot } from './loader'
+import {
+  applyStylesToVm,
+  loadDbWithCache,
+  releaseMainDbFromVm,
+  createLazyDbLoader,
+} from './helpers'
+import { openDb, getTableNames, getTableSchema, getRowCount } from './db'
+import { hasGeometryColumn } from './utils'
+import { buildTables, buildGeoFeatures } from './feature-builder'
+import type { GeoFeature, VizDetails } from './types'
+
+export default defineComponent({
+  name: 'SqliteMapComponent',
+  props: {
+    /** Configuration object with database path, layers, and styling */
+    config: { type: Object as any, required: true },
+    /** Subfolder path for resolving relative paths */
+    subfolder: { type: String, required: true },
+    /** File system API with getFileBlob method */
+    fileApi: { type: Object, required: true },
+  },
+  data() {
+    return {
+      loading: false,
+      loadingText: '',
+      db: null as any,
+      geoJsonFeatures: [] as GeoFeature[],
+      legendItems: [] as Array<{ label: string; color: string; value: any }>,
+      hasGeometry: false,
+      tables: [] as Array<{ name: string; type: string; rowCount: number; columns: any[] }>,
+      fillColors: new Uint8ClampedArray(),
+      lineColors: new Uint8ClampedArray(),
+      lineWidths: new Float32Array(),
+      pointRadii: new Float32Array(),
+      fillHeights: new Float32Array(),
+      featureFilter: new Float32Array(),
+      isRGBA: false,
+      redrawCounter: 0,
+      releaseSlot: null as (() => void) | null,
+      spl: null as any,
+      initialView: null as any,
+    }
+  },
+
+  methods: {
+    async loadDatabase(): Promise<void> {
+      try {
+        this.loadingText = 'Loading SQL engine...'
+        this.spl = await initSql()
+
+        this.loadingText = 'Loading database...'
+        const dbPath = this.config.database
+
+        if (!dbPath) {
+          throw new Error('No database path specified in configuration')
+        }
+
+        // Use helper that handles file loading
+        this.db = await loadDbWithCache(this.spl, this.fileApi, openDb, dbPath)
+
+        this.loadingText = 'Reading tables...'
+        const layerConfigs = this.config.layers || {}
+        const { tables, hasGeometry } = await buildTables(this.db, layerConfigs)
+        this.tables = tables
+        this.hasGeometry = hasGeometry
+      } catch (error) {
+        throw new Error(
+          `Failed to load database: ${error instanceof Error ? error.message : String(error)}`
+        )
+      }
+    },
+
+    computeInitialViewFromConfig(config: any) {
+      if (!config) return null
+      const center = config.center
+      const zoom = config.zoom ?? 9
+      const bearing = config.bearing ?? 0
+      const pitch = config.pitch ?? 0
+      if (!center) return null
+
+      let lon: number | undefined
+      let lat: number | undefined
+
+      if (Array.isArray(center) && center.length >= 2) {
+        lon = Number(center[0])
+        lat = Number(center[1])
+      } else if (typeof center === 'string') {
+        const parts = center.split(',').map((s: string) => s.trim())
+        if (parts.length >= 2) {
+          lon = parseFloat(parts[0])
+          lat = parseFloat(parts[1])
+        }
+      } else if (
+        typeof center === 'object' &&
+        center.lon !== undefined &&
+        center.lat !== undefined
+      ) {
+        lon = Number((center as any).lon)
+        lat = Number((center as any).lat)
+      }
+
+      if (!Number.isFinite(lon) || !Number.isFinite(lat)) return null
+
+      return {
+        longitude: lon,
+        latitude: lat,
+        zoom,
+        bearing,
+        pitch,
+      }
+    },
+
+    async extractGeometries(): Promise<void> {
+      if (!this.hasGeometry) {
+        return
+      }
+
+      try {
+        this.loadingText = 'Extracting geometries...'
+
+        const memoryOptions = {
+          limit: this.config.geometryLimit ?? 100000,
+          minimalProperties: this.config.minimalProperties !== false,
+        }
+
+        // Create a lazy loader for extra databases
+        const extraDbPaths = this.config.extraDatabases || {}
+        const lazyDbLoader = createLazyDbLoader(
+          this.spl,
+          this.fileApi,
+          openDb,
+          extraDbPaths,
+          (msg: string) => (this.loadingText = msg)
+        )
+
+        const layerConfigs = this.config.layers || {}
+        const features = await buildGeoFeatures(
+          this.db,
+          this.tables,
+          layerConfigs,
+          lazyDbLoader,
+          memoryOptions
+        )
+        this.geoJsonFeatures = markRaw(features)
+
+        // Release main database after feature extraction
+        releaseMainDbFromVm(this)
+
+        // Give GC a chance to run before building styles
+        await new Promise(resolve => setTimeout(resolve, 10))
+
+        applyStylesToVm(this, features, this.config as VizDetails, layerConfigs)
+      } catch (error) {
+        throw new Error(
+          `Failed to extract geometries: ${error instanceof Error ? error.message : String(error)}`
+        )
+      }
+    },
+
+    buildLegend(): void {
+      const legend = this.config.legend
+
+      if (Array.isArray(legend)) {
+        this.legendItems = legend.map(entry => {
+          if (entry.subtitle) {
+            return { type: 'subtitle', label: entry.subtitle }
+          }
+
+          return {
+            type: entry.shape || 'line',
+            label: entry.label || '',
+            color: this.convertColorForLegend(entry.color),
+            size: entry.size,
+            value: entry.label || '',
+          }
+        })
+      } else {
+        this.legendItems = []
+      }
+    },
+
+    convertColorForLegend(color?: string): string | undefined {
+      return color
+        ?.replace('#', '')
+        .match(/.{1,2}/g)
+        ?.map(x => parseInt(x, 16))
+        .join(',')
+    },
+
+    cleanupMemory(): void {
+      releaseMainDbFromVm(this)
+      releaseSql()
+      this.spl = null
+      this.geoJsonFeatures = []
+      this.tables = []
+      this.fillColors = new Uint8ClampedArray()
+      this.lineColors = new Uint8ClampedArray()
+      this.lineWidths = new Float32Array()
+      this.pointRadii = new Float32Array()
+      this.fillHeights = new Float32Array()
+      this.featureFilter = new Float32Array()
+    },
+  },
+
+  async mounted() {
+    try {
+      if (this.config.thumbnail) {
+        this.$emit('isLoaded')
+        return
+      }
+
+      this.loading = true
+      this.loadingText = 'Waiting for other maps to load...'
+      this.releaseSlot = await acquireLoadingSlot()
+      await this.loadDatabase()
+      await this.extractGeometries()
+      if (this.releaseSlot) {
+        this.releaseSlot()
+        this.releaseSlot = null
+      }
+      this.buildLegend()
+
+      // Compute and apply initial view from config after geometries are ready so DeckMap
+      // initializes with the correct camera when the slot renders.
+      const iv = this.computeInitialViewFromConfig(this.config)
+      if (iv) {
+        this.initialView = iv
+        try {
+          globalStore.commit('setMapCamera', iv)
+        } catch (e) {
+          // ignore if store commit fails
+        }
+      }
+    } catch (error) {
+      this.loadingText = `Error: ${error instanceof Error ? error.message : String(error)}`
+    } finally {
+      this.loading = false
+      if (this.releaseSlot) {
+        this.releaseSlot()
+        this.releaseSlot = null
+      }
+      this.$emit('isLoaded')
+    }
+  },
+
+  beforeUnmount() {
+    if (this.releaseSlot) {
+      this.releaseSlot()
+      this.releaseSlot = null
+    }
+    this.cleanupMemory()
+  },
+})
+</script>
+
+<style scoped>
+.sqlite-reader {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading {
+  text-align: center;
+  font-size: 1.2rem;
+  color: var(--textFancy);
+}
+</style>
diff --git a/src/plugins/sqlite-map/db.ts b/src/plugins/sqlite-map/db.ts
new file mode 100644
index 000000000..ef9ed5f6c
--- /dev/null
+++ b/src/plugins/sqlite-map/db.ts
@@ -0,0 +1,394 @@
+import proj4 from 'proj4'
+import type { JoinConfig, GeoFeature, SqliteDb, SPL } from './types'
+import {
+  ESSENTIAL_SPATIAL_COLUMNS,
+  isGeometryColumn,
+  getUsedColumns,
+  createJoinCacheKey,
+} from './utils'
+
+export async function getTableNames(db: SqliteDb): Promise<string[]> {
+  const result = await db.exec("SELECT name FROM sqlite_master WHERE type='table';").get.objs
+  return result.map((row: any) => row.name)
+}
+
+export async function getTableSchema(
+  db: SqliteDb,
+  tableName: string
+): Promise<{ name: string; type: string; nullable: boolean }[]> {
+  const result = await db.exec(`PRAGMA table_info("${tableName}");`).get.objs
+  return result.map((row: any) => ({
+    name: row.name,
+    type: row.type,
+    nullable: row.notnull === 0,
+  }))
+}
+
+export async function getRowCount(db: SqliteDb, tableName: string): Promise<number> {
+  const result = await db.exec(`SELECT COUNT(*) as count FROM "${tableName}";`).get.objs
+  return result.length > 0 ? result[0].count : 0
+}
+
+export async function queryTable(
+  db: SqliteDb,
+  tableName: string,
+  columns?: string[],
+  whereClause?: string
+): Promise<Record<string, any>[]> {
+  const columnList = columns ? columns.map(c => `"${c}"`).join(', ') : '*'
+  const whereCondition = whereClause ? ` WHERE ${whereClause}` : ''
+  const query = `SELECT ${columnList} FROM "${tableName}"${whereCondition};`
+  const result = await db.exec(query).get.objs
+  return result
+}
+
+const joinDataCache: Map<string, Map<any, Record<string, any>>> = new Map()
+
+export async function getCachedJoinData(
+  db: SqliteDb,
+  joinConfig: JoinConfig,
+  neededColumn?: string
+): Promise<Map<any, Record<string, any>>> {
+  const cacheKey = createJoinCacheKey(
+    joinConfig.database,
+    joinConfig.table,
+    neededColumn || undefined,
+    joinConfig.filter
+  )
+
+  if (joinDataCache.has(cacheKey)) {
+    return joinDataCache.get(cacheKey)!
+  }
+
+  // Determine which columns to query
+  let columnsToQuery: string[] | undefined
+  if (neededColumn) {
+    columnsToQuery = [joinConfig.rightKey]
+    if (neededColumn !== joinConfig.rightKey) {
+      columnsToQuery.push(neededColumn)
+    }
+  } else if (joinConfig.columns && joinConfig.columns.length > 0) {
+    const colSet = new Set(joinConfig.columns)
+    colSet.add(joinConfig.rightKey)
+    columnsToQuery = Array.from(colSet)
+  } else {
+    columnsToQuery = undefined
+  }
+
+  const joinRows = await queryTable(db, joinConfig.table, columnsToQuery, joinConfig.filter)
+  const joinData = new Map(joinRows.map(row => [row[joinConfig.rightKey], row]))
+  joinDataCache.set(cacheKey, joinData)
+
+  return joinData
+}
+
+// Helper: build properties object from a database row
+function buildPropertiesFromRow(
+  selectedColumns: any[],
+  row: any,
+  layerName: string
+): Record<string, any> {
+  const properties: Record<string, any> = { _layer: layerName }
+  for (const col of selectedColumns) {
+    const key = col.name
+    if (key !== 'geojson_geom' && key !== 'geom_type' && row[key] != null) {
+      properties[key] = row[key]
+    }
+  }
+  return properties
+}
+
+// Helper: parse GeoJSON string/object
+function parseGeometry(geojson: any): any | null {
+  try {
+    return typeof geojson === 'string' ? JSON.parse(geojson) : geojson
+  } catch (e) {
+    return null
+  }
+}
+
+export async function fetchGeoJSONFeatures(
+  db: SqliteDb,
+  table: { name: string; columns: any[] },
+  layerName: string,
+  layerConfig: any,
+  joinedData?: Map<any, Record<string, any>>,
+  joinConfig?: JoinConfig,
+  options?: {
+    limit?: number
+    minimalProperties?: boolean
+  }
+): Promise<GeoFeature[]> {
+  const limit = options?.limit ?? 1000000 // Default limit
+  const minimalProps = options?.minimalProperties ?? true
+
+  // Resolve joined data early to reuse the cached Map
+  const cachedJoinedData = joinedData ?? (joinConfig ? await getCachedJoinData(db, joinConfig) : undefined)
+
+  // Determine which columns we need
+  const usedColumns = getUsedColumns(layerConfig)
+  if (joinConfig) {
+    usedColumns.add(joinConfig.leftKey)
+  }
+
+  let columnNames: string
+  if (minimalProps && usedColumns.size > 0) {
+    const colsToSelect = table.columns
+      .filter((c: any) => {
+        const name = c.name.toLowerCase()
+        return (
+          !isGeometryColumn(name) &&
+          (usedColumns.has(c.name) || ESSENTIAL_SPATIAL_COLUMNS.has(name))
+        )
+      })
+      .map((c: any) => `"${c.name}"`)
+
+    // If no specific columns identified, fall back to all
+    columnNames =
+      colsToSelect.length > 0
+        ? colsToSelect.join(', ')
+        : table.columns
+            .filter((c: any) => !isGeometryColumn(c.name))
+            .map((c: any) => `"${c.name}"`)
+            .join(', ')
+  } else {
+    columnNames = table.columns
+      .filter((c: any) => !isGeometryColumn(c.name))
+      .map((c: any) => `"${c.name}"`)
+      .join(', ')
+  }
+
+  function findGeometryColumn(cols: any[]): string {
+    for (const c of cols) {
+      const n = String(c.name).toLowerCase()
+      if (isGeometryColumn(n) || n === 'geo' || n === 'geometry') return c.name
+    }
+    return 'geometry'
+  }
+
+  const geomCol = findGeometryColumn(table.columns)
+
+  // Support optional SQL filter from layer config
+  let filterClause = `${geomCol} IS NOT NULL`
+  if (
+    layerConfig &&
+    typeof layerConfig.sqlFilter === 'string' &&
+    layerConfig.sqlFilter.trim().length > 0
+  ) {
+    const sqlFilter = layerConfig.sqlFilter.trim()
+    filterClause += ` AND (${sqlFilter})`
+  }
+
+  const safeTableName = String(table.name).replace(/"/g, '""')
+  const numericLimit = Number(limit)
+  const safeLimit =
+    Number.isFinite(numericLimit) && numericLimit > 0 ? Math.floor(numericLimit) : 1000
+  const safeGeomCol = String(geomCol).replace(/"/g, '""')
+
+  const query = `
+    SELECT ${columnNames},
+           AsGeoJSON("${safeGeomCol}") as geojson_geom,
+           GeometryType("${safeGeomCol}") as geom_type
+    FROM "${safeTableName}"
+    WHERE ${filterClause}
+    LIMIT ${safeLimit};
+  `
+
+  // Execute query
+  const queryResult = await db.exec(query)
+  let rows = await queryResult.get.objs
+
+  // Pre-allocate features array
+  const features: GeoFeature[] = []
+
+  const joinType = joinConfig?.type || 'left'
+
+  const selectedColumns =
+    minimalProps && usedColumns.size > 0
+      ? table.columns.filter((c: any) => {
+          const name = c.name.toLowerCase()
+          return (
+            !isGeometryColumn(name) &&
+            (usedColumns.has(c.name) || ESSENTIAL_SPATIAL_COLUMNS.has(name))
+          )
+        })
+      : table.columns.filter((c: any) => !isGeometryColumn(c.name))
+
+  const tableProjection = await getProjectionForTable(db, table.name)
+
+  const BATCH_SIZE = 5000
+
+  for (let batchStart = 0; batchStart < rows.length; batchStart += BATCH_SIZE) {
+    const batchEnd = Math.min(batchStart + BATCH_SIZE, rows.length)
+
+    for (let r = batchStart; r < batchEnd; r++) {
+      const row = rows[r]
+      if (!row.geojson_geom) {
+        rows[r] = null
+        continue
+      }
+
+      const properties = buildPropertiesFromRow(selectedColumns, row, layerName)
+
+      if (cachedJoinedData && joinConfig) {
+        const joinRow = cachedJoinedData.get(row[joinConfig.leftKey])
+        if (joinRow) {
+          for (const [key, value] of Object.entries(joinRow)) {
+            if (!(key in properties)) properties[key] = value
+            else if (key !== joinConfig.rightKey) properties[`${joinConfig.table}_${key}`] = value
+          }
+        } else if (joinType === 'inner') {
+          continue
+        }
+      }
+
+      // Parse geometry, apply projection if needed
+      let geometry = parseGeometry(row.geojson_geom)
+      if (!geometry) {
+        rows[r] = null
+        continue
+      }
+
+      if (geometry.coordinates && tableProjection.transform) {
+        geometry.coordinates = transformCoordinates(geometry.coordinates, tableProjection.transform)
+      }
+
+      features.push({ type: 'Feature', geometry, properties })
+      rows[r] = null
+    }
+
+    if (batchEnd < rows.length) {
+      await new Promise(resolve => setTimeout(resolve, 0))
+    }
+  }
+
+  rows.length = 0
+  rows = null as any
+
+  return features
+}
+
+type ProjectionInfo = {
+  srid: number | null
+  transform: ((xy: [number, number]) => [number, number]) | null
+}
+
+const tableProjectionCache = new Map<string, ProjectionInfo>()
+
+async function lookupTableSrid(db: any, tableName: string): Promise<number | null> {
+  try {
+    const rows = await db.exec(
+      `SELECT srid FROM geometry_columns WHERE lower(f_table_name) = lower('${tableName}') LIMIT 1;`
+    ).get.objs
+    return rows?.[0]?.srid ?? null
+  } catch (err) {
+    return null
+  }
+}
+
+async function lookupProjectionDefinition(db: any, srid: number): Promise<string | null> {
+  try {
+    const rows = await db.exec(
+      `SELECT proj4text, srtext FROM spatial_ref_sys WHERE srid = ${srid} LIMIT 1;`
+    ).get.objs
+    if (!rows || rows.length === 0) return null
+    return rows[0].proj4text || rows[0].srtext || null
+  } catch (err) {
+    return null
+  }
+}
+
+function transformCoordinates(
+  coords: any,
+  transform: (xy: [number, number]) => [number, number]
+): any {
+  if (!coords || !Array.isArray(coords)) return coords
+  if (coords.length > 0 && typeof coords[0] === 'number') {
+    const [x, y, ...rest] = coords
+    const [tx, ty] = transform([x as number, y as number])
+    return [tx, ty, ...rest]
+  }
+  return coords.map((c: any) => transformCoordinates(c, transform))
+}
+
+async function getProjectionForTable(db: any, tableName: string): Promise<ProjectionInfo> {
+  const cached = tableProjectionCache.get(tableName)
+  if (cached) return cached
+
+  const srid = await lookupTableSrid(db, tableName)
+  if (!srid || srid === 4326) {
+    const info = { srid: srid ?? null, transform: null }
+    tableProjectionCache.set(tableName, info)
+    return info
+  }
+
+  const definition = await lookupProjectionDefinition(db, srid)
+  if (!definition) {
+    const info = { srid, transform: null }
+    tableProjectionCache.set(tableName, info)
+    return info
+  }
+
+  let transform: ProjectionInfo['transform'] = null
+  try {
+    const converter = proj4(definition, 'EPSG:4326')
+    transform = (xy: [number, number]) => converter.forward(xy) as [number, number]
+  } catch (err) {
+    transform = null
+  }
+
+  const info = { srid, transform }
+  tableProjectionCache.set(tableName, info)
+  return info
+}
+
+interface CachedDb {
+  db: any
+  path: string
+}
+
+const dbCache = new Map<string, CachedDb>()
+const dbLoadPromises = new Map<string, Promise<SqliteDb>>()
+
+export async function openDb(spl: SPL, arrayBuffer: ArrayBuffer, path?: string): Promise<SqliteDb> {
+  // If no path provided, can't cache - just open directly
+  if (!path) {
+    return spl.db(arrayBuffer)
+  }
+
+  const cached = dbCache.get(path)
+  if (cached) {
+    return cached.db
+  }
+
+  const loadingPromise = dbLoadPromises.get(path)
+  if (loadingPromise) {
+    return loadingPromise
+  }
+
+  const loadPromise = (async () => {
+    const db = await spl.db(arrayBuffer)
+    dbCache.set(path, { db, path })
+    dbLoadPromises.delete(path)
+    return db
+  })()
+
+  dbLoadPromises.set(path, loadPromise)
+  return loadPromise
+}
+
+export function clearAllDbCaches(): void {
+  for (const [path, cached] of dbCache) {
+    try {
+      if (cached.db && typeof cached.db.close === 'function') {
+        cached.db.close()
+      }
+    } catch (e) {
+      console.warn(`Failed to close database ${path}:`, e)
+    }
+  }
+  dbCache.clear()
+  dbLoadPromises.clear()
+
+  joinDataCache.clear()
+}
diff --git a/src/plugins/sqlite-map/feature-builder.ts b/src/plugins/sqlite-map/feature-builder.ts
new file mode 100644
index 000000000..07e9998cb
--- /dev/null
+++ b/src/plugins/sqlite-map/feature-builder.ts
@@ -0,0 +1,120 @@
+import type { SqliteDb } from './types'
+import {
+  getTableNames,
+  getTableSchema,
+  getRowCount,
+  fetchGeoJSONFeatures,
+  getCachedJoinData,
+} from './db'
+import { hasGeometryColumn, getNeededJoinColumn } from './utils'
+import type { LayerConfig } from './types'
+
+export async function buildTables(
+  db: SqliteDb,
+  layerConfigs: { [k: string]: LayerConfig },
+  allNames?: string[]
+) {
+  const names = allNames ?? (await getTableNames(db))
+  const select = Object.keys(layerConfigs).length
+    ? [...new Set(Object.values(layerConfigs).map(c => c.table))]
+    : ['nodes', 'links', 'zones']
+
+  const tables: Array<{ name: string; type: string; rowCount: number; columns: any[] }> = []
+  let hasGeometry = false
+
+  for (const name of names) {
+    if (!select.includes(name)) continue
+    const schema = await getTableSchema(db, name)
+    const rowCount = await getRowCount(db, name)
+    const hasGeomCol = hasGeometryColumn(schema)
+    if (hasGeomCol) hasGeometry = true
+    tables.push({ name, type: 'table', rowCount, columns: schema })
+  }
+  return { tables, hasGeometry }
+}
+
+export interface GeoFeatureOptions {
+  limit?: number
+  coordinatePrecision?: number
+  minimalProperties?: boolean
+}
+
+export type LazyDbLoader = (dbName: string) => Promise<SqliteDb | null>
+
+export async function buildGeoFeatures(
+  db: SqliteDb,
+  tables: Array<{ name: string; type: string; rowCount: number; columns: any[] }>,
+  layerConfigs: { [k: string]: LayerConfig },
+  lazyDbLoader?: LazyDbLoader,
+  options?: GeoFeatureOptions
+) {
+  const plain = Object.assign({}, layerConfigs)
+  const layersToProcess = Object.keys(plain).length
+    ? Object.entries(plain)
+    : tables
+        .filter(t => hasGeometryColumn(t.columns))
+        .map(t => [t.name, { table: t.name, type: 'line' as const }])
+
+  const features: any[] = []
+  const loadedExtraDbs = new Map<string, SqliteDb>()
+
+  try {
+    for (const [layerName, cfg] of layersToProcess as any) {
+      const layerConfig = cfg as LayerConfig
+      const tableName = layerConfig.table || layerName
+      const table = tables.find(t => t.name === tableName)
+      if (!table) continue
+      if (!hasGeometryColumn(table.columns)) continue
+
+      let joinedData: Map<any, Record<string, any>> | undefined
+
+      if (layerConfig.join && lazyDbLoader) {
+        const neededColumn = getNeededJoinColumn(layerConfig)
+
+        try {
+          let extraDb = loadedExtraDbs.get(layerConfig.join.database)
+          if (!extraDb) {
+            const maybeDb = await lazyDbLoader(layerConfig.join.database)
+            if (maybeDb) {
+              extraDb = maybeDb
+              loadedExtraDbs.set(layerConfig.join.database, maybeDb)
+            }
+          }
+
+          if (extraDb) {
+            joinedData = await getCachedJoinData(extraDb, layerConfig.join, neededColumn)
+          } else {
+            console.warn(
+              `Extra database '${layerConfig.join.database}' not found for layer '${layerName}'`
+            )
+          }
+        } catch (e) {
+          console.warn(
+            `Failed to load join data from ${layerConfig.join.database}.${layerConfig.join.table}:`,
+            e
+          )
+        }
+      }
+
+      const layerFeatures = await fetchGeoJSONFeatures(
+        db,
+        table,
+        layerName,
+        cfg,
+        joinedData,
+        layerConfig.join,
+        options
+      )
+
+      for (let i = 0; i < layerFeatures.length; i++) {
+        features.push(layerFeatures[i])
+      }
+
+      await new Promise(resolve => setTimeout(resolve, 50))
+    }
+  } finally {
+    loadedExtraDbs.clear()
+  }
+
+  return features
+}
diff --git a/src/plugins/sqlite-map/helpers.ts b/src/plugins/sqlite-map/helpers.ts
new file mode 100644
index 000000000..dc30e5c79
--- /dev/null
+++ b/src/plugins/sqlite-map/helpers.ts
@@ -0,0 +1,51 @@
+import { markRaw } from 'vue'
+import { buildStyleArrays } from './styling/styling'
+import type { SqliteDb, VizDetails } from './types'
+
+type OpenDbFn = (spl: any, buf: ArrayBuffer, path?: string) => Promise<SqliteDb>
+
+export function applyStylesToVm(
+  vm: any,
+  features: any[],
+  vizDetails: VizDetails,
+  layerConfigs: any
+) {
+  vm.geoJsonFeatures = markRaw(features)
+  const styles = buildStyleArrays({
+    features: vm.geoJsonFeatures,
+    layers: layerConfigs,
+    defaults: vizDetails.defaults,
+  })
+  Object.assign(vm, styles, { isRGBA: true, redrawCounter: (vm.redrawCounter ?? 0) + 1 })
+}
+
+export function releaseMainDbFromVm(vm: any) {
+  vm.db = null
+  vm.tables = []
+}
+
+export async function loadDbWithCache(spl: any, fileApi: any, openDb: OpenDbFn, path: string) {
+  const blob = await fileApi.getFileBlob(path)
+  return openDb(spl, await blob.arrayBuffer(), path)
+}
+
+export function createLazyDbLoader(
+  spl: any,
+  fileApi: any,
+  openDb: OpenDbFn,
+  extraDbPaths: Record<string, string>,
+  onLoadingText?: (msg: string) => void
+) {
+  return async (dbName: string) => {
+    const path = extraDbPaths[dbName]
+    if (!path) return null
+    try {
+      onLoadingText?.(`Loading ${dbName}...`)
+      const blob = await fileApi.getFileBlob(path)
+      return openDb(spl, await blob.arrayBuffer(), path)
+    } catch (e) {
+      console.warn(`Failed to load database '${dbName}':`, e)
+      return null
+    }
+  }
+}
diff --git a/src/plugins/sqlite-map/loader.ts b/src/plugins/sqlite-map/loader.ts
new file mode 100644
index 000000000..59860d092
--- /dev/null
+++ b/src/plugins/sqlite-map/loader.ts
@@ -0,0 +1,47 @@
+// Ensures only one map loads at a time to prevent memory exhaustion when loading many maps
+// simultaneously. Also manages the shared SPL (SpatiaLite) engine instance, which is ~100MB+ in
+// memory. We are caching the database reads and geo-json extraction to not (a) repeatedly download
+// the same DB files and (b) not spike the memory usage.
+
+import SPL from 'spl.js'
+import type { SPL as SPLType } from './types'
+
+let loadingQueue: Promise<void> = Promise.resolve()
+
+export function acquireLoadingSlot(): Promise<() => void> {
+  let releaseSlot: () => void
+  const myTurn = loadingQueue.then()
+  loadingQueue = new Promise<void>(resolve => {
+    releaseSlot = resolve
+  })
+  return myTurn.then(() => releaseSlot!)
+}
+
+let sharedSpl: SPLType | null = null
+let splInitPromise: Promise<SPLType> | null = null
+let splRefCount = 0
+
+export async function initSql(): Promise<SPLType> {
+  splRefCount++
+
+  if (sharedSpl) {
+    return sharedSpl
+  }
+
+  if (splInitPromise) {
+    return splInitPromise
+  }
+
+  // initialize the shared SPL engine
+  splInitPromise = SPL().then((spl: SPLType) => {
+    sharedSpl = spl
+    splInitPromise = null
+    return spl
+  })
+
+  return splInitPromise!
+}
+
+export function releaseSql(): void {
+  splRefCount -= 1 // let GC clean up, restarting the SPL engine is slow
+}
diff --git a/src/plugins/sqlite-map/reader.scss b/src/plugins/sqlite-map/reader.scss
new file mode 100644
index 000000000..8bde224f7
--- /dev/null
+++ b/src/plugins/sqlite-map/reader.scss
@@ -0,0 +1,99 @@
+/**
+ * Styles shared for sqlite-backed readers (AequilibraE, Polaris, etc.)
+ * Centralized so all sqlite-map based readers have consistent appearance.
+ */
+
+/* Main container styles */
+.c-aequilibrae-viewer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--bgCardFrame);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Map container */
+.map-viewer {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+/* Loading state indicator */
+.loading {
+  padding: 2rem;
+  text-align: center;
+  font-size: 1.2rem;
+  color: var(--textFancy);
+
+  /* Add subtle animation for loading state */
+  &::after {
+    content: '...';
+    display: inline-block;
+    animation: loading-dots 1.5s steps(4, end) infinite;
+  }
+}
+
+@keyframes loading-dots {
+  0%,
+  20% {
+    content: '';
+  }
+  40% {
+    content: '.';
+  }
+  60% {
+    content: '..';
+  }
+  80%,
+  100% {
+    content: '...';
+  }
+}
+
+/* Database content display styles */
+.database-content {
+  padding: 0.5rem 0;
+
+  h3 {
+    margin-bottom: 1rem;
+    color: var(--textFancy);
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  h4 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--link);
+    font-weight: bold;
+    font-size: 1.1rem;
+  }
+
+  p {
+    margin: 0.25rem 0;
+    color: var(--text);
+    line-height: 1.4;
+  }
+
+  .columns {
+    margin-left: 1rem;
+    font-size: 0.9rem;
+    color: var(--textFancy);
+
+    div {
+      margin: 0.1rem 0;
+      padding: 0.1rem 0;
+
+      &:hover {
+        background-color: var(--bgHover);
+        padding-left: 0.25rem;
+        border-left: 2px solid var(--link);
+      }
+    }
+  }
+}
diff --git a/src/plugins/sqlite-map/styling/color-utils.ts b/src/plugins/sqlite-map/styling/color-utils.ts
new file mode 100644
index 000000000..0ede02a73
--- /dev/null
+++ b/src/plugins/sqlite-map/styling/color-utils.ts
@@ -0,0 +1,71 @@
+import * as cartoColors from 'cartocolor'
+import type { RGBA, RGB } from '../types'
+
+export const hexToRgba = (hex: string, alpha: number = 1): RGBA => {
+  const bytes = hex.replace('#', '').match(/.{1,2}/g) || ['80', '80', '80']
+  return [
+    parseInt(bytes[0], 16),
+    parseInt(bytes[1], 16),
+    parseInt(bytes[2], 16),
+    Math.round(alpha * 255),
+  ]
+}
+
+export const hexToRgb = (hex: string): RGB => {
+  const [r, g, b] = hexToRgba(hex, 1)
+  return [r, g, b]
+}
+
+export const toNumber = (value: any): number | null => {
+  const num = Number(value)
+  return isNaN(num) ? null : num
+}
+
+export const buildColorEncoder = (
+  values: any[],
+  style: any,
+  dataRange: [number, number] | null = null
+) => {
+  const s = style || {}
+  const nums: number[] = []
+  for (const v of values) {
+    let num = toNumber(v)
+    if (num === null) continue
+    if (dataRange) num = Math.max(dataRange[0], Math.min(dataRange[1], num))
+    nums.push(num)
+  }
+
+  const min = s.range?.[0] ?? (nums.length ? Math.min(...nums) : 0)
+  const max = s.range?.[1] ?? (nums.length ? Math.max(...nums) : 1)
+
+  // Get palette colors
+  const paletteName = s.palette || 'YlGn'
+  const numColors = s.numColors || 7
+  const palette = (cartoColors as any)[paletteName]
+  let hexColors: string[]
+  if (!palette) {
+    hexColors = Array(numColors).fill('#808080')
+  } else {
+    const sizes = Object.keys(palette).map(Number).filter(n => n > 0).sort((a, b) => a - b)
+    const size = sizes.find(sz => sz >= numColors) || sizes[sizes.length - 1]
+    hexColors = palette[size] || Array(numColors).fill('#808080')
+  }
+  const colors = hexColors.map(h => hexToRgba(h, 1))
+
+  const scale = max === min ? 0 : (numColors - 1) / (max - min)
+
+  return (value: any): RGBA => {
+    const num = toNumber(value) ?? min
+    const idx = Math.round((num - min) * scale)
+    return colors[Math.max(0, Math.min(numColors - 1, idx))]
+  }
+}
+
+export const buildCategoryEncoder = (colors: Record<string, string>, defaultColor = '#808080') => {
+  const colorMap = new Map<string, RGBA>()
+  for (const [key, hex] of Object.entries(colors)) {
+    colorMap.set(String(key), hexToRgba(hex, 1))
+  }
+  const defaultRgba = hexToRgba(defaultColor, 1)
+  return (value: any): RGBA => colorMap.get(String(value)) || defaultRgba
+}
diff --git a/src/plugins/sqlite-map/styling/styling.ts b/src/plugins/sqlite-map/styling/styling.ts
new file mode 100644
index 000000000..af914eb45
--- /dev/null
+++ b/src/plugins/sqlite-map/styling/styling.ts
@@ -0,0 +1,166 @@
+import { LayerStyle, BuildArgs, BuildResult } from '../types'
+import { hexToRgb, hexToRgba, buildColorEncoder, buildCategoryEncoder, toNumber } from './color-utils'
+
+// map values from data range to output range, clamped
+const mapToRange = (
+  value: number | null,
+  dataRange: [number, number],
+  outputRange: [number, number]
+): number => {
+  if (value === null) return outputRange[0]
+  const [dMin, dMax] = dataRange
+  const [oMin, oMax] = outputRange
+  const t = dMax === dMin ? 0 : (value - dMin) / (dMax - dMin)
+  return Math.max(oMin, Math.min(oMax, t * (oMax - oMin) + oMin))
+}
+
+export function buildStyleArrays(args: BuildArgs): BuildResult {
+  const { features, layers, defaults = {} } = args
+
+  const N = features.length
+  const fillColors = new Uint8ClampedArray(N * 4)
+  const lineColors = new Uint8ClampedArray(N * 3) // RGB only
+  const lineWidths = new Float32Array(N)
+  const pointRadii = new Float32Array(N)
+  const fillHeights = new Float32Array(N)
+  const featureFilter = new Float32Array(N)
+
+  // pre-index features by layer name in properties._layer to allow per-layer style
+  // fallback to globalstyle if properties._layer isn’t present.
+  type LayerBucket = { idxs: number[]; props: any[]; style?: LayerStyle }
+  const buckets = new Map<string, LayerBucket>()
+  for (let i = 0; i < N; i++) {
+    const props = features[i]?.properties || {}
+    const layerName = props._layer || 'GLOBAL'
+    const bucket = buckets.get(layerName) || {
+      idxs: [],
+      props: [],
+      style: layers[layerName]?.style,
+    }
+    bucket.idxs.push(i)
+    bucket.props.push(props)
+    bucket.style = layers[layerName]?.style || bucket.style
+    buckets.set(layerName, bucket)
+  }
+
+  // global defaults used if no layer style present
+  const defaultFill = hexToRgba(defaults.fillColor || '#59a14f', 1)
+  const defaultLine = hexToRgb(defaults.lineColor || '#4e79a7')
+  const defaultWidth = defaults.lineWidth ?? 2
+  const defaultRadius = defaults.pointRadius ?? 4
+  const defaultHeight = defaults.fillHeight ?? 0
+
+  // initialize everything to defaults first
+  for (let i = 0; i < N; i++) {
+    fillColors.set(defaultFill, i * 4)
+    lineColors.set(defaultLine, i * 3) // RGB offset
+    lineWidths[i] = defaultWidth
+    pointRadii[i] = defaultRadius
+    fillHeights[i] = defaultHeight
+    featureFilter[i] = 1 // visible by default
+  }
+
+  // apply per-layer styles
+  for (const bucket of Array.from(buckets.values())) {
+    const style = bucket.style
+    const idxs = bucket.idxs
+    const propsArr = bucket.props
+
+    if (!style) continue
+
+    // filter
+    if (style.filter && 'column' in style.filter) {
+      const f = style.filter as any
+      for (let j = 0; j < idxs.length; j++) {
+        const v = propsArr[j]?.[f.column]
+        let visible = true
+        if (f.include?.length) visible = f.include.includes(v)
+        if (f.exclude?.length) visible = visible && !f.exclude.includes(v)
+        featureFilter[idxs[j]] = visible ? 1 : 0
+      }
+    }
+
+    // apply color style to a target typed array
+    const applyColor = (styleVal: any, target: Uint8ClampedArray, stride: number) => {
+      if (!styleVal) return
+      if (typeof styleVal === 'string') {
+        const color = stride === 3 ? hexToRgb(styleVal) : hexToRgba(styleVal, 1)
+        for (const i of idxs) target.set(color, i * stride)
+      } else if ('colors' in styleVal) {
+        const encoder = buildCategoryEncoder(styleVal.colors, '#808080')
+        for (let j = 0; j < idxs.length; j++) {
+          const rgba = encoder(propsArr[j]?.[styleVal.column])
+          target.set(stride === 3 ? rgba.slice(0, 3) : rgba, idxs[j] * stride)
+        }
+      } else if ('column' in styleVal) {
+        const encoder = buildColorEncoder(
+          propsArr.map((p: any) => p?.[styleVal.column]),
+          styleVal,
+          styleVal.dataRange
+        )
+        for (let j = 0; j < idxs.length; j++) {
+          const rgba = encoder(propsArr[j]?.[styleVal.column])
+          target.set(stride === 3 ? rgba.slice(0, 3) : rgba, idxs[j] * stride)
+        }
+      }
+    }
+
+    applyColor(style.fillColor, fillColors, 4)
+    applyColor(style.lineColor, lineColors, 3)
+
+    // lineWidth - handle static, array, category, and column-based
+    if (style.lineWidth) {
+      const lw = style.lineWidth as any
+      if (Array.isArray(lw)) {
+        for (let j = 0; j < idxs.length; j++) lineWidths[idxs[j]] = lw[j] ?? defaultWidth
+      } else if (typeof lw === 'number') {
+        for (const i of idxs) lineWidths[i] = lw
+      } else if ('widths' in lw && 'column' in lw) {
+        for (let j = 0; j < idxs.length; j++) lineWidths[idxs[j]] = lw.widths[propsArr[j]?.[lw.column]] ?? defaultWidth
+      } else if ('column' in lw) {
+        const dataRange = lw.dataRange ?? [1, 6]
+        const outRange = lw.widthRange ?? [1, 6]
+        for (let j = 0; j < idxs.length; j++) {
+          lineWidths[idxs[j]] = mapToRange(toNumber(propsArr[j]?.[lw.column]), dataRange, outRange)
+        }
+      }
+    }
+
+    // pointRadius - handle both static and column-based
+    if (style.pointRadius) {
+      const pr = style.pointRadius as any
+      if (typeof pr === 'number') {
+        for (const i of idxs) pointRadii[i] = pr
+      } else if ('column' in pr) {
+        const dataRange = pr.dataRange ?? [2, 12]
+        const outRange = pr.widthRange ?? [2, 12]
+        for (let j = 0; j < idxs.length; j++) {
+          pointRadii[idxs[j]] = mapToRange(toNumber(propsArr[j]?.[pr.column]), dataRange, outRange)
+        }
+      }
+    }
+
+    // fillHeight - handle both static and column-based
+    if (style.fillHeight) {
+      const fh = style.fillHeight as any
+      if (typeof fh === 'number') {
+        for (const i of idxs) fillHeights[i] = fh
+      } else if ('column' in fh) {
+        const dataRange = fh.dataRange ?? [0, 100]
+        const outRange = fh.widthRange ?? [0, 100]
+        for (let j = 0; j < idxs.length; j++) {
+          fillHeights[idxs[j]] = mapToRange(toNumber(propsArr[j]?.[fh.column]), dataRange, outRange)
+        }
+      }
+    }
+  }
+
+  return {
+    fillColors,
+    lineColors,
+    lineWidths,
+    pointRadii,
+    fillHeights,
+    featureFilter,
+  }
+}
diff --git a/src/plugins/sqlite-map/types.ts b/src/plugins/sqlite-map/types.ts
new file mode 100644
index 000000000..b30215a04
--- /dev/null
+++ b/src/plugins/sqlite-map/types.ts
@@ -0,0 +1,143 @@
+export type GeometryType = 'polygon' | 'line' | 'point'
+
+// join between two databases
+export interface JoinConfig {
+  database: string
+  table: string
+  leftKey: string
+  rightKey: string
+  type?: 'left' | 'inner'
+  columns?: string[]
+  filter?: string
+}
+
+// config for a map layer
+export interface LayerConfig {
+  table: string
+  type: GeometryType
+  join?: JoinConfig
+  fillColor?: string
+  strokeColor?: string
+  strokeWidth?: number
+  radius?: number
+  opacity?: number
+  zIndex?: number
+}
+
+export interface VizDetails {
+  title: string
+  description: string
+  database: string
+  extraDatabases?: Record<string, string>
+  view: 'table' | 'map' | ''
+  layers: { [key: string]: LayerConfig }
+  center?: [number, number] | string
+  zoom?: number
+  projection?: string
+  bearing?: number
+  pitch?: number
+  geometryLimit?: number
+  minimalProperties?: boolean
+  legend?: Array<{
+    label?: string
+    color?: string
+    size?: number
+    shape?: string
+    subtitle?: string
+  }>
+}
+
+export type RGBA = [number, number, number, number]
+export type RGB = [number, number, number]
+
+// quantitative color style: numeric column mapped to a palette
+export type QuantitativeColorStyle = {
+  column: string
+  type?: 'quantitative'
+  palette?: string
+  numColors?: number
+  // explicit range for color mapping (min, max)
+  range?: [number, number]
+  // optional data range override when computing encoders
+  dataRange?: [number, number]
+}
+
+// categorical color style: mapping of category -> hex color
+export type CategoricalColorStyle = {
+  column: string
+  type?: 'categorical'
+  colors: Record<string, string>
+}
+
+// ColorStyle may be a simple hex string or one of the structured styles above
+export type ColorStyle = string | QuantitativeColorStyle | CategoricalColorStyle
+
+// Numeric style may be a static number, an explicit array per-feature, or a column-driven mapping
+export type NumericColumnStyle = {
+  column: string
+  dataRange?: [number, number]
+  widthRange?: [number, number]
+  // category -> width mapping
+  widths?: Record<string, number>
+}
+
+export type NumericStyle = number | number[] | NumericColumnStyle
+
+export type LayerStyle = {
+  fillColor?: ColorStyle
+  lineColor?: ColorStyle
+  // lineWidth can be static, per-feature array, or column/category-driven
+  lineWidth?: NumericStyle
+  // point radius and fill height share the same flexible numeric shape
+  pointRadius?: NumericStyle
+  fillHeight?: NumericStyle
+  filter?: {
+    column: string
+    include?: any[]
+    exclude?: any[]
+  }
+}
+
+export type LayerConfigLite = {
+  table?: string
+  geometry?: string
+  style?: LayerStyle
+}
+
+export type BuildArgs = {
+  features: Array<{ properties: any; geometry: any }>
+  layers: Record<string, LayerConfigLite>
+  defaults?: {
+    fillColor?: string
+    lineColor?: string
+    lineWidth?: number
+    pointRadius?: number
+    fillHeight?: number
+  }
+}
+
+export type BuildResult = {
+  fillColors: Uint8ClampedArray
+  lineColors: Uint8ClampedArray
+  lineWidths: Float32Array
+  pointRadii: Float32Array
+  fillHeights: Float32Array
+  featureFilter: Float32Array
+}
+
+export interface GeoFeature {
+  type: 'Feature'
+  geometry: any
+  properties: Record<string, any>
+}
+
+export interface SqliteDb {
+  exec: (sql: string) => { get: { objs: any[] } } | any
+  close?: () => void
+  [k: string]: any
+}
+
+export interface SPL {
+  db: (arrayBuffer: ArrayBuffer) => Promise<SqliteDb> | SqliteDb
+  [k: string]: any
+}
diff --git a/src/plugins/sqlite-map/utils.ts b/src/plugins/sqlite-map/utils.ts
new file mode 100644
index 000000000..aba13c3a3
--- /dev/null
+++ b/src/plugins/sqlite-map/utils.ts
@@ -0,0 +1,102 @@
+// shared utilities: path resolution, column analysis, and caching helpers
+
+import type { LayerConfig, JoinConfig } from './types'
+
+// helper type for column metadata returned by PRAGMA table_info
+export type ColumnInfo = { name: string; type?: string; nullable?: boolean }
+
+/** standard column name for geometry in spatial databases */
+const GEOMETRY_COLUMN = 'geometry'
+
+// essential spatial column names that should always be included
+export const ESSENTIAL_SPATIAL_COLUMNS = new Set([
+  'id',
+  'name',
+  'link_id',
+  'node_id',
+  'zone_id',
+  'a_node',
+  'b_node',
+])
+
+// style properties that may reference data columns
+const STYLE_PROPERTIES = [
+  'fillColor',
+  'lineColor',
+  'lineWidth',
+  'pointRadius',
+  'fillHeight',
+  'filter',
+]
+
+export function resolvePath(filePath: string, subfolder?: string | null): string {
+  if (!filePath) throw new Error('File path is required')
+
+  if (filePath.startsWith('/')) {
+    return filePath
+  }
+
+  if (subfolder) {
+    return `${subfolder}/${filePath}`
+  }
+
+  return filePath
+}
+
+export function resolvePaths(
+  paths: Record<string, string>,
+  subfolder?: string | null
+): Record<string, string> {
+  const resolved: Record<string, string> = {}
+  for (const [name, path] of Object.entries(paths)) {
+    resolved[name] = resolvePath(path, subfolder)
+  }
+  return resolved
+}
+
+export function getUsedColumns(layerConfig: Partial<LayerConfig> | any): Set<string> {
+  const used = new Set<string>()
+  if (!layerConfig?.style) return used
+
+  const style = layerConfig.style
+
+  for (const prop of STYLE_PROPERTIES) {
+    const cfg = style[prop]
+    if (cfg && typeof cfg === 'object' && 'column' in cfg) {
+      used.add(cfg.column)
+    }
+  }
+
+  return used
+}
+
+export function getNeededJoinColumn(layerConfig: Partial<LayerConfig> | any): string | undefined {
+  const style = (layerConfig as any).style
+  if (!style) return undefined
+
+  for (const prop of STYLE_PROPERTIES) {
+    const cfg = style[prop]
+    if (cfg && typeof cfg === 'object' && 'column' in cfg) {
+      return cfg.column
+    }
+  }
+
+  return undefined
+}
+
+export function isGeometryColumn(columnName: string): boolean {
+  return columnName.toLowerCase() === GEOMETRY_COLUMN
+}
+
+export function hasGeometryColumn(columns: Array<ColumnInfo>): boolean {
+  return columns.some(c => isGeometryColumn(c.name))
+}
+
+export function createJoinCacheKey(
+  database: string,
+  table: string,
+  column?: string,
+  filter?: string
+): string {
+  return [database, table, column || '*', filter || ''].join('::')
+}
diff --git a/src/types/cartocolor.d.ts b/src/types/cartocolor.d.ts
new file mode 100644
index 000000000..15cf7108b
--- /dev/null
+++ b/src/types/cartocolor.d.ts
@@ -0,0 +1,47 @@
+declare module 'cartocolor' {
+  interface CartoColorPalette {
+    tags?: string[]
+    [key: number]: string[]
+  }
+
+  const Burg: CartoColorPalette
+  const BurgYl: CartoColorPalette
+  const RedOr: CartoColorPalette
+  const OrYel: CartoColorPalette
+  const Peach: CartoColorPalette
+  const PinkYl: CartoColorPalette
+  const Mint: CartoColorPalette
+  const BluGrn: CartoColorPalette
+  const DarkMint: CartoColorPalette
+  const Emrld: CartoColorPalette
+  const BluYl: CartoColorPalette
+  const Teal: CartoColorPalette
+  const TealGrn: CartoColorPalette
+  const Purp: CartoColorPalette
+  const PurpOr: CartoColorPalette
+  const Sunset: CartoColorPalette
+  const Magenta: CartoColorPalette
+  const SunsetDark: CartoColorPalette
+  const BrwnYl: CartoColorPalette
+  
+  // Diverging
+  const ArmyRose: CartoColorPalette
+  const Fall: CartoColorPalette
+  const Geyser: CartoColorPalette
+  const Temps: CartoColorPalette
+  const TealRose: CartoColorPalette
+  const Tropic: CartoColorPalette
+  const Earth: CartoColorPalette
+  
+  // Qualitative
+  const Antique: CartoColorPalette
+  const Bold: CartoColorPalette
+  const Pastel: CartoColorPalette
+  const Prism: CartoColorPalette
+  const Safe: CartoColorPalette
+  const Vivid: CartoColorPalette
+  
+  const YlGn: CartoColorPalette
+  const Blues: CartoColorPalette
+  const Reds: CartoColorPalette
+}
diff --git a/src/types/spl.d.ts b/src/types/spl.d.ts
new file mode 100644
index 000000000..b5914a1f7
--- /dev/null
+++ b/src/types/spl.d.ts
@@ -0,0 +1 @@
+declare module 'spl.js';
diff --git a/tsconfig.json b/tsconfig.json
index 8223bb6c0..0527ad564 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,7 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "types": ["vite/client", "@types/jest", "vitest/globals"]
+    "types": ["vite/client", "@types/jest"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "test/**/*.ts", "test/**/*.tsx"],
   "exclude": ["node_modules"]