Adding a Clickable Dot to a World Map Using JQuery VMap

Question

I've recently inherited a project which is using jqvmap. There's a map of the world with a column of clickable dots on it:

Whilst I have been able to find the code which seems to add those dots, I cannot figure out how this data was generated:

jQuery.fn.vectorMap('addMap', 'world_en', {
    "width": 950, "height": 550, "paths": {
        "id": { "path": "M781.68,324.4l-2.31,8.68l-12.53,4.", ... ... ... "name": "Pakistan" },
        "in": { "path": "M670.98,313.01l4.58-2.24l2.72-9,"... ... ... "name": "India" },
        "np": { "path": "M671.19,242.56l0.46,4.2, ... ... ... "name": "Greece" },

        "demo": {
            "path": "M922.59,148a8.59,8.59,0,1,1-8.59-8.59C918.76,139,922.59,143.27,922.59,148Z",
            "name": "Demo"
        },
        "Demo2": {
            "path": "M922.59,80A8.59,8.59,0,1,1,914,71.42C918.76,71,922.59,75.27,922.59,80Z",
            "name": "Demo2"
        },
        "Demo3": {
            "path": "M922.59,114a8.59,8.59,0,1,1-8.59-8.59C918.76,105,922.59,109.27,922.59,114Z",
            "name": "Demo3"
        },
        "Demo4": {
            "path": "M922.59,182a8.59,8.59,0,1,1-8.59-8.59C918.76,173,922.59,177.27,922.59,182Z",
            "name": "Demo4"
        },
        "Demo5": {
            "path": "M922.59,216a8.59,8.59,0,1,1-8.59-8.59C918.76,207,922.59,211.27,922.59,216Z",
            "name": "Demo5"
        }
}
});

I need to add another dot. Is there a tool which the previous developer has used?
Is there a guide somewhere which explains how to go about doing such a thing.

I've searched Google and looked at the Github site for vmap and have not found anything which could explain this.

Here's the code in jquery's ready function which set's the map up:

$(document).ready(function () {

    $("#hidCountrySU").val('');
    $("#hidServerCode").val('');
    $('#lblServerName').text(' Select server to test ');
    $('#btnSubmitServer').attr('disabled', 'disabled');

    // List of Regions we'll let clicks through for
    let enabledRegions = ['demo', 'demo2', 'demo3', 'demo4', 'demo5'];

    let map = null;
    // Store currentRegion
    let currentRegion = 'demo';

    map = $('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#F90606',
        enableZoom: false,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        colors: {
            demo: '#F78774',
            demo2: '#F78774',
            demo3: '#F78774',
            demo4: '#F78774',
            demo5: '#F78774'
        },
        normalizeFunction: 'polynomial',
        selectedRegions: ['aue'],
        onRegionClick: function (event, code, region) {
            // Check if this is an eabled region, and not the current selected on
            if (enabledRegions.indexOf(code) === -1) {
                // Not an enabled region
                event.preventDefault();
            } else {
                // Enabled region. Update newly selected region.
                currentRegion = code;
                $('.selectedRegionColor').removeClass('selectedRegionColor');
                $('#jqvmap1_' + code).addClass('selectedRegionColor');
            }
        },
        onRegionSelect: function (event, code, region) {
            localStorage.setItem("locationSelected", "true");
        
            if (code == 'demo') {
                $("#hidCountrySU").val('countryAU');
                $("#hidServerCode").val('demo');
                $('#lblServerName').text(' demo testing ');
                $('#btnSubmitServer').removeAttr('disabled');
            } else if (code == 'demo2') {
                $("#hidCountrySU").val('countryAU');
                $("#hidServerCode").val('demo2');
                $('#lblServerName').text(' demo2 testing ');
                $('#btnSubmitServer').removeAttr('disabled');
            } else if (code == 'demo3') {
                $("#hidCountrySU").val('countryAU');
                $("#hidServerCode").val('Demo3');
                $('#lblServerName').text(' Demo3 testing ');
                $('#btnSubmitServer').removeAttr('disabled');
            } else if (code == 'demo4') {
                $("#hidCountrySU").val('countryAU');
                $("#hidServerCode").val('demo4');
                $('#lblServerName').text(' B Demo ');
                $('#btnSubmitServer').removeAttr('disabled');
            } else if (code == 'demo5') {
                $("#hidCountrySU").val('countryAU');
                $("#hidServerCode").val('demo5');
                $('#lblServerName').text(' demo5 ');
                $('#btnSubmitServer').removeAttr('disabled');
          

            if ($("#form_ServerSubmitFromServer").length === 1) {

                $("#form_ServerSubmitFromServer").submit();
            }
            else if ($("#form_ServerSubmitFormServer2").length === 1) {

                $("#form_ServerSubmitFormServer2").submit();
            }

          
        },
        onLabelShow: function (event, label, code) {
            if (enabledRegions.indexOf(code) === -1) {
                event.preventDefault();
            }
        }
    });

});

Obviously the first snippet is extending the vectorMap.

I can only assume the previous dev used some kind of image editing program like Inkscape to add the dot and somehow get the path for it. But I just don't know.

Thanks