English Espanol Japanese
Notifications
Critical alert: Server crash detected
Just now
Emiliya mentioned in you a comment
1h
Backup completed successfully
2h
Profile updated successfully
3h
Nikita sent you a friend request
Accept
2d
API updated
3d
View All
Theme
Sidebar

Map

  1. Home
  3. Graphs
  5. Map
Example
JsVectorMap 

<!--:Map css:-->
<link href="vendor/css/jsvectormap.min.css" rel="stylesheet">

<!--:Map HTML:-->
<div id="world-map-markers" class="w-full min-h-[230px]"></div>

<!--:Map Js:-->
<script src="vendor/js/jsvectormap.min.js"></script>
<script src="vendor/js/world.js"></script>
<script>
    new jsVectorMap({
        map: "world",
        selector: "#world-map-markers",
        zoomOnScroll: false,
        zoomButtons: false,
        zoomAnimate: false,
        panOnDrag: false,
        backgroundColor: "transparent",
        regionStyle: {
            initial: {
                fill: "var(--color-primary-subtle)"
            },
        },
        markers: [
            { coords: [40.71, -74], name: "New York" },
            { coords: [35.68, 139.69], name: "Tokyo" },
            { coords: [28.61, 77.20], name: "Delhi" },
            { coords: [40.42, -3.70], name: "Madrid" }
        ],
        markerStyle: {
            initial: {
                r: 6,
                fill: "var(--color-primary)",
                "fill-opacity": 0.9,
                stroke: "var(--color-primary-subtle)",
                "stroke-width": 3,
                "stroke-opacity": 0.6
            },
            hover: {
                fill: "var(--color-primary-deep)",
                "fill-opacity": 1,
                "stroke-width": 0
            }
        }
    });
</script>