├── flags ├── moscow.gif ├── ryazan.png ├── lipeckya.jpg ├── bryanskaya_flag.png ├── tulskaya_flag.png ├── chelyabinskaya_flag.png ├── flag_of_kursk_oblast.png ├── flag_omskoj_oblasti.png └── flag_kirovskoy_oblasti.png ├── README.md ├── css └── style.css ├── license.txt ├── js ├── prefixfree.min.js └── index.js └── index.html /flags/moscow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/moscow.gif -------------------------------------------------------------------------------- /flags/ryazan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/ryazan.png -------------------------------------------------------------------------------- /flags/lipeckya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/lipeckya.jpg -------------------------------------------------------------------------------- /flags/bryanskaya_flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/bryanskaya_flag.png -------------------------------------------------------------------------------- /flags/tulskaya_flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/tulskaya_flag.png -------------------------------------------------------------------------------- /flags/chelyabinskaya_flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/chelyabinskaya_flag.png -------------------------------------------------------------------------------- /flags/flag_of_kursk_oblast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/flag_of_kursk_oblast.png -------------------------------------------------------------------------------- /flags/flag_omskoj_oblasti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/flag_omskoj_oblasti.png -------------------------------------------------------------------------------- /flags/flag_kirovskoy_oblasti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexTitakoff/svg-map-Russia/HEAD/flags/flag_kirovskoy_oblasti.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## SVG map russia. 2 | 3 | [PREVIEW](http://codepen.io/alexTi-dev/pen/oYWOXK "view") 4 | 5 | Some map with little bit API, but may be you can find useful these code. 6 | 7 | thanks [https://github.com/SmartTeleMax/ru-svg-map](https://github.com/SmartTeleMax/ru-svg-map "https://github.com/SmartTeleMax/ru-svg-map") 8 | 9 | Pure js realisation 10 | [link](https://github.com/alexTitakoff/svg-map-Russia/issues/1) 11 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0;} 2 | 3 | svg{ 4 | width:100%; 5 | 6 | } 7 | path{transition:all .5s; fill:rgba(0,0,0,0.6);stroke: rgba(0,0,0,0.5);} 8 | 9 | .indicator{ 10 | position:absolute; 11 | display:inline; 12 | background:rgba(0,0,0,1); 13 | color:#f1f1f1; 14 | padding:10px 30px; 15 | font:20px Arial; 16 | border-radius:5px; 17 | min-width:300px; 18 | 19 | text-transform:capitalize; 20 | display:none; 21 | 22 | 23 | } 24 | 25 | .clear{clear:both} 26 | .name{float:left;margin-right:30px;} 27 | /*.flag{position:absolute;top:10px;right:20px;border:3px solid #f7ffe8;border-radius:3px; 28 | }*/ 29 | .capital{clear:both;} -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /js/prefixfree.min.js: -------------------------------------------------------------------------------- 1 | !function(){function e(e,r){return[].slice.call((r||document).querySelectorAll(e))}if(window.addEventListener){var r=window.StyleFix={link:function(e){try{if("stylesheet"!==e.rel||e.hasAttribute("data-noprefix"))return}catch(t){return}var n,i=e.href||e.getAttribute("data-href"),a=i.replace(/[^\/]+$/,""),o=(/^[a-z]{3,10}:/.exec(a)||[""])[0],s=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(a)||[""])[0],l=/^([^?]*)\??/.exec(i)[1],u=e.parentNode,p=new XMLHttpRequest;p.onreadystatechange=function(){4===p.readyState&&n()},n=function(){var t=p.responseText;if(t&&e.parentNode&&(!p.status||p.status<400||p.status>600)){if(t=r.fix(t,!0,e),a){t=t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,r,t){return/^([a-z]{3,10}:|#)/i.test(t)?e:/^\/\//.test(t)?'url("'+o+t+'")':/^\//.test(t)?'url("'+s+t+'")':/^\?/.test(t)?'url("'+l+t+'")':'url("'+a+t+'")'});var n=a.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");t=t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+n,"gi"),"$1")}var i=document.createElement("style");i.textContent=t,i.media=e.media,i.disabled=e.disabled,i.setAttribute("data-href",e.getAttribute("href")),u.insertBefore(i,e),u.removeChild(e),i.media=e.media}};try{p.open("GET",i),p.send(null)}catch(t){"undefined"!=typeof XDomainRequest&&(p=new XDomainRequest,p.onerror=p.onprogress=function(){},p.onload=n,p.open("GET",i),p.send(null))}e.setAttribute("data-inprogress","")},styleElement:function(e){if(!e.hasAttribute("data-noprefix")){var t=e.disabled;e.textContent=r.fix(e.textContent,!0,e),e.disabled=t}},styleAttribute:function(e){var t=e.getAttribute("style");t=r.fix(t,!1,e),e.setAttribute("style",t)},process:function(){e("style").forEach(StyleFix.styleElement),e("[style]").forEach(StyleFix.styleAttribute)},register:function(e,t){(r.fixers=r.fixers||[]).splice(void 0===t?r.fixers.length:t,0,e)},fix:function(e,t,n){for(var i=0;i-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,function(e,r,t,n){return r+(t||"")+"linear-gradient("+(90-n)+"deg"})),e=r("functions","(\\s|:|,)","\\s*\\(","$1"+i+"$2(",e),e=r("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+i+"$2$3",e),e=r("properties","(^|\\{|\\s|;)","\\s*:","$1"+i+"$2:",e),t.properties.length){var a=RegExp("\\b("+t.properties.join("|")+")(?!:)","gi");e=r("valueProperties","\\b",":(.+?);",function(e){return e.replace(a,i+"$1")},e)}return n&&(e=r("selectors","","\\b",t.prefixSelector,e),e=r("atrules","@","\\b","@"+i+"$1",e)),e=e.replace(RegExp("-"+i,"g"),"-"),e=e.replace(/-\*-(?=[a-z]+)/gi,t.prefix)},property:function(e){return(t.properties.indexOf(e)?t.prefix:"")+e},value:function(e){return e=r("functions","(^|\\s|,)","\\s*\\(","$1"+t.prefix+"$2(",e),e=r("keywords","(^|\\s)","(\\s|$)","$1"+t.prefix+"$2$3",e)},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+t.prefix})},prefixProperty:function(e,r){var n=t.prefix+e;return r?StyleFix.camelCase(n):n}};!function(){var e={},r=[],n=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,a=function(t){if("-"===t.charAt(0)){r.push(t);var n=t.split("-"),i=n[1];for(e[i]=++e[i]||1;n.length>3;){n.pop();var a=n.join("-");o(a)&&-1===r.indexOf(a)&&r.push(a)}}},o=function(e){return StyleFix.camelCase(e)in i};if(n.length>0)for(var s=0;s' + name +'').appendTo('.indicator'); 12 | } 13 | 14 | 15 | if($(this).attr('flag')) { 16 | var flag = "http://sandbox.alexti-dev.ru/mapping/" + $(this).attr('flag') ; 17 | $(' ').appendTo('.indicator'); 18 | $('.indicator').find('img').attr('src',flag ) 19 | // $('').appendTo('.indicator'); 20 | } 21 | 22 | $('.change').remove(); 23 | 24 | var script = document.createElement('script'); 25 | // script.classList.add('change'); 26 | //script.src = 'http://api.geonames.org/countryInfoJSON?country='+info[id]+'&username=pixeltest&style=full&callback=update'; 27 | document.body.appendChild(script); 28 | 29 | $(this).css('fill','#f6e72d'); 30 | $('path').not(this).css('fill','rgba(0,0,0,0.5)'); 31 | $('.indicator').css({'top':e.pageY,'left':e.pageX+30}).show(); 32 | 33 | 34 | 35 | },function(){ 36 | $('.indicator').html(''); 37 | $('.indicator').hide(); 38 | $('path').css('fill','rgba(0,0,0,0.2)'); 39 | }); 40 | 41 | 42 | 43 | 44 | 45 | var idAarr = ["RU-MOW", "RU-SPE", "RU-NEN", "RU-YAR", "RU-CHE", "RU-ULY", "RU-TYU", "RU-TUL", "RU-SVE", "RU-RYA", "RU-ORL", "RU-OMS", "RU-NGR", "RU-LIP", "RU-KRS", "RU-KGN", "RU-KGD", "RU-IVA", "RU-BRY", "RU-AST", "RU-KHA", "RU-CE", "RU-UD", "RU-SE", "RU-MO", "RU-KR", "RU-KL", "RU-IN", "RU-AL", "RU-BA", "RU-AD", "RU-CR", "RU-SEV", "RU-KO", "RU-KIR", "RU-PNZ", "RU-TAM", "RU-MUR", "RU-LEN", "RU-VLG", "RU-KOS", "RU-PSK", "RU-ARK", "RU-YAN", "RU-CHU", "RU-YEV", "RU-TY", "RU-SAK", "RU-AMU", "RU-BU", "RU-KK", "RU-KEM", "RU-NVS", "RU-ALT", "RU-DA", "RU-STA", "RU-KB", "RU-KC", "RU-KDA", "RU-ROS", "RU-SAM", "RU-TA", "RU-ME", "RU-CU", "RU-NIZ", "RU-VLA", "RU-MOS", "RU-KLU", "RU-BEL", "RU-ZAB", "RU-PRI", "RU-KAM", "RU-MAG", "RU-SA", "RU-KYA", "RU-ORE", "RU-SAR", "RU-VGG", "RU-VOR", "RU-SMO", "RU-TVE", "RU-PER", "RU-KHM", "RU-TOM", "RU-IRK"]; 46 | var idAarr2 = new Array( 47 | ["RU-MOW", "Москва", "moscow.gif"], 48 | ["RU-CHE", "Челябинская область", "chelyabinskaya_flag.png" ], 49 | ["RU-ORL", "Орловская область"], 50 | ["RU-OMS", "Омская область", "flag_omskoj_oblasti.png"], 51 | ["RU-LIP", "Липецкая область", "lipeckya.jpg"], 52 | ["RU-KRS", "Курская область", "flag_of_kursk_oblast.png"], 53 | ["RU-RYA", "Рязанская область", "ryazan.png"], 54 | ["RU-BRY", "Брянская область", "bryanskaya_flag.png"], 55 | ["RU-KIR", "Кировская область", "flag_kirovskoy_oblasti.png"], 56 | ["RU-ARK", "Архангельская область", ""], 57 | ["RU-MUR", "Мурманская область", ""], 58 | ["RU-SPE", "Санкт-Петербург", ""], 59 | ["RU-YAR", "Ярославская область", ""], 60 | ["RU-ULY", "Ульяновская область", ""], 61 | ["RU-NVS", "Новосибирская область", ""], 62 | ["RU-TYU", "Тюменская область", ""], 63 | ["RU-SVE", "Свердловская область", ""], 64 | ["RU-NGR", "Новгородская область", ""], 65 | ["RU-KGN", "Курганская область", ""], 66 | ["RU-KGD", "Калининградская область", ""], 67 | ["RU-IVA", "Ивановская область", ""], 68 | ["RU-AST", "Астраханская область", ""], 69 | ["RU-KHA", "Хабаровский край", ""], 70 | ["RU-CE", "Чеченская республика", ""], 71 | ["RU-UD", "Удмуртская республика", ""], 72 | ["RU-SE", "Республика Северная Осетия", ""], 73 | ["RU-MO", "Республика Мордовия", ""], 74 | ["RU-KR", "Республика Карелия", ""], 75 | ["RU-KL", "Республика Калмыкия", ""], 76 | ["RU-IN", "Республика Ингушетия", ""], 77 | ["RU-AL", "Республика Алтай", ""], 78 | ["RU-BA", "Республика Башкортостан", ""], 79 | ["RU-AD", "Республика Адыгея", ""], 80 | ["RU-CR", "Республика Крым", ""], 81 | ["RU-SEV", "Севастополь", ""], 82 | ["RU-KO", "Республика Коми", ""], 83 | ["RU-PNZ", "Пензенская область", ""], 84 | ["RU-TAM", "Тамбовская область", ""], 85 | ["RU-LEN", "Ленинградская область", ""], 86 | ["RU-VLG", "Вологодская область", ""], 87 | ["RU-KOS", "Костромская область", ""], 88 | ["RU-PSK", "Псковская область", ""], 89 | ["RU-YAN", "Ямало-Ненецкий АО", ""], 90 | ["RU-CHU", "Чукотский АО", ""], 91 | ["RU-YEV", "Еврейская автономская область", ""], 92 | ["RU-TY", "Республика Тыва", ""], 93 | ["RU-SAK", "Сахалинская область", ""], 94 | ["RU-AMU", "Амурская область", ""], 95 | ["RU-BU", "Республика Бурятия", ""], 96 | ["RU-KK", "Республика Хакасия", ""], 97 | ["RU-KEM", "Кемеровская область", ""], 98 | ["RU-ALT", "Алтайский край", ""], 99 | ["RU-DA", "Республика Дагестан", ""], 100 | ["RU-KB", "Кабардино-Балкарская республика", ""], 101 | ["RU-KC", "Карачаевая-Черкесская республика", ""], 102 | ["RU-KDA", "Краснодарский край", ""], 103 | ["RU-ROS", "Ростовская область", ""], 104 | ["RU-SAM", "Самарская область", ""], 105 | ["RU-TA", "Республика Татарстан", ""], 106 | ["RU-ME", "Республика Марий Эл", ""], 107 | ["RU-CU", "Чувашская республика", ""], 108 | ["RU-NIZ", "Нижегородская край", ""], 109 | ["RU-VLA", "Владимировская область", ""], 110 | ["RU-MOS", "Московская область", ""], 111 | ["RU-KLU", "Калужская область", ""], 112 | ["RU-BEL", "Белгородская область", ""], 113 | ["RU-ZAB", "Забайкальский край", ""], 114 | ["RU-PRI", "Приморский край", ""], 115 | ["RU-KAM", "Камачатский край", ""], 116 | ["RU-MAG", "Магаданская область", ""], 117 | ["RU-SA", "Республика Саха", ""], 118 | ["RU-KYA", "Красноярский край", ""], 119 | ["RU-ORE", "Оренбургская область", ""], 120 | ["RU-SAR", "Саратовская область", ""], 121 | ["RU-VGG", "Волгоградская область", ""], 122 | ["RU-VOR", "Ставропольский край", ""], 123 | ["RU-SMO", "Смоленская область", ""], 124 | ["RU-TVE", "Тверская область", ""], 125 | ["RU-PER", "Пермская область", ""], 126 | ["RU-KHM", "Ханты-Мансийский АО", ""], 127 | ["RU-KHM", "Ханты-Мансийский АО", ""], 128 | ["RU-TOM", "Томская область", ""], 129 | ["RU-IRK", "Иркутская область", ""], 130 | ["RU-NEN", "Ненецскй АО", ""], 131 | ["RU-STA", "Ставропольский край", ""], 132 | ["RU-TUL", "Тульская область", "tulskaya_flag.png"] 133 | 134 | ); 135 | 136 | $('path').each(function() { 137 | 138 | var regId = $(this).attr('id'); 139 | var flag = ''; 140 | var name = ''; 141 | for (var j = 0; j < idAarr2.length; j++) { 142 | 143 | if (regId == idAarr2[j][0]) { 144 | name = idAarr2[j][1]; 145 | flag = 'flags/'+ idAarr2[j][2]; 146 | 147 | $(this).attr('name', name); 148 | $(this).attr('flag', flag); 149 | } 150 | } 151 | 152 | 153 | var regIdDiv = '
'+ '[' + ''+ regId +'' + ']' +' '+ name +'
' 154 | $(regIdDiv).appendTo('.regs'); 155 | 156 | 157 | // var idArrMin = [regId, '_']; 158 | // idAarr2.push(idArrMin); 159 | 160 | 161 | }) 162 | 163 | 164 | // for (var j = 0; j < idAarr2.length; j++) { 165 | // if (regId == idAarr2[j][0]) { 166 | // name = cyr2latChars[j][1]; 167 | 168 | // } 169 | // } 170 | 171 | 172 | function naming() { 173 | 174 | } 175 | 176 | 177 | //revertFill(); 178 | 179 | 180 | $('.reg').hover(function(e) { 181 | 182 | 183 | var id = $(this).find('span').text(); 184 | 185 | idHover = '#' + id; 186 | 187 | $(idHover).css('fill','#f6e72d'); 188 | // $('path').not(this).css('fill','rgba(0,0,0,0.5)'); 189 | // $('.indicator').css({'top':e.pageY,'left':e.pageX+30}).show(); 190 | 191 | },function(){ 192 | $('.indicator').html(''); 193 | $('.indicator').hide(); 194 | $('path').css('fill','rgba(0,0,0,0.2)'); 195 | }); 196 | 197 | //} // revertFill 198 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Russia svg with API 6 | 7 | 8 | 9 | 10 | 11 | 12 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 |
175 | 176 |
177 | 178 | 179 |
180 | 181 |
182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | --------------------------------------------------------------------------------