79 lines
1.9 KiB
HTML
79 lines
1.9 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="container-fluid py-2">
|
|
<div class="row min-vh-80">
|
|
<div class="col-12">
|
|
<div class="card h-100">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
|
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
|
<h5 class="text-white text-capitalize ps-3">Vector Map</h5>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="vector-map" class="mt-5 min-height-500"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include "includes/footer.html" %}
|
|
</div>
|
|
|
|
{% endblock content %}
|
|
|
|
{% block extra_js %}
|
|
|
|
|
|
<script src="{% static "assets/js/plugins/world.js" %}"></script>
|
|
<script>
|
|
// Initialize the vector map
|
|
var map = new jsVectorMap({
|
|
selector: "#vector-map",
|
|
map: "world_merc",
|
|
zoomOnScroll: false,
|
|
zoomButtons: false,
|
|
selectedMarkers: [1, 3],
|
|
markersSelectable: true,
|
|
markers: [{
|
|
name: "USA",
|
|
coords: [40.71296415909766, -74.00437720027804]
|
|
},
|
|
{
|
|
name: "Germany",
|
|
coords: [51.17661451970939, 10.97947735117339]
|
|
},
|
|
{
|
|
name: "Brazil",
|
|
coords: [-7.596735421549542, -54.781694323779185]
|
|
},
|
|
{
|
|
name: "Russia",
|
|
coords: [62.318222797104276, 89.81564777631716]
|
|
},
|
|
{
|
|
name: "China",
|
|
coords: [22.320178999475512, 114.17161225541399],
|
|
style: {
|
|
fill: '#E91E63'
|
|
}
|
|
}
|
|
],
|
|
markerStyle: {
|
|
initial: {
|
|
fill: "#e91e63"
|
|
},
|
|
hover: {
|
|
fill: "E91E63"
|
|
},
|
|
selected: {
|
|
fill: "E91E63"
|
|
}
|
|
},
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
{% endblock extra_js %} |