JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldUltra.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 400px;
}

JavaScript

var ports = [
        {label: "Santorini", longitude: 25.461509, latitude: 36.393156}
    ];

var map = am4core.create('chartdiv', am4maps.MapChart);

        map.geodata = am4geodata_worldUltra; 
        map.projection = new am4maps.projections.Miller();

var polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
        polygonSeries.useGeodata = true;

var imageSeries = map.series.push(new am4maps.MapImageSeries());

createPort(imageSeries, ports);

function createPort(imageSeries, ports) {
        var imageSeriesTemplate = imageSeries.mapImages.template;

        const rectangle = imageSeriesTemplate.createChild(am4core.Container);
        rectangle.background.fill = am4core.color("#FFFFFF");
        rectangle.stroke = am4core.color("#444444");
        rectangle.strokeWidth = 1;
        rectangle.width = 8;
        rectangle.height = 8;
        rectangle.verticalCenter = 'middle';
        rectangle.horizontalCenter = 'middle';
        rectangle.nonScaling = true;

        imageSeriesTemplate.propertyFields.latitude = "latitude";
        imageSeriesTemplate.propertyFields.longitude = "longitude";
        //imageSeriesTemplate.layout = 'absolute';
        
  
        //rectangle.tooltip = new am4core.Tooltip();
        rectangle.tooltipText = 'I am a tooltip.';
        rectangle.showTooltipOn = 'always';
        //rectangle.showTooltip();        
        
        imageSeries.data = ports;
}