Spatial Picker

<terra-spatial-picker> | TerraSpatialPicker

Since 1.0

stable

A component that allows input of coordinates and rendering of map.

Examples

Default Spatial Picker

<div style="height: 300px;">
    <terra-spatial-picker initial-value="-100, -50, 30, 50" ></terra-spatial-picker>
</div>

Configured Spatial Picker

<div style="height: 300px;">
<terra-spatial-picker has-navigation has-shape-selector has-coord-tracker></terra-spatial-picker>
</div>

[component-metadata:terra-spatial-picker]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/spatial-picker/spatial-picker.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/spatial-picker/spatial-picker.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/spatial-picker/spatial-picker.js';

To import this component as a React component:

import TerraSpatialPicker from '@nasa-terra/components/dist/react/spatial-picker';

Properties

Name	Description	Type	Default
`minZoom` `min-zoom`	Minimum zoom level of the map.	`number`	`0`
`maxZoom` `max-zoom`	Maximum zoom level of the map.	`number`	`23`
`zoom`	Initial map zoom level	`number`	`1`
`hasNavigation` `has-navigation`	has map navigation toolbar	`boolean`	`true`
`hasCoordTracker` `has-coord-tracker`	has coordinate tracker	`boolean`	`true`
`hasShapeSelector` `has-shape-selector`	has shape selector	`boolean`	`false`
`initialValue` `initial-value`	initialValue of spatial picker	`string`	`''`
`hideLabel` `hide-label`	Hide the combobox’s label text. When hidden, still presents to screen readers.	`boolean`	`false`
`label`	spatial picker label	`string`	`'Select Region'`
`spatialConstraints` `spatial-constraints`	Spatial constraints for the map (default: ‘-180, -90, 180, 90’)	`string`	`'-180, -90, 180, 90'`
`inline`	Whether the map should be shown inline, or as part of the normal content flow the default is false, the map is positioned absolute under the input	`boolean`	`false`
`showMapOnFocus` `show-map-on-focus`	Whether the map should show automatically when the input is focused	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.