Dec 26 2014 at 11:29

Яндекс-карта федеральных округов

Invite pending

Стоит задача сделать карту с федеральными округами РФ на картах яндекса. В данной статье я не стараюсь открыть Америку, но думаю этот материал поможет вам сэкономить время на создание подобной карты.

В этом деле нам поможет документация и песочница для экспериментов. За основу берем этот пример. tech.yandex.ru/maps/jsbox/2.1/regions

//В консоль выводим все названия регионов и их osmId
lastCollection.each(function (reg) {
	console.log(reg.properties.get('name') + ' -> ' + reg.properties.get('osmId'));
});

Разбросал регионы по федеральным округам:

Центральный федеральный округ

Белгородская область -> 83184
Брянская область -> 81997
Владимирская область -> 72197
Воронежская область -> 72181
Ивановская область -> 85617
Калужская область -> 81995
Костромская область -> 85963
Курская область -> 72223
Липецкая область -> 72169
Московская область -> 51490
Орловская область -> 72224
Рязанская область -> 71950
Смоленская область -> 81996
Тамбовская область -> 72180
Тверская область -> 2095259
Тульская область -> 81993
Ярославская область -> 81994
Москва -> 102269

Южный федеральный округ

Адыгея -> 253256
Республика Калмыкия -> 108083
Краснодарский край -> 108082
Астраханская область -> 112819
Волгоградская область -> 77665
Ростовская область -> 85606

Северо-Западный федеральный округ

Республика Карелия -> 393980
Республика Коми -> 115136
Архангельская область -> 140337
Вологодская область -> 115106
Калининградская область -> 103906
Ленинградская область -> 176095
Мурманская область -> 2099216
Новгородская область -> 89331
Псковская область -> 155262
Санкт-Петербург -> 337422
Ненецкий автономный округ -> 274048

Дальневосточный федеральный округ

Республика Саха -> 151234
Камчатский край -> 151233
Приморский край -> 151225
Хабаровский край -> 151223
Амурская область -> 147166
Магаданская область -> 151228
Сахалинская область -> 394235
Еврейская автономная область -> 147167
Чукотский автономный округ -> 151231

Сибирский федеральный округ

Алтай -> 145194
Бурятия -> 145729
Тыва -> 145195
Республика Хакасия -> 190911
Алтайский край -> 144764
Забайкальский край -> 145730
Красноярский край -> 190090
Иркутская область -> 145454
Кемеровская область -> 144763
Новосибирская область -> 140294
Омская область -> 140292
Томская область -> 140295

Уральский федеральный округ

Курганская область -> 140290
Свердловская область -> 79379
Тюменская область -> 140291
Челябинская область -> 77687
Ханты-Мансийский автономный округ — Югра -> 140296
Ямало-Ненецкий автономный округ -> 191706

Приволжский федеральный округ

Башкортостан -> 77677
Марий Эл -> 115114
Республика Мордовия -> 72196
Татарстан -> 79374
Удмуртская республика -> 115134
Чувашия -> 80513
Кировская область -> 115100
Нижегородская область -> 72195
Оренбургская область -> 77669
Пензенская область -> 72182
Ульяновская область -> 72192
Самарская область -> 72194
Саратовская область -> 72193
Пермский край -> 115135

Северо-Кавказский федеральный округ

Дагестан -> 109876
Ингушетия -> 253252
Кабардино-Балкарская республика -> 109879
Карачаево-Черкесская республика -> 109878
Северная Осетия — Алания -> 110032
Чеченская республика -> 109877
Ставропольский край -> 108081

Далее надо окрасить регионы

        lastCollection.each(function (reg) {

            switch (reg.properties.get('osmId')) {
                /* begin Северо-Кавказский федеральный округ*/
                case '108081':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                case '109877':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
               // и так далее – полный код в конце статьи.
                /* end Северо-Кавказский федеральный округ*/
            }
        });

При клике на регион ничего необычного делать не будем – просто этот регион будет подсвечиваться.

        lastCollection.events.add('click', function (event) {
            //var region = event.get('target');
            //console.log(region.properties.get('name') + ' -> ' + region.properties.get('osmId'));

            var target = event.get('target');
            if (lastActiveRegion) {
                lastActiveRegion.options.set('preset', '')
            }
            lastActiveRegion = target;
            lastActiveRegion.options.set('preset', {
                strokeWidth: 3,
                fillColor: 'F99',
                strokeColor: '9f9'
            });
        });

Прописываем все регионы и метки для федеральных округов.
api.yandex.ru/maps/doc/jsapi/2.x/dg/concepts/geoobjects.xml Объекты на карте.

        var myPlacemark = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [44.128040, 44.736990]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Северо-Кавказский федеральный округ",
                balloonContentHeader: "Северо-Кавказский федеральный округ",
                balloonContentBody: "Россия"
            }
        });
        var myPlacemark2 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [55.424665, 38.240499]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Центральный федеральный округ",
                balloonContentHeader: "Центральный федеральный округ",
                balloonContentBody: "Россия"
            }
        });
// и так далее – полный код в конце статьи.

И в завершении прописываем:

geoMap.geoObjects.add(myPlacemark);
geoMap.geoObjects.add(myPlacemark1);
//и тд.

Итоговый код

html

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Яндекс карта федеральных округов.</title>
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
    <script src="map.js" type="text/javascript"></script>
    <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 90%;
        }
    </style>
</head>

<body>

<div id="map"></div>

</body>

</html>

map.js

ymaps.ready(function () {

    geoMap = new ymaps.Map('map', {
        center: [60, 90],
        type: "yandex#map",
        zoom: 3
    });
    geoMap.controls.add('zoomControl');

    var lastCollection = 0,
        lastActiveRegion = 0;

    var lng = 'ru',
        contr = 'RU',
        level = '0';
    if (lastCollection) {
        geoMap.geoObjects.remove(lastCollection);
    }
    ymaps.regions.load(contr, {
        lang: lng,
        quality: level
    }).then(function (result) {
        lastCollection = result.geoObjects;

        lastCollection.each(function (reg) {

            switch (reg.properties.get('osmId')) {
                /* begin Северо-Кавказский федеральный округ*/
                case '108081':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                case '109877':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                case '110032':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                case '109878':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                case '109879':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                case '253252':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                case '109876':
                {
                    reg.options.set('fillColor', '#ff001a');
                    break;
                }
                /* end Северо-Кавказский федеральный округ*/

                /* begin Приволжский федеральный округ*/
                case '109876':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '77677':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '115114':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '72196':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '79374':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '115134':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '80513':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '115100':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '72195':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '77669':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '72182':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '72192':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '72194':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '72193':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                case '115135':
                {
                    reg.options.set('fillColor', '#52ac62');
                    break;
                }
                /* end Приволжский федеральный округ*/

                /* begin Уральский федеральный округ*/
                case '140290':
                {
                    reg.options.set('fillColor', '#ffff00');
                    break;
                }
                case '79379':
                {
                    reg.options.set('fillColor', '#ffff00');
                    break;
                }
                case '140291':
                {
                    reg.options.set('fillColor', '#ffff00');
                    break;
                }
                case '77687':
                {
                    reg.options.set('fillColor', '#ffff00');
                    break;
                }
                case '140296':
                {
                    reg.options.set('fillColor', '#ffff00');
                    break;
                }
                case '191706':
                {
                    reg.options.set('fillColor', '#ffff00');
                    break;
                }
                /* end Уральский федеральный округ*/

                /* begin Сибирский федеральный округ*/
                case '145194':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '145729':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '145195':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '190911':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '144764':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '145730':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '190090':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '145454':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '144763':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '140294':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '140292':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                case '140295':
                {
                    reg.options.set('fillColor', '#0000ff');
                    break;
                }
                /* end Сибирский федеральный округ*/

                /* begin Дальневосточный федеральный округ*/
                case '151234':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '151233':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '151225':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '151223':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '147166':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '151228':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '394235':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '147167':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                case '151231':
                {
                    reg.options.set('fillColor', '#8b00ff');
                    break;
                }
                /* end Дальневосточный федеральный округ*/

                /* begin Северо-Западный федеральный округ*/
                case '393980':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '115136':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '140337':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '115106':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '103906':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '176095':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '2099216':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '89331':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '155262':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '337422':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                case '274048':
                {
                    reg.options.set('fillColor', '#ffa500');
                    break;
                }
                /* end Северо-Западный федеральный округ*/

                /* begin Южный федеральный округ*/
                case '253256':
                {
                    reg.options.set('fillColor', '#ffffff');
                    break;
                }
                case '108083':
                {
                    reg.options.set('fillColor', '#ffffff');
                    break;
                }
                case '108082':
                {
                    reg.options.set('fillColor', '#ffffff');
                    break;
                }
                case '112819':
                {
                    reg.options.set('fillColor', '#ffffff');
                    break;
                }
                case '77665':
                {
                    reg.options.set('fillColor', '#ffffff');
                    break;
                }
                case '85606':
                {
                    reg.options.set('fillColor', '#ffffff');
                    break;
                }
                /* end Южный федеральный округ*/

                /* begin Центральный федеральный округ*/
                case '83184':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '81997':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '72197':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '72181':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '85617':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '81995':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '85963':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '72223':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '72169':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '51490':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '72224':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '71950':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '81996':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '72180':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '2095259':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '81993':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '81994':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                case '102269':
                {
                    reg.options.set('fillColor', '#7b3f00');
                    break;
                }
                /* end Центральный федеральный округ*/

            }
        });


        lastCollection.options.set({
            zIndex: 1,
            zIndexHover: 1,
            draggable: false
        });


        lastCollection.events.add('click', function (event) {
            //var region = event.get('target');
            //console.log(region.properties.get('name') + ' -> ' + region.properties.get('osmId'));

            var target = event.get('target');
            if (lastActiveRegion) {
                lastActiveRegion.options.set('preset', '')
            }
            lastActiveRegion = target;
            lastActiveRegion.options.set('preset', {
                strokeWidth: 3,
                fillColor: 'F99',
                strokeColor: '9f9'
            });
        });


        var myPlacemark = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [44.128040, 44.736990]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Северо-Кавказский федеральный округ",
                balloonContentHeader: "Северо-Кавказский федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        var myPlacemark1 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [49.041646, 43.254042]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Южный федеральный округ",
                balloonContentHeader: "Южный федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        var myPlacemark2 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [55.424665, 38.240499]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Центральный федеральный округ",
                balloonContentHeader: "Центральный федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        var myPlacemark3 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [56.248661, 51.963736]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Приволжский федеральный округ",
                balloonContentHeader: "Приволжский федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        var myPlacemark4 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [63.335770, 36.146574]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Северо-Западный федеральный округ",
                balloonContentHeader: "Северо-Западный федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        var myPlacemark5 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [61.830704, 64.789900]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Уральский федеральный округ",
                balloonContentHeader: "Уральский федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        var myPlacemark6 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [64.218118, 98.192932]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Сибирский федеральный округ",
                balloonContentHeader: "Сибирский федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        var myPlacemark7 = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [67.127115, 124.131856]
            },
            // Описываем данные геообъекта.
            properties: {
                hintContent: "Дальневосточный федеральный округ",
                balloonContentHeader: "Дальневосточный федеральный округ",
                balloonContentBody: "Россия"
            }
        });

        geoMap.geoObjects.add(myPlacemark);
        geoMap.geoObjects.add(myPlacemark1);
        geoMap.geoObjects.add(myPlacemark2);
        geoMap.geoObjects.add(myPlacemark3);
        geoMap.geoObjects.add(myPlacemark4);
        geoMap.geoObjects.add(myPlacemark5);
        geoMap.geoObjects.add(myPlacemark6);
        geoMap.geoObjects.add(myPlacemark7);
        geoMap.geoObjects.add(lastCollection);


    }, function () {
        //alert('no response');
    });

});

П.С. Эту карту делал, когда такого нюанса как Крым еще не было, так что с ним разбирайтесь сами в зависимости от ваших (либо вашего заказчика) предпочтений.

Tags:

Hubs: