は、私が2 jvectormapsマージしようとしている二つのマップ

Question

マージjvectormap：italy-regionsとitaly-provincesを、私 はちょうどマップは、地域や地方の両方でdiveded持っていてもdrill-down exampleまたはそれに似た何かを達成したいと思います。
私はitaly-provincesマップ内のすべての州で一つだけのスクリプトですので、各領域のマップを取得するためのメイン機能は役に立たないので、私はデモのようmultimapを使用することはできませんと思う：このpen Iに

mapUrlByCode: function(code, multiMap){ 
    return '/js/us-counties/jquery-jvectormap-data-'+ 
     code.toLowerCase()+'-'+ 
     multiMap.defaultProjection+'-en.js'; 
} 

私は達成しようとしているものに似た何かを再現しました。
2つのマップを使用していて、最初のマップのランダムな領域をクリックすると、2つ目のマップはズームされないので、2つのマップは同期していないように見えるため、このソリューションは本当に悪いです。 誰かが、私が必要とするものを達成するための方法を知っているか、示唆することができますか？

Answer 1

幸いにも、偉大なjVectorMapは複数の地域に焦点を当てているので、必要なのは地域と地域の関連付けを作成してその機能を2回呼び出すことです。

HTML：：

<div id="map-provinces"></div> 
<div id="map-regions"></div> 

CSS：

#map-provinces{ 
    height:500px; 
    width: 500px; 
    left:-500px; 
    opacity:0.5; 
} 
#map-regions{ 
    top: 8px; /* Body margin wasn't set correctly in the CodePen */ 
    position : absolute; 
    height:500px; 
    width: 500px; 
    opacity:0.5; 
} 

は、私は約 州と 地域より "明示的な" 何らかの方法であることを少しあなたのコードをrevorkedここでは、シチリアの地域とどのようにそれを行うのですか、この例をProviの全リストで完成させるまでですNCEコード：心の中で、あなたは簡単に、jVectorMapのウェブサイト上で提供ドリルダウンサンプルを実装し、両方のマップが正しく領域クリックでズームした後に整列してい、下のこの絵のようにできることを

var provinces ={"IT-82": ["TP","PA","AG","CL","EN","ME","CT","RG","SR"]}; 

$('#map-provinces').vectorMap({ 
    map: 'it_mill' 
}); 
$('#map-regions').vectorMap({ 
    map: 'it_regions_mill', 
    backgroundColor : 'white', 
    zoomOnScroll : false, 
    zoomMin : 0, 
    zoomMax :220, 
    regionStyle :{ 
    initial: { 
     fill: 'blue', 
     "fill-opacity": 1, 
     stroke: 'none', 
     "stroke-width": 0, 
     "stroke-opacity": 1 
    }, 
    hover: { 
     "fill-opacity": 1, 
     cursor: 'pointer' 
    }, 
    selected: { 
     fill: 'blue', 
     "fill-opacity": 1, 
    }, 
    selectedHover: { 
     "fill-opacity": 1, 
     cursor: 'pointer' 
    } 
    }, 
    onRegionClick: function(e, code, isSelected, selectedRegions){ 
    var codes = []; 
    provinces[code].forEach(function(province) { 
     codes.push("IT-"+province); 
    }); 
    $('#map-regions').vectorMap('get','mapObject').setFocus({region: code}); 
    $('#map-provinces').vectorMap('get', 'mapObject').setFocus({regions: codes}); 
    } 
}); 

聖霊降臨祭あなたはCodePenでそれをやったように、両方の重複マップが表示されます：私は最初のマップに第2のマップをズームアウトした場合