sGis react component for yandex map

yandex.js

import { Component } from "react";
import { geo } from "@evergis/sgis/es/Crs";
import { throttle } from "lodash";

import withEvergis from "HOC/withEvergis";

import { script } from "./script";
import { yandexContainerId } from "components/EvergisMap/TilesLayers/Yandex/yandexContainerId";
import { yandexCopyrightsId } from "components/EvergisMap/Copyrights/copyrightId";

class YandexBase extends Component {
  constructor(props) {
    const { locale, type } = props;

    super(props);
    this._type = this._getPossibleMapType(type);
    this._locale = locale;
    this._yandex = {};
    this.state = {
      isMounted: false,
    };
  }

  options = {
    minZoom: 0,
    maxZoom: 18,
    attribution: "",
    opacity: 1,
  };

  possibleShortMapTypes = {
    schemaMap: "map",
    satelliteMap: "satellite",
    hybridMap: "hybrid",
    publicMap: "publicMap",
    publicMapInHybridView: "publicMapHybrid",
  };

  componentDidMount() {
    const { map } = this.props;

    map.animationTime = 0;
    map.changeEndDelay = 0;

    map.on("bboxChange", this._update);
    this._init();
    this._update(true);
  }

  componentWillUnmount() {
    const { map } = this.props;

    const yandexMap = document.getElementById(yandexContainerId);

    if (yandexMap) {
      yandexMap.innerHTML = "";
    }

    const copyrights = document.getElementById(yandexCopyrightsId);

    if (copyrights) {
      copyrights.innerHTML = "";
    }

    map.animationTime = 300;
    map.changeEndDelay = 300;
    map.off("bboxChange", this._update);
  }

  _getPossibleMapType(mapType) {
    let result = "yandex#map";
    if (typeof mapType !== "string") {
      return result;
    }
    for (let key in this.possibleShortMapTypes) {
      if (mapType === this.possibleShortMapTypes[key]) {
        result = "yandex#" + mapType;
        break;
      }
      if (mapType === "yandex#" + this.possibleShortMapTypes[key]) {
        result = mapType;
      }
    }
    return result;
  }

  _init = () => {
    this.setState({ isMounted: true });
    this._initMapObject();
  };

  _initMapObject() {
    if (this._yandex[this._locale]) return;
    if (!window.ym) window.ym = {};

    if (!window.ym[this._locale]) {
      return script(`//api-maps.yandex.ru/2.1.78/?load=package.map&lang=${this._locale}`).then(
        () => {
          window.ym[this._locale] = global.ymaps;
          this._initMapObject();
        },
      );
    }

    // Check that ymaps.Map is ready
    if (ym[this._locale].Map === undefined) {
      return ym[this._locale].load(["package.map"], this._initMapObject, this);
    }

    //Creating ymaps map-object without any default controls on it
    const yandexMap = new ym[this._locale].Map(document.getElementById(yandexContainerId), {
      center: [0, 0],
      zoom: 0,
      behaviors: [],
      controls: [],
    });

    if (this._type === "yandex#null") {
      this._type = new ym[this._locale].MapType("null", []);
      yandexMap.container.getElement().style.background = "transparent";
    }
    yandexMap.setType(this._type);

    this._yandex[this._locale] = yandexMap;
    this._update(true);
    this.setCopyrights();
  }

  setCopyrights = () => {
    const yandexMap = this._yandex[this._locale];
    const yandexCopyrights = yandexMap.copyrights._layout._parentElement;
    const copyrights = document.getElementById(yandexCopyrightsId);

    copyrights.appendChild(yandexCopyrights);
  };

  getZoom = () => {
    const { map } = this.props;

    const index = map.tileScheme.getLevel(map.resolution);

    if (index === void 0 && index === null) return;

    return map.tileScheme.levels[index].zIndex;
  };

  _update = throttle((force) => {
    const { map } = this.props;
    const yandexMap = this._yandex[this._locale];

    if (!yandexMap || !map) return;

    const zoom = this.getZoom();
    const center = map.centerPoint.projectTo(geo).position;

    yandexMap.setCenter(center);

    if (force || yandexMap.getZoom() !== zoom) {
      yandexMap.setZoom(zoom);
    }
  }, 14);

  render() {
    return null;
  }
}

export const Yandex = withEvergis(YandexBase);