نقشه وکتوری جهان#
به فرمهای متنی مانند <input> و <textarea> با استایلها، اندازهها، وضعیتهای فوکوس و غیره بهروزرسانی کنید.
<div class="mb-3">
<div id="world-map-markers" style="height: 360px"></div>
</div>
initWorldMapMarker() {
const map = new jsVectorMap({
map: 'world',
selector: '#world-map-markers',
zoomOnScroll: false,
zoomButtons: true,
markersSelectable: true,
markers: [
{ name: "گرینلند", coords: [72, -42] },
{ name: "کانادا", coords: [56.1304, -106.3468] },
{ name: "برزیل", coords: [-14.2350, -51.9253] },
{ name: "مصر", coords: [26.8206, 30.8025] },
{ name: "روسیه", coords: [61, 105] },
{ name: "چین", coords: [35.8617, 104.1954] },
{ name: "ایالات متحده", coords: [37.0902, -95.7129] },
{ name: "نروژ", coords: [60.472024, 8.468946] },
{ name: "اوکراین", coords: [48.379433, 31.16558] },
],
markerStyle: {
initial: { fill: "#5B8DEC" },
selected: { fill: "#ef5f5f" }
},
labels: {
markers: {
render: marker => marker.name
}
}
});
}
نقشه وکتوری کانادا#
به فرمهای متنی مانند <input> و <textarea> با استایلها، اندازهها، وضعیتهای فوکوس و غیره بهروزرسانی کنید.
<div class="mb-3">
<div id="canada-vector-map" style="height: 360px"></div>
</div>
initCanadaVectorMap() {
const map = new jsVectorMap({
map: 'canada',
selector: '#canada-vector-map',
zoomOnScroll: false,
regionStyle: {
initial: {
fill: '#5B8DEC'
}
}
});
}
نقشه وکتوری روسیه#
به فرمهای متنی مانند <input> و <textarea> با استایلها، اندازهها، وضعیتهای فوکوس و غیره بهروزرسانی کنید.
<div class="mb-3">
<div id="russia-vector-map" style="height: 360px"></div>
</div>
initRussiaVectorMap() {
const map = new jsVectorMap({
map: 'russia',
selector: '#russia-vector-map',
zoomOnScroll: false,
regionStyle: {
initial: {
fill: '#5d7186'
}
}
});
}
نقشه وکتوری عراق#
به فرمهای متنی مانند <input> و <textarea> با استایلها، اندازهها، وضعیتهای فوکوس و غیره بهروزرسانی کنید.
<div class="mb-3">
<div id="iraq-vector-map" style="height: 360px"></div>
</div>
initIraqVectorMap() {
const map = new jsVectorMap({
map: 'iraq',
selector: '#iraq-vector-map',
zoomOnScroll: false,
regionStyle: {
initial: {
fill: '#20c8e9'
}
}
});
}
نقشه وکتوری اسپانیا#
به فرمهای متنی مانند <input> و <textarea> با استایلها، اندازهها، وضعیتهای فوکوس و غیره بهروزرسانی کنید.
<div class="mb-3">
<div id="spain-vector-map" style="height: 360px"></div>
</div>
initSpainVectorMap() {
const map = new jsVectorMap({
map: 'spain',
selector: '#spain-vector-map',
zoomOnScroll: false,
regionStyle: {
initial: {
fill: '#ffe381'
}
}
});
}