HTML5 Russian map, is there free?

[Kadyn]

Interested is the map of Russia built on a web page with climatic regions with regulated cholera in regions, not flash. Wishingly not a fused JS code.

It's a popular card. http://fla-shop.com.ru/products/html5/ru-locator-map/ There's so free. http://evrohimservis.ru/map/ - Apparently the pirate version of the first map.

Are there any such free, non-craded JS crypts?

[simrah]

There's also Yandex, there's definitely free. https://tech.yandex.ru/maps/jsbox/2.1/regions

var REGIONS_DATA = {
        region: {
            title: 'Регион',
            items: [{
                id: '001',
                title: 'Страны мира'
            }, {
                id: 'BY',
                title: 'Беларусь'
            }, {
                id: 'KZ',
                title: 'Казахстан'
            }, {
                id: 'RU',
                title: 'Россия'
            }, {
                id: 'TR',
                title: 'Турция'
            }, {
                id: 'UA',
                title: 'Украина'
            }]
        },
        lang: {
            title: 'Язык',
            items: [{
                id: 'en',
                title: 'Английский'
            }, {
                id: 'be',
                title: 'Белорусский'
            }, {
                id: 'kk',
                title: 'Казахский'
            }, {
                id: 'ru',
                title: 'Русский'
            }, {
                id: 'tr',
                title: 'Турецкий'
            }, {
                id: 'uk',
                title: 'Украинский'
            }]
        },
        quality: {
            title: 'Точность границ',
            items: [{
                id: '0',
                title: '0'
            }, {
                id: '1',
                title: '1'
            }, {
                id: '2',
                title: '2'
            }, {
                id: '3',
                title: '3'
            }]
        }
    },
    // Шаблон html-содержимого макета.
    optionsTemplate = [
        '<div style="line-height: 34px; background-color: #80808080;" id="regions-params">',
        '{% for paramName, param in data.params %}',
        '{% for key, value in state.values %}',
        '{% if key == paramName %}',
        '<div class="btn-group btn-group-xs">',
        '<button{% if state.enabled %}{% else %} disabled{% endif %} type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">',
        '<span>{{ param.title }}</span>',
        '<span class="value">: {{ value }}</span>',
        '&nbsp;<span class="caret"></span>',
        '</button>',
        '<ul class="dropdown-menu {{ paramName }}">',
        '{% for item in param.items %}',
        '<li{% if item.id == value %} class="active"{% endif %}>',
        '<a href="#" data-param="{{ paramName }}" data-id="{{ item.id }}">',
        '{{ item.title }}',
        '</a>',
        '</li>',
        '{% endfor %}',
        '</ul>',
        '</div>&nbsp;',
        '{% endif %}',
        '{% endfor %}',
        '{% endfor %}',
        '</div>'
    ].join('');
ymaps.ready(init);
function init() {

// Создадим собственный макет RegionControl.

var RegionControlLayout = ymaps.templateLayoutFactory.createClass(optionsTemplate, {

build: function () {

RegionControlLayout.superclass.build.call(this);

this.handleClick = ymaps.util.bind(this.handleClick, this);

$(this.getParentElement)

.on('click', 'a', this.handleClick);

},

clear: function () {

$(this.getParentElement)

.off('click', 'a', this.handleClick);

RegionControlLayout.superclass.clear.call(this);

},

handleClick: function (e) {

e.preventDefault();

var $target = $(e.currentTarget);

var state = this.getData().state;

var newValues = ymaps.util.extend({}, state.get('values'));

if (!$target.hasClass('active')) {

newValues[$target.data('param')] = $target.data('id');

state.set('values', newValues);

}

}

}),

// Наследуем класс нашего контрола от ymaps.control.Button.

RegionControl = ymaps.util.defineClass(function (parameters) {

RegionControl.superclass.constructor.call(this, parameters);

this.regions = new ymaps.GeoObjectCollection();

}, ymaps.control.Button, /** @lends ymaps.control.Button */{

onAddToMap: function (map) {

RegionControl.superclass.onAddToMap.call(this, map);

map.geoObjects.add(this.regions);

this.setupStateMonitor();

this.loadRegions(this.state.get('values'));

},
        onRemoveFromMap: function (map) {
            map.geoObjects.remove(this.regions);
            this.clearStateMonitor();
            RegionControl.superclass.onRemoveFromMap.call(this, map);
        },

        setupStateMonitor: function () {
            this.stateMonitor = new ymaps.Monitor(this.state);
            this.stateMonitor.add('values', this.handleStateChange, this);
        },

        clearStateMonitor: function () {
            this.stateMonitor.removeAll();
        },

        handleStateChange: function (params) {
            this.loadRegions(params);
        },

        handleRegionsLoaded: function (res) {
            this.regions
                .removeAll()
                .add(res.geoObjects);
            this.getMap().setBounds(
                this.regions.getBounds(),
                {checkZoomRange: true}
            );
        },

        loadRegions: function (params) {
            this.disable();
            return ymaps.regions.load(params.region, params)
                .then(this.handleRegionsLoaded, this)
                .always(this.enable, this);
        }
    }),

    map = new ymaps.Map('map', {
        center: [50, 30],
        zoom: 3,
        controls: ['typeSelector']
    }, {
        typeSelectorSize: 'small'
    }),

    // Создадим экземпляр RegionControl.
    regionControl = new RegionControl({
        state: {
            enabled: true,
            values: {
                region: 'RU',
                lang: 'ru',
                quality: '1'
            }
        },
        data: {
            params: REGIONS_DATA
        },
        options: {
            layout: RegionControlLayout
        },
        float: 'left',
        maxWidth: [300]
    });

// Добавим контрол на карту.
map.controls.add(regionControl);
// Узнавать о изменениях параметров RegionControl можно следующим образом.
regionControl.events.add('statechange', function (e) {
    console.log(e.get('target').get('values'));
});

}

<!DOCTYPE html>

<html>
<head>

<title>Примеры. Регионы</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="https://api-maps.yandex.ru/2.1-dev/?lang=ru_RU" type="text/javascript"></script>

<link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.4/css/bootstrap.min.css"/>

<script src="https://yastatic.net/jquery/2.2.3/jquery.min.js"></script>

<script src="https://yastatic.net/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script src="regions.js" type="text/javascript"></script>

<style>

html, body, #map {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

}

</style>

</head><body>

<div id="map">

</div>

</body></html>

Well, yeah, you don't have to check if it's a stolen card. I can't check. You could point a reference to the source where you downloaded and where it was written to be free. We're also going to adjust the source and make him evaporate.