JVectorMap プラグインの 個々の領域とホバーの色を設定し、データのない領域をデフォルトの白のままにしたいと思います。
ここまでで、スケール データを取り除き、カラー コードに置き換えました (以下のコードを参照)。これは素晴らしいですが、ホバー データを追加する方法もわかりません。
可能であれば、document.body.style.cursor のデータも追加して、個々の領域 (たとえば、エンティティが取引をブロックされている場所) をオフにできるようにしたいと考えています。アクティブなリンクのようです。
また、そこにパネルを開くためのコードがあることにも気付くでしょう。これは、データがある各地域の個別のコンテンツを含む完全なポップアップ div を表示するためのものです。継承されたコードなので、正直なところ、どのように機能するのかわかりません。
忘れ物がありましたら、お知らせください。
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#map_custom').vectorMap({
map: 'world_mill_en',
backgroundColor : "#b8b8b8",
regionStyle : {
initial : {
fill : "white",
"fill-opacity" : 1,
stroke : "none",
"stroke-width" : 0,
"stroke-opacity" : 1
},
hover : {
"fill-opacity": 0.7,
},
selectedHover : {}
},
onRegionOver: function (event, code, region) {
document.body.style.cursor = "pointer";
},
onRegionOut: function (element, code, region) {
document.body.style.cursor = "default";
},
onRegionClick: function(event, code, region){
if (code == "CA") {window.location = 'CalRamic-distributors-Canada.html'}
if (code == "US") {window.location = 'CalRamic-distributors-USA.html'}
if (code == "IE") {
$(".panel").hide("fast");
$("#ireland").show("slow");
document.getElementById('test_data').innerHTML=code;
}
if (code == "GB") {
$(".panel").hide("fast");
$("#unitedkingdom").show("slow");
document.getElementById('test_data').innerHTML=code;
}
if (code == "ES") {
$(".panel").hide("fast");
$("#spain").show("slow");
document.getElementById('test_data').innerHTML=code;
}
if (code == "PT") {
$(".panel").hide("fast");
$("#portugal").show("slow");
document.getElementById('test_data').innerHTML=code;
}
if (code == "IL") {
$(".panel").hide("fast");
$("#israel").show("slow");
document.getElementById('test_data').innerHTML=code;
}
// I've got a LOT more countries in my code, but you don't need all of them
else if (code){
event.preventDefault();
}
},
series: {
regions: [{
values: sample_data
}]
}
});
/* Close the Panel */
$("body").click(function(e) {
if (e.target.id == "close" || $(e.target).parents("#close").size())
{
$(".panel").hide("slow");
}
});
})
現在、このコードは次のような形式の sample_data.js ファイルからカラー データを取得します。
var sample_data = {
"CA": '#0071a4',
"US": '#0071a4',
"IE": '#0071a4',
"GB": '#0071a4',
"ES": '#0071a4',
}
ここのコミュニティのおかげで、私は初心者にしてはかなり上達しましたが、jvectormap をこれまで以上に使いこなすよう求められました。悲しいことに、私はこのプログラミング コードだけが危険なので、専門家に連絡しています。