Yandex map editor

by Dmitry Shvalyov

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.map-editor-vertex,
.map-editor-edge {
  display: block;
  width: 10px;
  height: 10px;
  background-color: #faf;
}

JavaScript

ymaps.ready(init);

function init() {
  // Создаем карту.
  var myMap = new ymaps.Map("map", {
    center: [55.72, 37.64],
    zoom: 10
  }, {});

  // Создаем ломаную.

  var myPolyline = new ymaps.Polyline([
    // Указываем координаты вершин.
    [55.80, 37.50],
    [55.80, 37.40],
    [55.70, 37.50],
    [55.70, 37.40]
  ], {}, {
    strokeColor: "#00000088",
    strokeWidth: 4,
    editorVertexLayout: ymaps.templateLayoutFactory.createClass('<div class="map-editor-vertex"></div>'),
    editorEdgeLayout: ymaps.templateLayoutFactory.createClass('<div class="map-editor-edge"></div>'),
  });


  // myPolyline.editor.options.set('edgeLayout', ymaps.templateLayoutFactory.createClass('<div class="map-editor-edge"></div>'))
  // myPolyline.editor.options.set('vertexLayout', ymaps.templateLayoutFactory.createClass('<div class="map-editor-vertex"></div>'))


  // Добавляем линию на карту.
  myMap.geoObjects.add(myPolyline);

  // Включаем режим редактирования.
  myPolyline.editor.startEditing();

	/*
  myPolyline.editor.getView().then(function(object) {
    object.editor.options.set('edgeLayout', ymaps.templateLayoutFactory.createClass('<div class="map-editor-edge"></div>'));
    object.editor.options.set('vertexLayout', ymaps.templateLayoutFactory.createClass('<div class="map-editor-vertex"></div>'))
  });
  */

  /*
  myPolyline.editor.getView().then(function(object) {
  	var vertex = object.getVertexPlacemarks();
    vertex.get(0).options.set('edgeLayout', ymaps.templateLayoutFactory.createClass('<div class="map-editor-edge"></div>'));
    vertex.get(0).options.set('vertexLayout', ymaps.templateLayoutFactory.createClass('<div class="map-editor-vertex"></div>'));
    console.log(
    	vertex.get(0).options.getAll()
    )
  });
  */
}