1
1
1ss1za2020-07-27 09:59:08
JavaScript
1ss1za, 2020-07-27 09:59:08

How to make balloon yandex map open by default?

How to make balloon yandex map open by default?

"use strict";
var modalMap;
$(document).ready(function () {
  ymaps.ready(init);

  function init() {
    let isMobile = {
      Android: function () { return navigator.userAgent.match(/Android/i); },
      BlackBerry: function () { return navigator.userAgent.match(/BlackBerry/i); },
      iOS: function () { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
      Opera: function () { return navigator.userAgent.match(/Opera Mini/i); },
      Windows: function () { return navigator.userAgent.match(/IEMobile/i); },
      any: function () {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
      }
    };
    modalMap = new ymaps.Map('modal-maps', {
      center: [43.58475920614244, 39.730603131085914],
      controls: ['fullscreenControl'],
      zoom: 14
    });
    ymaps.option.presetStorage.add('mark#icon', {
      iconLayout: 'default#image',
      iconImageHref: 'static/images/general/mark.svg',
      iconImageSize: [20, 20],
      iconImageOffset: [-10, -10],
      
    });
    ymaps.option.presetStorage.add('mark-hover#icon', {
      iconLayout: 'default#image',
      iconImageHref: 'static/images/general/mark-hover.svg',
      iconImageSize: [20, 20],
      iconImageOffset: [-10, -10],
      hideIconOnBalloonOpen: false,
      balloonOffset: [-163, 20]
    });

    function getData() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'map.json', false);
      xhr.send();
      
      return xhr.response;
    }

    var objectManager = new ymaps.ObjectManager({
      clusterize: true
    });
    objectManager.add(getData());
    
    modalMap.geoObjects.add(objectManager);

    
    objectManager.options.set('preset', 'mark-hover#icon');
    objectManager.events.add(['mouseenter'], function (e) {
      objectManager.objects.setObjectOptions(e.get('objectId'), {
        preset: 'mark-hover#icon'
      });
    }).add(['mouseleave'], function (e) {
      if (!modalMap.balloon.isOpen()) {
        objectManager.objects.setObjectOptions(e.get('objectId'), {
          preset: 'mark#icon'
        });
      }
    });
    objectManager.events.add('click', function (e) {
      for (var i = 0; i < objectManager.objects.getLength(); i++) {
        objectManager.objects.setObjectOptions(i, {
          preset: 'mark#icon'
        });
      }

      objectManager.objects.setObjectOptions(e.get('objectId'), {
        preset: 'mark-hover#icon'
      });
    }); // закрыть баллун

    modalMap.events.add('click', function () {
      modalMap.balloon.close();
    });

    
    

    if (isMobile.any()) {
      modalMap.behaviors.disable('drag');
    }

    modalMap.behaviors.disable('scrollZoom');
     });
  }
});

Answer the question

In order to leave comments, you need to log in

1 answer(s)
F
freeExec, 2020-07-27
@1ss1za

Take the marker and call its method - open the balloon.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question