vue-yandex-maps
vue-yandex-maps is a plugin for vue.js that adds yandex-map custom element.
- reduce rerender attempts
Install
npm install vue-yandex-maps --save
CommonJS
You can use any build tool which supports commonjs
:
// register globally
const YmapPlugin = require('vue-yandex-maps');
Vue.use(YmapPlugin)
// or for a single instance
const { yandexMap, ymapMarker } = require('vue-yandex-maps');
new Vue({
components: { yandexMap, ymapMarker }
})
Or in ES2015:
// register globally
import YmapPlugin from 'vue-yandex-maps'
Vue.use(YmapPlugin)
// or for a single instance
import { yandexMap, ymapMarker } from 'vue-yandex-maps'
new Vue({
components: { yandexMap, ymapMarker }
})
Direct include
You can use the CDN: https://unpkg.com/vue-yandex-maps, yandexMap
is exposed to window
and will automatically install itself. It might be useful for Code Pen
Usage
Use <yandex-map>
tag to enable the map instance and use attributes to define map options.
<yandex-map>
has a class ymap-container
and child element, where rendering map instance. Child class you may define through map attribute ymap-class
. If you doesn't define this class - child element will have style
attribute with width: 100%; height: 100%;
If you have a lot of markers on your map i strongly recommend you to use map attribute useObjectManager
. But in this case you can't set callbacks to your markers through marker attribute callbacks
.
You may define placemarks on your map by using <ymap-marker>
tag or set an array of objects with placemark options through <yandex-map>
attribute placemarks
(interface description). You also can use both methods together.
You must define markerId
for every marker on your map in any case fo setting (through map attribute placemarks
or using ymap-marker
components).
The Map instance rerender when changed array with markers or marker properties if marker is a component.
Also map watch property coords
and react without rerender, when it changed.
Type of marker in marker-type
attribute can be:
- Placemark
- Polyline
- Rectangle
- Polygon
- Circle
<yandex-map
:coords="[54.62896654088406, 39.731893822753904]"
zoom="10"
style="width: 600px; height: 600px;"
:cluster-options="{
1: {clusterDisableClickZoom: true}
}"
:behaviors="['ruler']"
:controls="['trafficControl']"
:placemarks="placemarks"
map-type="hybrid"
@map-was-initialized="initHandler"
>
<ymap-marker
marker-id="1"
marker-type="placemark"
:coords="[54.7, 39.7]"
hint-content="Hint content 1"
:balloon="{header: 'header', body: 'body', footer: 'footer'}"
:icon="{color: 'green', glyph: 'cinema'}"
cluster-name="1"
></ymap-marker>
<ymap-marker
marker-id="2"
marker-type="placemark"
:coords="[54.6, 39.8]"
hint-content="Hint content 1"
:balloon="{header: 'header', body: 'body', footer: 'footer'}"
:icon="{color: 'green', glyph: 'cinema'}"
cluster-name="1"
></ymap-marker>
<ymap-marker
marker-id="3"
marker-type="circle"
:coords="[54.62896654088406, 39.731893822753904]"
circle-radius="1600"
hint-content="Hint content 1"
:marker-fill="{color: '#000000', opacity: 0.4}"
:marker-stroke="{color: '#ff0000', width: 5}"
:balloon="{header: 'header', body: 'body', footer: 'footer'}"
></ymap-marker>
</yandex-map>
data() {
return {
placemarks: [
{
coords: [54.8, 39.8],
properties: {}, // define properties here
options: {}, // define options here
clusterName: "1",
balloonTemplate: '<div>"Your custom template"</div>'
callbacks: { click: function() {} }
}
]
}
}
Events
Map events
Event name | Payload |
---|---|
'map-was-initialized' | Link to map instance |
Attributes
Map attributes
Attribute | Type | Description |
---|---|---|
coords | Array [ latitude, longtitude ] | Coordinates of map center. Required |
zoom | Number | Zoom of map (from 0 to 19). Default: 18 . |
cluster-options | Object | Map, where key is a name of cluster and value is an object of cluster options. Also you may set field 'layout' (type String ) in cluster options object with HTML Template for balloonItemContentLayout. Cluster option
|
cluster-callbacks | Object | Object, where key is an event name and value is a callback function, e.g. { click: function() {...}, contextmenu: anotherFunction } |
behaviors | Array | Array of enabled map behaviors. All another will be disabled. Behaviors |
controls | Array | Array of enabled map controls. All another will be disabled. Controls |
detailed-controls | Object | Map, where key is a name of control and value is an object of control options. |
map-type | String | Map type. Possible types: map, satellite, hybrid . Default: map . |
scroll-zoom | Boolean | Set to false to disable zoom map on scroll page. Default: true
|
zoom-control | Object | Configs for zoomControl of the map. More |
placemarks | Array of Objects | Array of config objects with fields: coordinates ([lat, lng]), properties, options. More |
use-object-manager | Boolean | Set to true to use Object Mananger in map. Default: false
|
object-manager-clusterize | Boolean | Defines using clusterize in Object Mananger. Default: true
|
ymap-class | String | Defines class for element, where rendering map instance. If not defined - element use style: width: 100%; height: 100%;
|
init-without-markers | Boolean | Set to false to prevent map initialization if there is no markers. Default: true
|
Marker attributes
Attribute | Type | Description | Marker-types |
---|---|---|---|
marker-id | String, Number | Marker Id. Required
|
|
marker-type | String | Type of marker | |
coords | Array [ latitude, longtitude ] | Coordinates of point or circle center. Required
|
Placemark, Circle |
coords | Array of arrays [ [latitude, longtitude], [...] ] | Coordinates of shape corners. Required
|
Rectangle, Polyline |
coords | Array of two arrays of coordinates arrays (first for outer contour, second for inner) [ [[latitude, longtitude], [...]], [[...], [...]] ] | Coordinates of shape corners. Required | Polygon |
hint-content | String | Tooltip content | All |
balloon | Object | Balloon content object with three properties: header, body, footer | All |
icon | Object | About icons | Placemark |
marker-fill | Object | Fill properties object with four properties: enabled, color, opacity, imageHref | Polygon, Rectangle, Circle |
marker-stroke | Object | Stroke properties object with four properties: color, opacity, width, style | Polygon, Rectangle, Circle, Polyline |
circle-radius | Number | Radius of circle in meters. Default: 1000 . |
Circle |
cluster-name | String | Attribute for grouping markers in clusters | All |
properties | Object | Object with marker properties | All |
options | Object | Object with marker options | All |
callbacks | Object | Object, where key is an event name and value is a callback function, e.g. { click: function() {...}, contextmenu: anotherFunction }. Events list | All |
balloonTemplate | String | HTML Template for balloon | All |
Icons
You may define icon attribute as object with three properties: color (default value is 'blue'), content, glyph. Glyph property have higher priority than content. List of colors and icons. In this way you get classic placemark.
Or you may define it as a placemark with custom icon. In this case you need to set the object of the following form:
{
layout: 'default#image',
imageHref: markerIcon,
imageSize: [43, 55],
imageOffset: [-22, -55]
}
where markerIcon
: data or computed path to image or data:image/svg+xml;base64, imageSize
: size of icon in px, imageOffset
: icon offset in px
Balloon Template
You can define your own template for balloon.
<yandex-map
:coords="[54.62896654088406, 39.731893822753904]"
>
<ymap-marker
marker-type="placemark"
:coords="[54.7, 39.7]"
:balloonTemplate = "balloonTemplate"
></ymap-marker>
</yandex-map>
computed: {
balloonTemplate() {
return `
<h1 class="red">Hi, everyone!</h1>
<p>I am here: ${this.coords}</p>
<img src="http://via.placeholder.com/350x150">
`
}
}
.red {
color: red;
}
License
MIT