To answer your first question, (function(){ is an anonymous function. However, this is not part of your problem. These are not js files that you are going to modify. These are simply files that need to be linked to your page to make the whole chart essentially function.

ammap.js contains basic map functionality and the worldhigh.js contains a HighRes very detailed map of the entire world (so be careful with that one it is very heavy).

The code you are going to want to modify is going to look more like this:

  <!-- Styles -->
    <style>
    #chartdiv {
      width: 100%;
      height: 500px;
    }

    </style>

    <!-- Resources -->
    <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/worldLow.js"></script>
    <script src="https://www.amcharts.com/lib/4/geodata/usaLow.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

    <!-- Chart code -->
    <script>
    am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create map instance
    var chart = am4core.create("chartdiv", am4maps.MapChart);

    // Set map definition
    chart.geodata = am4geodata_worldLow;

    // Set projection
    chart.projection = new am4maps.projections.Miller();

    // Series for World map
    var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
    worldSeries.exclude = ["AQ"];
    worldSeries.useGeodata = true;

    var polygonTemplate = worldSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = chart.colors.getIndex(0);
    polygonTemplate.nonScalingStroke = true;

    // Hover state
    var hs = polygonTemplate.states.create("hover");
    hs.properties.fill = am4core.color("#367B25");

    // Series for United States map
    var usaSeries = chart.series.push(new am4maps.MapPolygonSeries());
    usaSeries.geodata = am4geodata_usaLow;

    var usPolygonTemplate = usaSeries.mapPolygons.template;
    usPolygonTemplate.tooltipText = "{name}";
    usPolygonTemplate.fill = chart.colors.getIndex(1);
    usPolygonTemplate.nonScalingStroke = true;

    // Hover state
    var hs = usPolygonTemplate .states.create("hover");
    hs.properties.fill = am4core.color("#367B25");

    }); // end am4core.ready()
    </script>

    <!-- HTML -->
    <div id="chartdiv"></div>

This code was borrowed right from the amcharts demo site at https://www.amcharts.com/demos/multi-series-map/

This is using a multiseries map. I am not sure which one you are using, but you will want to navigate to the demo of that map and then copy the demo code from the bottom. DONT WORRY ABOUT THE JS FILES. Just link those to your page and then copy the demo code. The map should work out of the box.

My name is Minh Vuong Nguyen who is practicing duplicating AmChart’s interactive map. The error I am encountering is about the HTML code they provide in the link above.

After I have copy-pasted this link to my JavaScript, I have been looking at their JavaScript sourcecode, such as

<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldHigh.js" type="text/javascript"></script>

Nonetheless, as I come to the “ammap.js” and “worldHigh.js” file, the code lines is very complicated because:

1. A command like: (function)(){} is unknown to me, as you cannot use the bracket before announcing the function. Furthermore, some lines of code such as window.AmCharts?d=window.AmCharts:( is very complicated.
2. The order from the source website itself is all over the place. I do not know how to organize it line-by-line like the normal JavaScript.

(function(){
    var d;
    window.AmCharts?d=window.AmCharts:(
        d={},window.AmCharts=d,
        d.themes={},
        d.maps={},
        d.inheriting={},d.charts=[],d.onReadyArray=[],d.useUTC=!1,d.updateRate=60,d.uid=0,
        d.lang={},d.translations={},d.mapTranslations={},d.windows={},d.initHandlers=[],d.amString="am",d.pmString="pm");d.Class=function(a){var b=function(){arguments[0]!==d.inheriting&&(this.events={},this.construct.apply(this,arguments))};a.inherits?(b.prototype=new a.inherits(d.inheriting),b.base=a.inherits.prototype,delete a.inherits):(b.prototype.createEvents=function(){for(var a=0;a<arguments.length;a++)this.events[arguments[a]]=[]},b.prototype.listenTo=function(a,b,c){this.removeListener(a,b,c);

Please kind me provide me with the appropriate approaches regarding this issue. I would love to thank you in advance.