HTML5 Russian map, is there free?



  • 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?



  • 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.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2