6

Интересует карта России, встраиваемая в web-страницу, с кликабельными регионами, с регулируемыми ховерами на регионах, не flash. Желательно не обфусцированный JS-код.

Популярна такая платная карта http://fla-shop.com.ru/products/html5/ru-locator-map/ . Есть такая бесплатная http://evrohimservis.ru/map/ - судя по всему пиратская версия первой карты.

Существуют ли подобные бесплатные не краденые JS-плагины?

4
  • 1
    OpenStreetMaps + Leflet не? 10 авг 2016 в 6:15
  • @Dmitriy Simushev В общем да, есть что-то похожее на то что надо: leafletjs.com/examples/choropleth.html . Но геометрию надо каким-то образом брать отсюда geojson.org . Дешевле таки купить первую карту - на разбор полётов и интеграцию дня 2 точно уйдёт) Спасибо. 10 авг 2016 в 9:50
  • Сделайте поиск по Интернету - github.com/neveldo/jQuery-Mapael В приведенном случае никакого плагина кроме RaphaelJS для вывода SVG карты и не нужно. Данные в открытом доступе, так что так как-то... 1 мар 2017 в 11:12
  • 5
    Данный вопрос следует закрыть, потому что поиск ресурсов это оффтоп.
    – αλεχολυτ
    31 авг 2017 в 10:19

2 ответа 2

2

Еще у Яндекса есть, там точно бесплатно 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>

Ну и да, Вы не обязаны проверять а правда ли это ворованная карта. Да и не проверить никак. Можно указать ссылку на источник где скачали и где было написано что она бесплатная. Также пройтись подкорректировать исходник и сделать ему обфускацию.

3
  • Хотя по ссылке можно найти ответ на вопрос, лучше указать здесь самое главное, а ссылку приводить в качестве источника. Если страница, на которую ведет ссылка, будет изменена, ответ-ссылка может стать недействительным. - Из очереди проверок 31 авг 2017 в 10:42
  • @alexander-barakin Спасибо за Ваше замечание. Первый раз писал ответ и пока еще не совсем знаю как именно нужно отвечать, внес поправку с рабочим примером. 31 авг 2017 в 16:46
  • У Яндекса кстати карта хороша еще тем что там обновляют ее, плис хорошее и мощьное АПИ для работы с ней. 5 сен 2017 в 10:04
-1

А чем вас эта карта http://evrohimservis.ru/map/ не устраивает? Берите и пользуйтесь

3
  • А с лицензией-то что?
    – andreymal
    5 фев 2017 в 12:58
  • писал в вопросе - это копипаст первой карты. 5 фев 2017 в 17:05
  • А кто у вас лицензию будет спрашивать?) И вообще изменил что нибудь и это уже другая карта и фиолетово что она точно также выглядит)
    – alex87.ru
    6 фев 2017 в 19:09

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.