Display conflated POIs as a third map option.

Author: njhenry

site/README.md

@@ -3,3 +3,12 @@
 This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+
+## Maintenance
+
+### Conflated category labels
+
+The conflated data source filter uses a static list of `shared_label` values
+defined in `src/constants.js` (`CONFLATED_LABELS`). This list is sourced from
+`src/openpois/conflation/data/match_radii.csv`. If the taxonomy crosswalk adds
+or removes labels, update both files to keep them in sync.

site/src/App.vue

@@ -11,14 +11,18 @@
     :active-source="activeSource"
     :osm-filters="osmFilters"
     :overture-filters="overtureFilters"
+    :conflated-filters="conflatedFilters"
     @zoom-changed="currentZoom = $event"
   />
   <AmenityFilter
     :active-source="activeSource"
     :osm-filters="osmFilters"
     :overture-filters="overtureFilters"
+    :conflated-filters="conflatedFilters"
+    :conflated-labels="CONFLATED_LABELS"
     @update:osm-filters="osmFilters = $event"
     @update:overture-filters="overtureFilters = $event"
+    @update:conflated-filters="conflatedFilters = $event"
   />
 </template>
 
@@ -28,7 +32,11 @@ import SourceToggle from './components/SourceToggle.vue'
 import SearchBar from './components/SearchBar.vue'
 import MapContainer from './components/MapContainer.vue'
 import AmenityFilter from './components/AmenityFilter.vue'
-import { OSM_FILTER_KEYS, OVERTURE_CATEGORIES } from './constants.js'
+import {
+  OSM_FILTER_KEYS,
+  OVERTURE_CATEGORIES,
+  CONFLATED_LABELS,
+} from './constants.js'
 
 const activeSource = ref('osm')
 const currentZoom = ref(4)
@@ -40,6 +48,12 @@ const osmFilters = ref(
 const overtureFilters = ref(
   OVERTURE_CATEGORIES.reduce((acc, c) => ({ ...acc, [c.key]: true }), {})
 )
+const conflatedFilters = ref(
+  CONFLATED_LABELS.reduce((acc, lbl) => ({
+    ...acc,
+    [lbl]: !lbl.startsWith('Other '),
+  }), {})
+)
 
 function setSource(src) {
   activeSource.value = src

site/src/assets/styles.css

@@ -254,6 +254,30 @@ body,
   cursor: pointer;
 }
 
+.filter-actions {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.filter-action-btn {
+  padding: 2px 8px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background: #f5f5f5;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.filter-action-btn:hover {
+  background: #e5e5e5;
+}
+
+.conflated-filter-list {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
 /* POI popup */
 .poi-popup {
   background: #fff;

site/src/components/AmenityFilter.vue

@@ -20,6 +20,22 @@
           Overture Maps tiles use granular subcategories. Filtering will be available after the taxonomy stabilizes in June 2026.
         </p>
       </template>
+      <template v-else-if="activeSource === 'conflated'">
+        <div class="filter-actions">
+          <button class="filter-action-btn" @click="selectAllConflated">All</button>
+          <button class="filter-action-btn" @click="selectNoneConflated">None</button>
+        </div>
+        <div class="conflated-filter-list">
+          <label v-for="lbl in conflatedLabels" :key="lbl">
+            <input
+              type="checkbox"
+              :checked="conflatedFilters[lbl]"
+              @change="toggleConflated(lbl)"
+            />
+            {{ lbl }}
+          </label>
+        </div>
+      </template>
 
     </div>
   </div>
@@ -33,9 +49,15 @@ const props = defineProps({
   activeSource: { type: String, required: true },
   osmFilters: { type: Object, required: true },
   overtureFilters: { type: Object, required: true },
+  conflatedFilters: { type: Object, required: true },
+  conflatedLabels: { type: Array, required: true },
 })
 
-const emit = defineEmits(['update:osm-filters', 'update:overture-filters'])
+const emit = defineEmits([
+  'update:osm-filters',
+  'update:overture-filters',
+  'update:conflated-filters',
+])
 const collapsed = ref(false)
 const osmFilterKeys = OSM_FILTER_KEYS
 const overtureCategories = OVERTURE_CATEGORIES
@@ -51,5 +73,23 @@ function toggleOverture(key) {
   })
 }
 
+function toggleConflated(label) {
+  emit('update:conflated-filters', {
+    ...props.conflatedFilters,
+    [label]: !props.conflatedFilters[label],
+  })
+}
+
+function selectAllConflated() {
+  const all = {}
+  for (const lbl of props.conflatedLabels) all[lbl] = true
+  emit('update:conflated-filters', all)
+}
+
+function selectNoneConflated() {
+  const none = {}
+  for (const lbl of props.conflatedLabels) none[lbl] = false
+  emit('update:conflated-filters', none)
+}
 
 </script>

site/src/components/MapContainer.vue

@@ -16,7 +16,7 @@
     </button>
 
     <ConfidenceLegend
-      v-if="props.activeSource === 'osm' || props.activeSource === 'overture'"
+      v-if="props.activeSource === 'osm' || props.activeSource === 'overture' || props.activeSource === 'conflated'"
     />
 
     <div class="basemap-switcher">
@@ -55,6 +55,7 @@ import { useDuckDB } from '../composables/useDuckDB.js'
 import { useGeolocation } from '../composables/useGeolocation.js'
 import { createQueryDebouncer } from '../queries/queryDebouncer.js'
 import { buildOsmQuery } from '../queries/osmQuery.js'
+import { buildConflatedQuery } from '../queries/conflatedQuery.js'
 import {
   getOsmLayer,
   updateOsmFeatures,
@@ -65,6 +66,11 @@ import {
   updateOvertureFilters,
   wrapOvertureFeature,
 } from '../layers/overtureLayer.js'
+import {
+  getConflatedLayer,
+  updateConflatedFeatures,
+  updateConflatedClusterMode,
+} from '../layers/conflatedLayer.js'
 import { arrowToFeatures, extentToLonLatBbox } from '../utils.js'
 import {
   BASE_MAP_STYLES,
@@ -77,7 +83,7 @@ const props = defineProps({
   activeSource: { type: String, required: true },
   osmFilters: { type: Object, required: true },
   overtureFilters: { type: Object, required: true },
-
+  conflatedFilters: { type: Object, required: true },
 })
 
 const emit = defineEmits(['zoom-changed'])
@@ -100,7 +106,7 @@ let geoOverlay = null
 
 // Helper: get all data layers
 function getDataLayers() {
-  return [getOsmLayer(), getOvertureLayer()]
+  return [getOsmLayer(), getOvertureLayer(), getConflatedLayer()]
 }
 
 onMounted(async () => {
@@ -120,13 +126,15 @@ onMounted(async () => {
 
   const osmLyr = getOsmLayer()
   const overtureLyr = getOvertureLayer()
+  const conflatedLyr = getConflatedLayer()
   osmLyr.setVisible(true)
   overtureLyr.setVisible(false)
+  conflatedLyr.setVisible(false)
 
   const olMap = new Map({
     target: mapEl.value,
     view,
-    layers: [fallbackBase, osmLyr, overtureLyr],
+    layers: [fallbackBase, osmLyr, overtureLyr, conflatedLyr],
   })
   map.value = olMap
 
@@ -155,6 +163,7 @@ onMounted(async () => {
     const z = view.getZoom()
     currentZoom.value = z
     updateClusterMode(z)
+    updateConflatedClusterMode(z)
     loadData()
   })
 
@@ -214,15 +223,19 @@ function switchBaseMap() {
 // ---- Data loading ----
 
 async function loadData() {
-  if (props.activeSource !== 'osm') return
+  if (props.activeSource !== 'osm' && props.activeSource !== 'conflated') return
   if (currentZoom.value < MIN_ZOOM_FOR_DATA) return
   if (!duckReady.value) return
 
   try {
     await debouncer.schedule(async () => {
       loading.value = true
       try {
-        await loadOsmData()
+        if (props.activeSource === 'osm') {
+          await loadOsmData()
+        } else if (props.activeSource === 'conflated') {
+          await loadConflatedData()
+        }
       } finally {
         loading.value = false
       }
@@ -258,6 +271,27 @@ async function loadOsmData() {
   updateOsmFeatures(features)
 }
 
+async function loadConflatedData() {
+  const extent = map.value.getView().calculateExtent()
+  const bbox = extentToLonLatBbox(extent)
+
+  const enabledLabels = Object.entries(props.conflatedFilters)
+    .filter(([, v]) => v)
+    .map(([k]) => k)
+
+  if (enabledLabels.length === 0) {
+    updateConflatedFeatures([])
+    return
+  }
+
+  const sql = buildConflatedQuery(bbox, enabledLabels)
+  if (!sql) return
+
+  const result = await runQuery(sql)
+  const features = arrowToFeatures(result)
+  updateConflatedFeatures(features)
+}
+
 // ---- Interaction ----
 
 function handleClick(evt) {
@@ -271,7 +305,7 @@ function handleClick(evt) {
       return true
     }
 
-    // OSM VectorLayer (with Cluster)
+    // OSM or Conflated VectorLayer (with Cluster)
     const subFeatures = feature.get('features')
     if (subFeatures && subFeatures.length > 1) {
       const geom = feature.getGeometry()
@@ -356,6 +390,7 @@ defineExpose({ flyToBbox })
 watch(() => props.activeSource, (src) => {
   getOsmLayer().setVisible(src === 'osm')
   getOvertureLayer().setVisible(src === 'overture')
+  getConflatedLayer().setVisible(src === 'conflated')
   closePopup()
   loadData()
 })
@@ -372,5 +407,10 @@ watch(
   { deep: true }
 )
 
+watch(
+  () => props.conflatedFilters,
+  () => { if (props.activeSource === 'conflated') loadData() },
+  { deep: true }
+)
 
 </script>