Skip to main content

Polygon Lots

Polygon Lots

Real estate lot visualization with 2000 polygons, hover states, and 3D extrusions

Tags: polygon lots real-estate performance 3d hover filter

View Demo

The Polygon Lots demo showcases high-performance rendering of 2000 polygon lots with GPU-accelerated hover states, data-driven styling, filtering, and optional 3D extrusions. This pattern is ideal for real estate applications displaying property lots, parcels, or any polygon-based datasets. Features include status-based coloring, price-based filtering, and price-proportional 3D heights.

Import​

<script>
  import {
    Map,
    Source,
    FillLayer,
    LineLayer,
    FillExtrusionLayer,
  } from '@classic-homes/maps-svelte';
</script>
// React
import { Map, Source, FillLayer, LineLayer, FillExtrusionLayer } from '@classic-homes/maps-react';

Basic Usage​

<script>
  import {
    Map,
    Source,
    FillLayer,
    LineLayer,
    FillExtrusionLayer,
  } from '@classic-homes/maps-svelte';
  import {
    createStatusColorExpression,
    createExtrusionHeightExpression,
  } from '@classic-homes/maps-core';

  const statusColorExpr = createStatusColorExpression({
    available: '#22c55e',
    pending: '#f59e0b',
    sold: '#ef4444',
  });

  const heightExpr = createExtrusionHeightExpression('price', {
    scale: 0.00005,
    minHeight: 3,
    maxHeight: 50,
  });
</script>

<Map title="Lots Map" center={[-97.74, 30.27]} zoom={14} pitch={45}>
  <Source id="lots" type="geojson" data={lotsData} generateId />
  <FillLayer
    id="lots-fill"
    source="lots"
    fillColor={statusColorExpr}
    fillOpacity={0.7}
    onClick={handleClick}
    onHover={handleHover}
    hoverThrottleMs={50}
  />
  <LineLayer id="lots-outline" source="lots" lineColor="#374151" lineWidth={1} />
  <FillExtrusionLayer
    id="lots-3d"
    source="lots"
    minZoom={14}
    fillExtrusionHeight={heightExpr}
    fillExtrusionColor={statusColorExpr}
    fillExtrusionOpacity={0.85}
  />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
generateId boolean required Auto-generate feature IDs for hover states
promoteId string - Use existing property as feature ID
hoverThrottleMs number 0 Throttle hover callbacks (visual updates remain immediate)
filter Expression - MapLibre filter expression for GPU-side filtering
fillColor Expression - Data-driven fill color expression
fillExtrusionHeight Expression - Data-driven extrusion height

Inherited Base Map Props​

Prop Type Default Description
title string required Map title for accessibility (aria-label)
description string - Optional description for screen readers
height number | string 400 Map height in pixels or CSS value
width number | string - Map width in pixels or CSS value
loading boolean false Show loading skeleton
error string | null - Error message to display
emptyMessage string - Message shown when data is empty
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
class string - Custom CSS class for styling

Accessibility​

  • The title prop is used as aria-label for screen readers
  • Keyboard navigation support for interactive elements
  • Animations respect prefers-reduced-motion media query
  • High contrast colors in both light and dark modes
On this page