Map
<terra-map> | TerraMap
A map component for visualizing and selecting coordinates.
Examples
Default Map
<terra-map></terra-map>
Configured Map
<terra-map has-navigation has-shape-selector has-coord-tracker></terra-map>
[component-metadata:terra-map]
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.
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/map/map.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/map/map.js';
To import this component using a bundler:
import '@nasa-terra/components/dist/components/map/map.js';
To import this component as a React component:
import TerraMap from '@nasa-terra/components/dist/react/map';
Properties
| Name | Description | Reflects | 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
|
false
|
|
hasCoordTracker
has-coord-tracker
|
has coordinate tracker |
boolean
|
false
|
|
hasShapeSelector
has-shape-selector
|
has shape selector |
boolean
|
false
|
|
shapes
|
List of geojson shapes |
ShapeFilesResponse
|
- | |
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.