Jsvectormap

JSVectorMap is a lightweight and interactive JavaScript library for rendering vector maps on web applications. It supports multiple map projections, markers, tooltips, and dynamic data visualization, making it ideal for displaying geographical information efficiently. To integrate JSVectorMap into your project, include the JSVectorMap library and use its API to customize and enhance your maps with real-time data.

Install from NPM

Install the Jsvectormap Maps JavaScript API in your project by including the following script tag in your HTML file:

npm install Jsvectormap --save

Add the jsvectormap css file link. 

<link src="assets/libs/jsvectormap/jsvectormap.min.css"></link>

Add the jsvectormap js file link. 

<script src="assets/libs/jsvectormap/jsvectormap.min.js"></script>
<script src="assets/libs/jsvectormap/maps/world.js"></script>

Below the example how to use the package and make it working ApexTree on any page.

HTML:

<div class="card-body">
    <div class="w-100 min-h-320px" id="world-map"></div>
</div>

Javascript:

var worldemapmarkers = new jsVectorMap({
    selector: "#world-map", // Use the correct selector
    map: 'world',
    zoomOnScroll: false,
    selectedMarkers: [0, 2], // Select specific markers (index-based)
    regionStyle: {
        initial: {
            stroke: "#9599ad",
            strokeWidth: 0.25,
            fillOpacity: 1,
        },
    },
    markersSelectable: true,
    markers: [
        { name: "Palestine", coords: [31.9474, 35.2272] },
        { name: "Russia", coords: [61.524, 105.3188] },
        { name: "Canada", coords: [56.1304, -106.3468] },
        { name: "Greenland", coords: [71.7069, -42.6043] },
    ],
    markerStyle: {
        initial: {
            fill: "#adb5bd" // Default marker color
        },
        selected: { fill: "var(--bs-primary)" },
        hover: { fill: "var(--bs-primary)" },
    },
    labels: {
        markers: {
            render: function (marker) {
                return marker.name; // Render the marker name
            }
        }
    }
});