jvectormap кстомизировать label
|
Не смог посмотреть, IP пишет заблокирован
|
<html><head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <meta content="noindex, nofollow" name="robots"> <meta content="noindex, nofollow" name="googlebot"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> <link href="/css/result-light.css" type="text/css" rel="stylesheet"> <script src="http://jvectormap.com/js/jquery-jvectormap-2.0.1.min.js" type="text/javascript"></script> <link href="http://jvectormap.com/css/jquery-jvectormap-2.0.1.css" type="text/css" rel="stylesheet"> <script src="http://jvectormap.com/js/jquery-jvectormap-ru-merc.js" type="text/javascript"></script> <script src="http://russellbits.com/labs/jvectormap-with-lines/assets/scripts/svg.js" type="text/javascript"></script> <script src="http://russellbits.com/labs/jvectormap-with-lines/assets/scripts/svg.path.js" type="text/javascript"></script> <style type="text/css"> @font-face { font-family: "BebasNeue_Bold"; src: url("fonts/BebasNeue_Bold.otf"); } body { background: url("img/bg.png") repeat scroll 0 0; margin: 0; padding: 0; font-family: "BebasNeue_Bold"; position:relative; } #map { width: 100%; height: auto; } #text { border: 1px solid red; height: 315px; position: absolute; right: 0; top: 0; width: 560px; max-width:80%; margin:auto; bottom:0; left:0; background-color: #fff; display: none; z-index:10; padding: 25px; } .title { text-align: center; position:relative; } .title h2{ color: #006bb9; font-size: 60px; display: inline-block; vertical-align: middle; } .title img { margin: 0 20px; vertical-align: middle; } .title span { display: inline-block; position: relative; width: 120px; } .title span img { left: -70px; position: absolute; top: -110px; } .jvectormap-region.jvectormap-element { text-decoration: underline; } #mapContainer { position: relative; width: 100%; height: auto; } #svgMapOverlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 200; } line { stroke:rgb(0,0,0); stroke-width:3; } div#dark-bg { background: rgba(0, 0, 0, 0.5); display: none; height: 100%; position: absolute; top: 0; width: 100%; z-index:9; } a.close { color: red; position: absolute; right: 10px; text-align: center; text-decoration: none; top: 10px; } iframe { max-width: 100%; } @media all and (max-width: 1000px) { .title > img { margin: 0 10px; width: 45px; } .title h2 { font-size: 20px; } .title span { width: 50px; } .title span img { left: -10px; margin: 0; top: -40px; width: 86px; } } </style> <title>Будущему генералу 30</title> <script type="text/javascript"> $(window).load(function(){ var markers = [ { latLng: [48.6700797, 44.2265277], name: "название РЕгиона - Видео1", text: "https://www.youtube.com/embed/AsbJhoJywa8" }, { latLng: [50, 44.7997967], name: "название РЕгиона - Видео2", text: "https://www.youtube.com/embed/IsUg_vbq-gU" }, { latLng: [49, 45], name: "название РЕгиона - Видео3", text: "https://www.youtube.com/embed/Unli8AmVvJg" }, { latLng: [50, 43], name: "название РЕгиона - Видео4", text: "https://www.youtube.com/embed/obWfmsolXwE" }, { latLng: [51, 42], name: "название РЕгиона - Видео5", text: "https://www.youtube.com/embed/alUcdwrey1c" }, ]; var RColor = '#0064be'; var RColor2 = '#fedf00', activeRegions = { "RU-VGG" : RColor, /*"RU-KYA" : RColor,*/ }; activeRegions2 = { "RU-VGG" : RColor2, /* "RU-KYA" : RColor2,*/ }; $('a.close').on('click', function(e){ e.preventDefault(); $('#text').hide(); $('#dark-bg').hide(); }); $('#map').vectorMap({ map: "ru_merc", backgroundColor: "transparent", markerStyle: { initial: { image: "gif/marker.gif", } }, regionLabelStyle: { initial: { 'font-weight': 'normal', 'text-align': 'left', 'font-size': '32px', fill: '#050505', 'font-family': 'BebasNeue_Bold', 'position': 'relative', }, hover: { fill: 'red' } }, labels: { regions: { render: function(code){ var doShow = ['RU-VGG']; var Countries = ['Родимая сторона'] var index = doShow.indexOf(code); if ( index> -1) { return Countries[index]; } } } }, markers: markers, onMarkerClick: function (e, index) { $('#text').show(); $('#text > div iframe').attr('src', markers[index].text); $('#dark-bg').show(); }, regionsSelectable: true, regionsSelectableOne: true, regionStyle: { initial: { fill: "#278dce", "stroke-width": 3, }, selected: { fill: "#0b65b1", stroke: "#0b65b1", "stroke-width": 0, "stroke-opacity": 1 } }, series: { regions: [{ values: activeRegions, attribute: 'fill' }, { values: activeRegions2, attribute: 'stroke', }] }, }); /*$('text.jvectormap-region.jvectormap-element').each(function() { console.log($(this).attr("y")); $(this).attr("y",function(n, v){ return v -= v/100*50; });*/ }); </script> </head> <body> <div class="title"><img src="gif/star1.gif" /><h2>Будущему генералу</h2><span><img src="gif/30.gif" /></span><img src="gif/star1.gif" /></div> <div id="mapContainer"> <div id="map"></div> </div> <div id="text"><div><iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe></div><a href="#" class="close">X</a></div> <div id="dark-bg"></div> </body> </html> |
вот этот стайл скачайте
http://jvectormap.com/css/jquery-jvectormap-2.0.1.css локально правьте стили, пробовал только что, и позицию и бордюр подсказки, все работает. потом вот это уберите <link href="http://jvectormap.com/css/jquery-jvectormap-2.0.1.css" type="text/css" rel="stylesheet"> и вместо него вставьте свой 2) вариант, посмотрите в этом стайле названия элементов те которые нужны вам для редактирования. добавьте в свои стили и задавайте свойства CSS для них. они перезапишут "родные" стили но только в том случае если будут подключены или прописаны в коде ниже. |
К сожалению к label применить свои стили нельзя (бордер или top). Текущих стилей <text></text> в указанном вами файле нет. x y задается в js. Задать правильно path или line обьекты не получается.
Скрин |
![]() сделал в точку розовый бордюр, отодвинул на 100px вверх. |
Часовой пояс GMT +3, время: 22:28. |