Vue Yandex Maps

https://yandex-maps-unofficial.github.io/vue-yandex-maps/
Admin
Vue Yandex Maps is a lightweight, configurable, and convenient wrapper library for integrating...
Tokens:6,067
Snippets:8
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Defining Polygon Hints

Source: https://yandex-maps-unofficial.github.io/vue-yandex-maps/examples/objects/hints.html

Examples of defining polygon geometries with associated HTML-formatted hint strings.

```typescript
                    [-0.17447336349683396, 51.503312090531445],
                    [-0.17340515787239238, 51.504759211027306],
                    [-0.17309251232377537, 51.50523073469345],
                    [-0.17224535003435154, 51.5065080661585],
                    [-0.17483463977610986, 51.508992099032525],
                ],
            ],
        } as PolygonGeometry,
        properties: {
            hint: '<b>Hyde Park</b> - is a London masterpiece, enchants with its vast <br> greenery, serene water features, and cultural sites, providing <br> a dynamic haven for strolls, picnics, and cultural events.',
        },
    },
    {
        geometry: {
            type: 'Polygon',
            coordinates: [
                [
                    [-0.175150828458657, 51.511648797383074],
                    [-0.1813152239672102, 51.510677581527084],
                    [-0.19112673379363956, 51.509911460340504],
                    [-0.18927478935253084, 51.50610013371933],
                    [-0.19031529940583924, 51.505869723211454],
                    [-0.18944001315362843, 51.50406887801099],
                    [-0.18842187966060628, 51.50419805281397],
                    [-0.18745186333889072, 51.50245366026584],
                    [-0.18296678338863465, 51.50168539524292],
                    [-0.1817864198335375, 51.50156319609843],
                    [-0.17764050647722895, 51.50168491790318],
                    [-0.17709787489028853, 51.50167444370358],
                    [-0.17473288661871156, 51.501867043116995],
                    [-0.17473087622462335, 51.50324588754518],
                    [-0.1735755770392999, 51.50493346687707],
                    [-0.17302048974985643, 51.50591659658257],
                    [-0.1724920584290436, 51.50658547353086],
                    [-0.1748753842257685, 51.50898980991704],
                ],
            ],
        } as PolygonGeometry,
        properties: {
            hint: '<b>Kensington Gardens</b> - is a charming royal park in London, <br> boasting elegant landscapes, the serene Serpentine Lake, <br> and the iconic Peter Pan statue.',
        },
    },
    {
        geometry: {
            type: 'Polygon',
            coordinates: [
                [
                    [-0.14945522399169806, 51.50315923557074],
                    [-0.1494675481880307, 51.50265928572335],
                    [-0.14188007968960067, 51.50233098032153],
                    [-0.14154732638861883, 51.50247712113629],
                    [-0.1416212715666148, 51.50253096237032],
                    [-0.14121457308763696, 51.502692485688804],
                    [-0.14115295210597364, 51.502630953063914],
                    [-0.14079555041232647, 51.502692485688804],
                    [-0.14040117612968128, 51.502692485688804],
                    [-0.14004377443603414, 51.50263864464658],
                    [-0.13969869693871959, 51.50249250435252],
                    [-0.1388729757844313, 51.50282324223941],
                    [-0.14004377443603414, 51.50392312064804],
                    [-0.14240814261762005, 51.50679004604427],
                    [-0.14704204043870076, 51.504444267658855],
                    [-0.14785543739665638, 51.50388280105736],
                ],
            ],
        } satisfies PolygonGeometry,
        properties: {
            hint: `<b>Green Park</b> - is a peaceful and scenic public space known <br> for its lush lawns, mature trees, and proximity <br> to Buckingham Palace and St. James's Park.`,
        },
    },
    {
        geometry: {
            type: 'Polygon',
            coordinates: [
                [
                    [-0.1496879265445339, 51.50235650823383],
                    [-0.15108798774812707, 51.50193749615679],
                    [-0.15115348768747644, 51.50182507762356],
                    [-0.15097336285426563, 51.50159001978967],
                    [-0.1482811010649776, 51.49987391695768],
                    [-0.14744237881914363, 51.49887556571919],
                    [-0.14729500395560746, 51.49890878247571],
                    [-0.14675053570976568, 51.49867626466909],
                    [-0.14658678586139223, 51.4987529190228],
                    [-0.14636162981987869, 51.49857150350944],
                    [-0.14505126343152258, 51.49921740581846],
                    [-0.1448527288897303, 51.49935150604363],
                    [-0.14464331574290828, 51.499371875663385],
                    [-0.14399875839489773, 51.499230985606154],
                    [-0.14377078672623336, 51.49932781593314],
                    [-0.1436891971885105, 51.49943984878708],
                    [-0.14363752381461936, 51.499606200089836],
                    [-0.1433438014788171, 51.499662216207454],
                    [-0.1431153507731931, 51.49982517179255],
                    [-0.14307183635307422, 51.49981668453695],
```

--------------------------------

### Implementing Default and Popup Markers

Source: https://yandex-maps-unofficial.github.io/vue-yandex-maps/examples/objects/default-marker.html

Uses YandexMapDefaultMarker for standard points and YandexMapPopupMarker for custom popup labels within a YandexMap component.

```html
<yandex-map
    :height="height"
    :settings="{
        location: LOCATION,
        theme,
        showScaleInCopyrights: true,
    }"
    :width="width"
>
    <yandex-map-default-scheme-layer/>
    <yandex-map-default-features-layer/>
    <yandex-map-default-marker
        v-for="(marker, index) in markersGeoJsonSource.slice(2,8)"
        :key="marker.title"
        :settings="{ ...marker, onClick: () => popupIndex = index, color: { day: marker.color, night: marker.color }, popup: { show: popupIndex === index } }"
    >
        <template #popup>
            Popup!
        </template>
    </yandex-map-default-marker>
    <yandex-map-popup-marker
        v-for="marker in markersGeoJsonSource.slice(0,2)"
        :key="marker.title"
        :settings="{ coordinates: marker.coordinates, position: 'bottom', offset: 20 }"
    >
        {{ marker.title }}
    </yandex-map-popup-marker>
</yandex-map>
```

```ts
import {
    YandexMap,
    YandexMapDefaultFeaturesLayer,
    YandexMapDefaultMarker,
    YandexMapDefaultSchemeLayer,
    YandexMapPopupMarker,
} from 'vue-yandex-maps';
import type { LngLat } from '@yandex/ymaps3-types';
import type { YMapLocationRequest } from '@yandex/ymaps3-types/imperative/YMap';
import { ref } from 'vue';

const LOCATION: YMapLocationRequest = {
    center: [18.54, 39.26], // starting position [lng, lat]
    zoom: 2, // starting zoom
};

const popupIndex = ref(-1);

// Array containing GeoJSON data for markers
const markersGeoJsonSource = [
    {
        coordinates: [-100.3, 50.5] as LngLat,
        title: 'North America',
        subtitle: 'Greenland is the Largest Island <br> in North America and the World',
        color: '#00CC00',
    },
    {
        coordinates: [-60.3, -10.5] as LngLat,
        title: 'South America',
        subtitle: `The Andes are the world's <br> longest continental <br> mountain range`,
        color: '#008001',
    },
    {
        coordinates: [25.5, 12.5] as LngLat,
        title: 'Africa',
        subtitle: `It is home to the world's <br> longest river, The Nile`,
        color: '#FF2400',
    },
    {
        coordinates: [88.5, 50.6] as LngLat,
        color: '#FDD52E',
        title: 'Asia',
        subtitle: 'Asia has the highest <br> mountain in the world is Everest',
    },
    {
        coordinates: [22.2, 52.9] as LngLat,
        color: '#01BBEA',
        title: 'Europe',
        subtitle: `Europe has the world's smallest <br> country, the Vatican City`,
    },
    {
        coordinates: [135.5, -25.5] as LngLat,
        color: '#627BC1',
        title: 'Australia',
        subtitle: `80% of the animals <br> are unique to Australia`,
    },
    {
        coordinates: [25.5, -79.5] as LngLat,
        color: '#999999',
        title: 'Antarctica',
        subtitle: `Ice covers roughly 98% <br> of Antarctica, which equates <br> to 90% of the Earth's ice <br> and 70% of our fresh water`,
    },
];
```

--------------------------------

### Placemark Implementation

Source: https://yandex-maps-unofficial.github.io/vue-yandex-maps/examples/objects/placemark.html

Basic usage of the YandexMapPlacemark component within a Vue template.

```vue
<yandex-map :coords="[55.75, 37.62]">
  <yandex-map-placemark :coords="[55.75, 37.62]" />
</yandex-map>
```

--------------------------------

### Интерактивная линия на карте

Source: https://yandex-maps-unofficial.github.io/vue-yandex-maps/examples/objects/line.html

Компонент Vue для отображения карты с линией, слушателем кликов и кнопкой сброса точек.

```html
<yandex-map
    v-model="map"
    class="map"
    :height="height"
    :settings="{
        location: {
            center: [87.0764, 28.3],
            zoom: 10,
        },
        theme,
        showScaleInCopyrights: true,
    }"
    :width="width"
>
    <yandex-map-default-scheme-layer/>
    <yandex-map-default-features-layer/>

    <yandex-map-feature
        :settings="{
            geometry: {
                type: 'LineString',
                coordinates: lineCoordinates,
            },
            style: {
                stroke: [{ color: '#007afce6', width: 4 }],
            },
        }"
    />

    <yandex-map-listener :settings="{ onClick: (_, e) => lineCoordinates = [...lineCoordinates, e.coordinates]}"/>

    <yandex-map-default-marker
        v-if="lineCoordinates.length === 1"
        :settings="{ title: 'Всего одна точка', subtitle: 'Кликайте ещё!', coordinates: lineCoordinates[0] }"
    />

    <yandex-map-controls :settings="{ position: 'right top', orientation: 'vertical' }">
        <yandex-map-control>
            <div class="info">
                Вы можете добавлять новые точки<br> на карту путём клика на неё
            </div>
        </yandex-map-control>
        <yandex-map-control-button
            v-if="lineCoordinates.length"
            :settings="{ background: '#fd6466e6', color: '#fff', onClick: () => lineCoordinates = []}"
        >
            Стереть точки ({{ lineCoordinates.length }})
        </yandex-map-control-button>
    </yandex-map-controls>
</yandex-map>
```

```typescript
import {
    YandexMap,
    YandexMapControl,
    YandexMapControlButton,
    YandexMapControls,
    YandexMapDefaultFeaturesLayer,
    YandexMapDefaultMarker,
    YandexMapDefaultSchemeLayer,
    YandexMapFeature,
    YandexMapListener,
} from 'vue-yandex-maps';
import { ref, shallowRef } from 'vue';
import type { LngLat, YMap } from '@yandex/ymaps3-types';

const map = shallowRef<YMap | null>(null);

// The array of coordinates following the course of the Arun River.
const lineCoordinates = ref<LngLat[]>([
    [86.86385144616358, 28.116408418627383],
    [86.81839686158105, 28.207288455680004],
    [86.81808226511791, 28.22806172843069],
    [86.82031538666244, 28.233797292491484],
    [86.81472565766904, 28.256087324925446],
    [86.80790342291837, 28.269123341443187],
    [86.80645477029938, 28.27525587569196],
    [86.80802334159438, 28.284579144705692],
    [86.82236456486294, 28.30302488453657],
    [86.8404130550352, 28.31244898081271],
    [86.85774203315137, 28.316018431353587],
    [86.92003905590767, 28.307458931889137],
    [86.94147211211823, 28.327385436365866],
    [86.96047236560229, 28.379870569048947],
    [86.97633868599863, 28.40045387913822],
    [87.0230092257106, 28.417227886422154],
    [87.04041289769795, 28.412869410130657],
    [87.0563226922615, 28.40335937826793],
    [87.06789936697723, 28.401067131394555],
    [87.09546140544649, 28.404831704446202],
    [87.10278140482315, 28.406548833235735],
    [87.11846040699565, 28.404679235671836],
    [87.14572366998014, 28.393186941012182],
    [87.14746557763569, 28.38842302269884],
    [87.16574223424259, 28.377389828495165],
    [87.1776900441308, 28.35942815283268],
    [87.18471126802267, 28.354736898303855],
    [87.1938239203079, 28.353547532886758],
    [87.20726881712218, 28.349384647915294],
    [87.22295453007217, 28.349252490136283],
    [87.23375742296602, 28.344200427946454],
    [87.28088925568717, 28.333825025190656],
    [87.29585938546269, 28.32476224099636],
    [87.30990183324649, 28.32800081295931],
    [87.3192385671453, 28.328199089636495],
    [87.35075938078766, 28.31874748571409],
    [87.36449721762801, 28.310366119340454],
    [87.38660660350038, 28.290797705213187],
    [87.38757762382585, 28.286235626685304],
    [87.38571027704609, 28.279425199952268],
    [87.372340074103, 28.27763986965878],
    [87.35753996538894, 28.254855225339856],
]);
```

```css
<style scoped>
.map:deep([class$="main-engine-container"] canvas) {
  cursor: pointer;
}

.info {
  padding: 15px;
  width: 300px;
  font-size: 14px;
}
</style>
```

--------------------------------

### Настройка данных полигона

Source: https://yandex-maps-unofficial.github.io/vue-yandex-maps/examples/objects/polygon.html

Определение геометрии и стилей полигона, а также начальной позиции карты.

```ts
import {
    YandexMap,
    YandexMapControls,
    YandexMapDefaultFeaturesLayer,
    YandexMapDefaultSchemeLayer,
    YandexMapFeature,
    YandexMapZoomControl,
} from 'vue-yandex-maps';
import { shallowRef } from 'vue';
import type { LngLat, YMap, YMapFeatureProps } from '@yandex/ymaps3-types';
import type { YMapLocationRequest } from '@yandex/ymaps3-types/imperative/YMap';

const map = shallowRef<YMap | null>(null);
const LOCATION: YMapLocationRequest = {
    center: [56.5426, -20.6731], // starting position [lng, lat]
    zoom: 8, // starting zoom
};

const defaultSettings = {
    geometry: {
        type: 'Polygon',
    },
    style: {
        stroke: [{
            color: '#006efc',
            width: 4,
        }],
        fill: 'rgba(56, 56, 219, 0.5)',
    },
} satisfies Omit<YMapFeatureProps, 'geometry'> & { geometry: Partial<YMapFeatureProps['geometry']> };

const POLYGON_COORDINATES: LngLat[] = [
    [55.23552357664134, -21.017790222253545],
    [55.247375661860424, -21.019813576876416],
    [55.27538968146916, -21.00413185217551],
    [55.282393186371344, -20.974787373851168],
    [55.276467143761806, -20.95657062698021],
    [55.28077699293238, -20.948979653267394],
    [55.28077699293238, -20.937845520537877],
    [55.284009379810314, -20.92519208028493],
    [55.288319228980896, -20.92316742950606],
    [55.30232623878526, -20.92873515255186],
    [55.34542473049101, -20.922661262487228],
    [55.35135077310055, -20.91152515055328],
    [55.394987995952626, -20.88114968434353],
    [55.421924553268724, -20.873554846186842],
    [55.44078014339, -20.876592828065444],
    [55.44832237943851, -20.871023147148318],
    [55.46663923841345, -20.884187510824972],
    [55.50273422521702, -20.882668605355263],
    [55.54744891036174, -20.895325675954506],
    [55.555529877556566, -20.891275530823545],
    [55.581388972580015, -20.897856960511024],
    [55.592702326652784, -20.89583193632143],
    [55.62017761511519, -20.910006524996188],
    [55.640110667529115, -20.91304376055101],
    [55.665969762552564, -20.925698238655364],
    [55.69775490018556, -20.965173259456712],
    [55.70260348050246, -21.015260989917046],
    [55.70691332967303, -21.026895099299512],
    [55.71930414603843, -21.03195312122404],
    [55.733311155842806, -21.04965482995931],
    [55.732233693550164, -21.06280329254686],
    [55.757231765238004, -21.089111898442784],
    [55.761654047030255, -21.0983344829384],
    [55.771972704545526, -21.10525104107762],
    [55.78425682063514, -21.12369360205876],
    [55.795066842794, -21.124615669223502],
    [55.82504008605263, -21.14305579424648],
    [55.83502351916447, -21.160265147718587],
    [55.83711567788211, -21.18297265534579],
    [55.822688305475175, -21.207121792308097],
    [55.81374175845885, -21.21897701356349],
    [55.80881024148156, -21.23495031555173],
    [55.80572485831597, -21.289008242036463],
    [55.8094847016364, -21.330400842430706],
    [55.80718858005149, -21.33679546486688],
    [55.79712410976588, -21.350016583669003],
    [55.782464990002055, -21.360674591904225],
    [55.7748072408717, -21.36426124521594],
    [55.75508255424453, -21.363262915594078],
    [55.75224850767004, -21.36617326809467],
    [55.74422154660723, -21.368321626422638],
    [55.726950668327135, -21.369418411313482],
    [55.717729775686074, -21.373942561140765],
    [55.70016617065548, -21.37627312858491],
    [55.690067097762885, -21.374902211104665],
    [55.677626210866215, -21.375587671468296],
    [55.67777257424146, -21.378466569537192],
    [55.671625312480764, -21.38353877437351],
    [55.66358168977258, -21.38165666571665],
    [55.64691061293218, -21.389116670056815],
    [55.633018048898506, -21.382177143621448],
    [55.60986377550906, -21.38668787368018],
    [55.59041418586193, -21.376451783677624],
    [55.57301374940977, -21.375441282921404],
    [55.56329763743871, -21.37153882676907],
    [55.55107218108909, -21.373967877489772],
    [55.54199570592043, -21.366507092023564],
    [55.49673660629282, -21.351082909981884],
    [55.48455852981631, -21.35228803527813],
    [55.47483836139122, -21.346410259554244],
    [55.460097499583725, -21.341460239816882],
    [55.45620322461116, -21.33808201029897],
    [55.454007765120515, -21.33113422275632],
];
```

--------------------------------

### Отображение полигона в шаблоне Vue

Source: https://yandex-maps-unofficial.github.io/vue-yandex-maps/examples/objects/polygon.html

Использование компонента YandexMapFeature для рендеринга списка полигонов на карте.

```html
<yandex-map
    v-model="map"
    :height="height"
    :settings="{
        location: LOCATION,
        theme,
        showScaleInCopyrights: true,
    }"
    :width="width"
>
    <yandex-map-default-scheme-layer/>
    <yandex-map-default-features-layer/>
    <yandex-map-controls :settings="{ position: 'right' }">
        <yandex-map-zoom-control/>
    </yandex-map-controls>

    <yandex-map-feature
        v-for="(feature, index) in features"
        :key="index"
        :settings="feature"
    />
</yandex-map>
```

--------------------------------

### Define Map Markers

Source: https://yandex-maps-unofficial.github.io/vue-yandex-maps/examples/objects/placemark.html

An array of marker objects defining various configurations such as draggable icons, circles, and event handlers.

```typescript
const POINTS: YandexMapDefaultMarkerSettings[] = [
    {
        coordinates: [37.814052, 55.790139],
        title: 'blue color',
        icon: 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiI+PHBhdGggZmlsbD0iIzgwODI4NSIgZD0iTTEyLjc0IDUuNzlWMy40N2wtNS44IDEuMTZINS4yMnYxMy45aDEuNzR2LTYuOTVsMy40Ny0uNTh2Mi4zMmw3LjUzLS41OHYtNy42bC01LjIxLjY1eiIvPjwvc3ZnPg==)',
        color: '#51aabd',
        radius: '50px',
        draggable: true,
        element: 'circle',
        onFastClick: () => alert('Fast click'),
    },
];

const POINTS: YandexMapDefaultMarkerSettings[] = [
    { coordinates: [37.8, 55.8] },
];
```
Tokens:
Raw