xxxxxxxxxx1
<div id="map-colors" style="background-color: #bbdefb;"></div>2
<div class="p-3 border-top">3
<h6>Annual growth:</h6>4
<ul class="vector-map-legend">5
<li class="vector-map-legend__item my-2">6
<div class="vector-map-legend__color me-2" style="background-color: #b2ebf2;"></div>7
0-4%8
</li>9
<li class="vector-map-legend__item my-2">10
<div class="vector-map-legend__color me-2" style="background-color: #80deea;"></div>11
4-12%12
</li>13
<li class="vector-map-legend__item my-2">14
<div class="vector-map-legend__color me-2" style="background-color: #4dd0e1;"></div>15
12-25%16
</li>17
<li class="vector-map-legend__item my-2">18
<div class="vector-map-legend__color me-2" style="background-color: #26c6da;"></div>19
25-50%20
</li>21
<li class="vector-map-legend__item my-2">22
<div class="vector-map-legend__color me-2" style="background-color: #00bcd4;"></div>23
50-75%24
</li>25
<li class="vector-map-legend__item my-2">26
<div class="vector-map-legend__color me-2" style="background-color: #00acc1;"></div>27
> 75%28
</li>29
</ul>30
</div>xxxxxxxxxx1
#map-colors > div.vector-map-tooltip > :first-child {2
display:none;3
}xxxxxxxxxx1
const map = document.getElementById('map-colors');2
const mapInstance = new VectorMap(map, {3
strokeWidth: 0.2,4
readonly: true,5
fill: 'white',6
hover: false,7
colorMap: [{8
fill: '#B2EBF2',9
tooltip: 'test',10
regions: ['CN', 'PL', 'AU', 'NZ']11
},12
{13
fill: '#80DEEA',14
regions: ['FR', 'GB', 'NO', 'FI', 'IE',{15
id: 'RU',16
tooltip: "custom tooltip",17
}]18
},19
20
],21
});22
23
console.log(mapInstance) Console errors: 0