Skip to content

Instantly share code, notes, and snippets.

@dpmango
Last active September 24, 2019 21:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dpmango/dfb42db36807c68b432204cadff728ad to your computer and use it in GitHub Desktop.
Save dpmango/dfb42db36807c68b432204cadff728ad to your computer and use it in GitHub Desktop.
//////////
// YMAPS
//////////
(function($, APP) {
  APP.Plugins.Ymaps = {
    data: {
      scriptsCreated: false,
      ymapsLoaded: false,
      clusterMap: undefined,
    },
    init: function() {
      if ($('.js-ymap').length > 0) {
        if (this.data.ymapsLoaded) {
          ymaps.ready(this.initMaps.bind(this));
        } else {
          this.tryLoadScripts();
        }
      }
      this.clickListeners();
    },
    createScripts: function() {
      var ymapsK = '9ba9a278-66f0-47c6-8197-0d404ee0def5';
      var ymapsScript = document.createElement('script');
      ymapsScript.type = 'text/javascript';
      ymapsScript.src = 'https://api-maps.yandex.ru/2.1/?apikey=' + ymapsK + '&lang=ru_RU';
      $('head').append(ymapsScript);
      this.data.scriptsCreated = true;
    },
    tryLoadScripts: function() {
      var _this = this;
      if (!_this.data.scriptsCreated) {
        _this.createScripts();
      }

      var ticker = setInterval(readyChecker, 250);
      function readyChecker() {
        if (!_this.data.ymapsLoaded) {
          try {
            if (ymaps.ready()) {
              _this.data.ymapsLoaded = true;
              _this.init(); // reinit
              clearInterval(ticker);
            }
          } catch (e) {
            // console.log('maps not ready yeat, another try');
          }
        }
      }
    },
    initMaps: function() {
      var _this = this;
      $('.js-ymap').each(function(i, domElement) {
        _this.drawMap(domElement);
      });
    },
    drawMap: function(domElement) {
      var _this = this;
      var $domElement = $(domElement);
      var $geoPoints = $domElement.parent().find('.js-ymap-points i');
      var type = $domElement.data('type');
      if ($domElement.length === 0) return;

      var myMap;
      var params = {
        center: _this.geoStringToArr($domElement.data('center')),
        zoom: $domElement.data('zoom') || 10,
      };

      // CREATE MAP INSTANCE
      myMap = new ymaps.Map(domElement, {
        center: params.center,
        zoom: params.zoom,
      });
      // save insance
      if (type === 'cluster') {
        _this.data.clusterMap = myMap;
      } else if (type === 'simple') {
        // _this.data.
      }
      // CONTROLS
      myMap.controls.remove('trafficControl');
      myMap.controls.remove('searchControl');
      myMap.controls.remove('fullscreenControl');
      myMap.controls.remove('rulerControl');
      myMap.controls.remove('geolocationControl');
      myMap.controls.remove('routeEditor');
      myMap.controls.remove('typeSelector');
      // myMap.controls.remove('zoomControl');


      // PLACEMARKS
      if (type === 'cluster') {
        if ($geoPoints.length > 0) {
          var placemarkCluster = new ymaps.Clusterer({
            preset: 'islands#blackClusterIcons',
          });
          var placemarkArr = [];

          $geoPoints.each(function(i, point) {
            var $point = $(point);
            var geodata = _this.geoStringToArr($point.data('geodata'));
            var marker = $point.data('marker');
            var shopId = $point.data('shop-id');

            var placemark = new ymaps.Placemark(
              geodata,
              {
                // balloonContent: params.placeholder.balloon,
                // iconCaption: params.placeholder.caption,
              },
              {
                preset: 'islands#blackIcon',
              }
            );

            placemarkCluster.add(placemark);
            placemarkArr.push({ id: shopId, geoObj: placemark });
          });

          myMap.geoObjects.add(placemarkCluster);

          // zoom by cluster size
          myMap.setBounds(placemarkCluster.getBounds(), { checkZoomRange: true });

          // single placemark click lsiteners
          $.each(placemarkArr, function(i, obj) {
            obj.geoObj.events.add('click', function() {
              $.each(placemarkArr, function(idx, obj) {
                obj.geoObj.options.set(
                  {preset: 'islands#blackIcon'}
                );
              });
              obj.geoObj.options.set(
                {preset: 'islands#yellowIcon'}
              );

              $('.shops__map').addClass('is-active');
              $('.shop-map-info').hide();
              $('.shop-map-info[data-shop="' + obj.id + '"]').fadeIn();

              myMap.container.fitToViewport();
            });
          });
        }
      } else if (type === 'simple') {
        var placemark = new ymaps.Placemark(
          params.center,
          {
            // balloonContent: params.placeholder.balloon,
            // iconCaption: params.placeholder.caption,
          },
          {
            preset: 'islands#yellowIcon'
          }
        );

        myMap.geoObjects.add(placemark);
      }
    },
    geoStringToArr: function(str) {
      var split = str.split(',');
      if (split.length === 2) {
        return [parseFloat(split[0]), parseFloat(split[1])];
      }

      return false;
    },
    clickListeners: function() {
      var _this = this;
      _document.on('click', '.js-close-map-info', function() {
        $('.shops__map').removeClass('is-active');
        _this.data.clusterMap.container.fitToViewport();
      });
    },
  };
})(jQuery, window.APP);
        .js-ymap(data-type="cluster" data-center="55.732917, 37.606709" data-zoom="10")
        span.js-ymap-points
          i(data-geodata="55.741007, 37.565740" data-shop-id="1" data-marker="pickup")
          i(data-geodata="55.731761, 37.541159" data-shop-id="2" data-marker="regular")
          i(data-geodata="55.737694, 37.590321" data-shop-id="3" data-marker="regular")
          i(data-geodata="55.735613, 37.596876" data-shop-id="4" data-marker="regular")
          i(data-geodata="55.727368, 37.626920" data-shop-id="5" data-marker="regular")
          i(data-geodata="55.718350, 37.613810" data-shop-id="6" data-marker="regular")
          i(data-geodata="55.716115, 37.557546" data-shop-id="7" data-marker="regular")
          i(data-geodata="55.706323, 37.601929" data-shop-id="8" data-marker="regular")
          i(data-geodata="55.731838, 37.568608" data-shop-id="9" data-marker="regular")
          i(data-geodata="55.724131, 37.658739" data-shop-id="10" data-marker="regular")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment