yandex maps (outside controls)

hiding and showving overlay objects

by Alexander Zonov

HTML

<script src="//api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&amp;lang=ru-RU"></script>
<div id="map"></div>
<div class="controls">
  <button class="add">add minimap</button>
  <button class="remove">remove minimap</button>
  <button class="add_collection">add collection</button>
  <button class="remove_collection">remove collection</button>
</div>

CSS

html, body, #map {
   width: 600px; height: 300px; padding: 0; margin: 0;
}

JavaScript

ymaps.ready(function(){
	function afterInit(map, collection){
  	var miniMap = new ymaps.control.MiniMap({
      type: 'yandex#publicMap'
    });

    function addMap(){
      map.controls.add(miniMap);
    }

    function removeMap(){
      map.controls.remove(miniMap);
    }

    $('.add').on('click', function(){
      addMap();
    });

    $('.remove').on('click', function(){
      removeMap();
    });
    
     $('.add_collection').on('click', function(){
      map.geoObjects.add(collection);
    });

    $('.remove_collection').on('click', function(){
      map.geoObjects.remove(collection);
    });
  }
  
	init(afterInit);
 
});

function init(cb) {
    var myMap = new ymaps.Map("map", {
            center: [55.73, 37.75],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        });

		var myCollection = new ymaps.GeoObjectCollection(null);
    
    // Создаем многоугольник, используя класс GeoObject.
    var myGeoObject = new ymaps.GeoObject({
        // Описываем геометрию геообъекта.
        geometry: {
            // Тип геометрии - "Многоугольник".
            type: "Polygon",
            // Указываем координаты вершин многоугольника.
            coordinates: [
                // Координаты вершин внешнего контура.
                [
                    [55.75, 37.80],
                    [55.80, 37.90],
                    [55.75, 38.00],
                    [55.70, 38.00],
                    [55.70, 37.80]
                ],
                // Координаты вершин внутреннего контура.
                [
                    [55.75, 37.82],
                    [55.75, 37.98],
                    [55.65, 37.90]
                ]
            ],
            // Задаем правило заливки внутренних контуров по алгоритму "nonZero".
            fillRule: "nonZero"
        },
        // Описываем свойства геообъекта.
        properties:{
            // Содержимое балуна.
            balloonContent: "Многоугольник"
        }
    },...