xxxxxxxxxx1
<div class="container my-4">2
<p>3
<strong4
>Bootstrap maps enable you to display geographical data in an interesting way.</strong5
>6
</p>7
8
<hr/>9
10
<p class="font-weight-bold">Basic examples</p>11
12
<p>13
You will <strong>find the code structure for this example in the tabs on the left</strong>. For even <strong>more examples, resources & customization options</strong> click the red <button class="btn btn-danger btn-sm">DOCS</button> button in the upper left corner. 14
</p>15
16
<div class="border p-5 mb-5">17
<!-- Copy this code to have a working example -->18
<div class="vector-map" id="map-1" data-mdb-select-region="CA"></div>19
<p class="px-3">Selected: <strong id="map-1-selection">Canada</strong></p>20
<!--/ Copy this code to have a working example -->21
</div>22
23
<div class="border p-5 mb-5">24
<!-- Copy this code to have a working example -->25
<div class="vector-map" data-mdb-map="africa"></div>26
<!--/ Copy this code to have a working example -->27
</div>28
29
<div class="border p-5 mb-5">30
<!-- Copy this code to have a working example -->31
<div class="vector-map" data-mdb-map="europe"></div>32
<!--/ Copy this code to have a working example -->33
</div>34
35
</div>1
1
xxxxxxxxxx1
const map = document.getElementById('map-1');2
const selectedCountry = document.getElementById('map-1-selection');3
4
map.addEventListener('select', (e) => {5
selectedCountry.innerText = e.selected ? e.selected.title : '-';6
});7
8
Console errors: 0