# Map

## Overview

The map displays the coordinates based on their longitude and latitude. The component supports icon markers, custom coordinates, and zoom leveling.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FoCt6GGezdZGT3ab0a6Iv%2FCleanShot%202025-08-05%20at%2013.32.17%402x-min.png?alt=media&#x26;token=301c48bc-6aad-4911-98b5-f7db776b1bfe" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="145.84765625">Name</th><th width="207.6015625">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>selectedPoint</code></td><td><p><code>{ data?: MapPoint;</code></p><p> <code>isSelected: boolean }</code></p></td><td>Selected point on the map, including point data and selection flag</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="117.4765625">Name</th><th width="153.3203125">Parameters</th><th width="101.06640625">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setPoints</code></td><td><code>data: object[]</code></td><td><code>void</code></td><td>Set component data. Data is an array of points. Each point is an object with the following structure:<br><code>{</code><br><code>latitude: number;</code><br><code>longitude: number;</code><br><code>icon?: string;</code><br><code>text?: string;</code><br><code>}</code></td></tr><tr><td><code>fitBounds</code></td><td>–</td><td><code>void</code></td><td>Fit map bounds to the points</td></tr><tr><td><code>setCenter</code></td><td><p><code>lat: number,</code> </p><p><code>lng: number</code></p></td><td><code>void</code></td><td>Set map center</td></tr><tr><td><code>setZoom</code></td><td><code>zoom: number</code></td><td><code>void</code></td><td>Set map zoom value</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="168.29296875">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr><tr><td><strong>On Point Select</strong></td><td>Triggered when a map point is selected</td></tr></tbody></table>