Django

templates/pages/map.html

@@ -0,0 +1,79 @@
+{% 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 %}