dron-vue-yandex-maps v1.0.7

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

Attributes

Map attributes

Marker attributes

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