Home Price Explorer

Interactive US home price bubble map at the ZIP code level with LocalView — viewport-based quintile re-bucketing that reveals local variation hidden at national scale.

Installation

$ npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-core

Usage

<script setup lang="ts">
import { VMap, VControlNavigation } from '@geoql/v-maplibre';
import { VLayerDeckglScatterplot } from '@geoql/v-maplibre/deck.gl';

const mapOptions = {
  style: 'https://maps.guru/api/v1/styles/standard/light/style.json?key=...',
  center: [-98.5, 39.8],
  zoom: 3.8,
};
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerDeckglScatterplot
      id="promap-bubbles"
      :data="renderPoints"
      :get-position="getPosition"
      :get-radius="getRadius"
      :get-fill-color="getFillColor"
      :radius-min-pixels="2"
      :radius-max-pixels="40"
      :opacity="0.85"
      :pickable="true"
    />
    <VControlNavigation position="top-right" />
  </VMap>
</template>