Skip to main content

CoordinateDisplay

CoordinateDisplay

Show cursor coordinates and zoom level on the map

Tags: coordinates position zoom debugging

View Demo

The CoordinateDisplay component shows the current cursor position in various formats (decimal, DMS) along with optional zoom level and bearing information. Useful for development, data collection, or providing users with location context.

Import​

<script>
  import { CoordinateDisplay } from '@classic-homes/maps-svelte';
</script>
// React
import { CoordinateDisplay } from '@classic-homes/maps-react';

Basic Usage​

<script>
  import { Map, CoordinateDisplay } from '@classic-homes/maps-svelte';
</script>

<Map title="Debug Map" center={[-122.4, 37.8]} zoom={12}>
  <CoordinateDisplay position="bottom-right" format="decimal" precision={4} showZoom showBearing />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
position 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' 'bottom-right' Display position
format 'decimal' | 'dms' | 'dd' 'decimal' Coordinate format
precision number 5 Decimal places for coordinates
showZoom boolean true Show zoom level
showBearing boolean false Show bearing/rotation

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
  • Legend - Display a legend for map data layers
  • Map - Base map component
On this page