64 lines
1.3 KiB
JavaScript
64 lines
1.3 KiB
JavaScript
import jsVectorMap from "jsvectormap";
|
|
import "jsvectormap/dist/maps/world";
|
|
|
|
const map01 = () => {
|
|
const mapSelectorOne = document.querySelectorAll("#mapOne");
|
|
|
|
if (mapSelectorOne.length) {
|
|
const mapOne = new jsVectorMap({
|
|
selector: "#mapOne",
|
|
map: "world",
|
|
zoomButtons: false,
|
|
|
|
regionStyle: {
|
|
initial: {
|
|
fontFamily: "Outfit",
|
|
fill: "#D9D9D9",
|
|
},
|
|
hover: {
|
|
fillOpacity: 1,
|
|
fill: "#465fff",
|
|
},
|
|
},
|
|
markers: [
|
|
{
|
|
name: "Egypt",
|
|
coords: [26.8206, 30.8025],
|
|
},
|
|
{
|
|
name: "United Kingdom",
|
|
coords: [55.3781, 3.436],
|
|
},
|
|
{
|
|
name: "United States",
|
|
coords: [37.0902, -95.7129],
|
|
},
|
|
],
|
|
|
|
markerStyle: {
|
|
initial: {
|
|
strokeWidth: 1,
|
|
fill: "#465fff",
|
|
fillOpacity: 1,
|
|
r: 4,
|
|
},
|
|
hover: {
|
|
fill: "#465fff",
|
|
fillOpacity: 1,
|
|
},
|
|
selected: {},
|
|
selectedHover: {},
|
|
},
|
|
|
|
onRegionTooltipShow: function (tooltip, code) {
|
|
if (code === "EG") {
|
|
tooltip.selector.innerHTML =
|
|
tooltip.text() + " <b>(Hello Russia)</b>";
|
|
}
|
|
},
|
|
});
|
|
}
|
|
};
|
|
|
|
export default map01;
|