JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>

<script>
    
</script>
<a href="#" id="test">click</a>
<div id="map" style="width: 300px; height: 100px;"></div>

JavaScript

ymaps.ready(function() {
    
    Ngs = {}; Ngs.Maps = {}; 
    
    Ngs.Maps.Api = function() {
        var that = this;        
        
        that.createMap=function(element, config) {
            return new Ngs.Maps.Map(element, config);
        };
        
        that.destroyMap=function(map) {};
    };
   
    Ngs.Maps.Map = function(element, config) {
        var that = this;
        
        that._layers = {};             
        that._controls = {};
        
        that.CONTROLS = {};
        that.CONTROLS.TYPE_SELECTOR = 'typeSelector';
        that.CONTROLS.NGS_TYPE_SELECTOR = 'ngsTypeSelector';
        that.CONTROLS.ZOOM_CONTROL = 'zoomControl';
        
        // add custom control to control.storage        
        
        var _map;
        
        var _$mapElement = $('#'+element);
        
        var _init = function(element, config) {
            _map = new ymaps.Map (element, {
               center: [55.76, 37.64], 
                zoom: 7
            });
            _map.controls.add('trafficControl');

        };
        
        that.getMap = function() {
            return _map;
        };
        
        that.redraw = function(width, height) {
            if (width != undefined) {
                _$mapElement.width(width);
            }
            
            if (height != undefined) {
                 _$mapElement.height(height);   
            }
            
            _map.container.fitToViewport();
        };
        
        that.addControl = function(control, config) {
            if (typeof control == 'string') {
                _map.controls.add(control);
            }
        };
        
        _init(element, config);
    };
    
    var api = new Ngs.Maps.Api();
    var map = api.createMap('map');

    map.addControl(map.CONTROLS.TYPE_SELECTOR);
    
    $('#test').click(function() {
         map.redraw(400, 200);   
    });
});