https://fleet-cards.ru/js/russian-map.js

1/**
2 * Рендер Российской карты.
3 *
4 * Перед подключением этой библиотеки должна быть подключена библиотека RaphelJS:
5 *
6 * @see http://dmitrybaranovskiy.github.io/raphael/
7 *
8 * Состав опций:
9 * - mapId - идентификатор элемента, в котором будет срендерена карта
10 * - width - ширина карты
11 * - height - высота карты
12 * - defaultAttr - дефолтовые атрибуты полигона
13 * - mouseMoveAttr - атрибуты для полигона при наведении мышки
14 * - onMouseMove - событие при наведении мышки на регион
15 * - onMouseOut - событие при убирании мышки с региона
16 * - onMouseClick - событие при клике
17 * - viewPort - смещение координат в SVG
18 * - viewSize - видимые границы в SVG
19 *
20 * @param {Object} options Опции
21 * @param {Array} regions Регионы, каждый элемент состоит из:
22 *  ident - идентификатора,
23 *  name - названия,
24 *  attr - необязательное, атрибуты, которые будут перекрывать атрибуты по умолчанию,
25 *  moveAttr - необязательное, атрибуты, которые будут перекрывать атрибуты при наведении,
26 *  paths - массив атрибутов path
27 *  polygons - массив атрибутов polygon
28 */
29var RussianMap = function(options, regions) {
30    var mapId = options.mapId;
31    var width = options.width;
32    var height = options.height;
33    var viewPort = options.viewPort || '0 0 1134 620';
34    var viewSize = options.viewSize || '700 700';
35
36    // канва для рисования регионов
37    var R = Raphael(mapId, width, height, viewPort, viewSize);
38
39    // дефолтовые атрибуты для контуров регионов
40    var defaultAttr = options.defaultAttr || {
41        fill: '#d8d8d8', // цвет которым закрашивать
42        stroke: '#ffffff', // цвет границы
43        'stroke-width': 1, // ширина границы
44        'stroke-linejoin': 'round', // скруглять углы
45    };
46
47    // атрибуты для контуров регионов при событии onMouseMove
48    var mouseMoveAttr = options.mouseMoveAttr || {
49        fill: '#25669e'
50    };
51
52    /**
53     * Событие onMouseMove для path или polygon внутри контекста полигона (можно использовать this).
54     */
55    var onMouseMove = function(event) {
56        var region = this.region;
57        // установить всем полигонам в регионе дефолтовые атрибуты
58        // if (region.paths !== undefined) {
59        //     for (var p in region.paths) {
60        //         region.paths[p].attr(region.moveAttr || mouseMoveAttr);
61        //     }
62        // }
63        // if (region.polygons !== undefined) {
64        //     for (var p in region.polygons) {
65        //         region.polygons[p].attr(region.moveAttr || mouseMoveAttr);
66        //     }
67        // }
68        if (options.onMouseMove) {
69           //options.mouseMoveAttr
70            options.onMouseMove.call(this, event);
71        }
72    };
73
74    /**
75     * Событие при клике на полигон
76     */
77    var onMouseClick = function(event) {
78        if (options.onMouseClick) {
79            var region = this.region;
80            options.onMouseClick.call(this, event);
81        }
82
83    }
84
85
86    /**
87     * Событие onMouseOut для path или polygon внутри контекста полигона (можно использовать this)
88     */
89    var onMouseOut = function(event) {
90        var region = this.region;
91        // установить всем полигонам в регионе дефолтовые атрибуты
92        // if (region.paths !== undefined) {
93        //     for (var p in region.paths) {
94        //         region.paths[p].attr(region.attr || defaultAttr);
95        //     }
96        // }
97        // if (region.polygons !== undefined) {
98        //     for (var p in region.polygons) {
99        //         region.polygons[p].attr(region.attr || defaultAttr);
100        //     }
101        // }
102        if (options.onMouseOut) {
103            options.onMouseOut.call(this, event);
104        }
105    };
106
107    /* Init Map Colors */

108    $('#regions-names').change(function(event) {
109        //var regions = regions;
110        //Use $option (with the "$") to see that the variable is a jQuery object
111        var $option = $(this).find('option:selected');
112        //Added with the EDIT
113        var value = $option.val();//to get content of "value" attrib
114        var text = $option.text();//to get <option>Text</option> content
115
116       jQuery.each(regions, function(index, item) {
117            if (regions[index].ident == value) {
118                if (regions[index].paths !== undefined) {
119                    for (var p in regions[index].paths) {
120                        regions[index].paths[p].attr({"fill":"#FFCC00"});
121                    }
122                }
123                if (regions[index].polygons !== undefined) {
124                    for (var p in regions[index].polygons) {
125                        regions[index].polygons[p].attr({"fill":"#FFCC00"});
126                    }
127                }
128            } else {
129                if (regions[index].paths !== undefined) {
130                    for (var p in regions[index].paths) {
131                        regions[index].paths[p].attr({"fill":"#ffffff"});
132                    }
133                }
134                if (regions[index].polygons !== undefined) {
135                    for (var p in regions[index].polygons) {
136                        regions[index].polygons[p].attr({"fill":"#ffffff"});
137                    }
138                }
139            }
140        });
141
142    });
143
144    /**
145     * Рендер региона
146     * @param R
147     * @param region
148     */
149    var renderRegion = function(region) {
150        // прорисовка многоугольников
151        if (region.paths !== undefined) {
152            for (var p in region.paths) {
153                var path = R.path(region.paths[p]).attr(region.attr || defaultAttr);
154                path.region = region;
155                path.mouseover(onMouseMove);
156                path.mouseout(onMouseOut);
157                path.click(onMouseClick);
158                region.paths[p] = path;
159            }
160        }
161        // прорисовка полигнов: также через тег path, только конечная точка соединяется с начальной
162        if (region.polygons !== undefined) {
163            for (var p in region.polygons) {
164                var polygon = R.path('M' + region.polygons[p]).attr(region.attr || defaultAttr);
165                polygon.region = region;
166                polygon.mouseover(onMouseMove);
167                polygon.mouseout(onMouseOut);
168                polygon.click(onMouseClick);
169                region.polygons[p] = polygon;
170            }
171        }
172    };
173
174    for (var i in regions) {
175        renderRegion(regions[i]);
176    }
177
178    this.regions = regions;
179};