Need help: "Uncaught TypeError: undefined is not a function"

First of all, your map looks awesome!

Back to the issue. It seems you are creating two instances of the map. First one is created in container “amchart1” which does not exist.

The second one is created in “amchart2” which exists. You are actually seeing the second map.

However, all the related functions and events are defined twice as well. Map instances are also assigned to the same “map” variable which might be confusing JavaScript, hence the errors.

If the first instance of the map is not needed, I strongly suggest you remove that from your code.

martynasma,

Thank you for the kind words on the map and for the suggestions!

I’ve opened the Javascript Console (should have done this ages ago) and found the multiple container issue I’m just having a bit of trouble isolating the problem.

For example, as you can see from the JS Fiddle here https://jsfiddle.net/fbtmzybo/5/ (which indeed works perfectly!), I have a few possible items that are interfering with the typical variables of the plug in. I think it boils down to the %CHART% replacement. This includes the legend that allows users to deselect groups and have them disappear from the maps as wells as the gray description box at the bottom which populates when clicking on a country.

I discovered that my problem with the multiple containers which you pointed out above (thanks again!) were fixed when I changed %CHART%” to “amchart1” in the following lines:

<div id="amchart1" style="width: 100%px; height: 400px;"></div>
var amchart1 = AmCharts.makeChart("amchart1", {

This change preserves some of the map functionality (it removes the multiple container issues) but disables the ability to deselected the groups using by toggling the legend and the feature of having details appear in the gray box below when clicking on a country.

Do you have any further suggestions on what to try?

Thanks,
Jeffrey

Well,

It appears you still have two chart instances (and related code) on the same page. Do you perhaps include a shortcode twice? If you don’t need both instances on the page you should get rid of one of them.

But the real issue is that you are assigning a map instance to variable “amchart1” but later are still referencing variable “map” to add listeners, hence legend interactions not working:

map.addListener('init', function() {

My advise: instead of harcoding variable names like “map” or “amchart1” simply use “%CHART%” in the code:

var %CHART% = AmCharts.makeChart("%CHART%", {
    type: "map",
    ....
});

%CHART%.addListener("clickMapObject", function(event) {
    document.getElementById("info").innerHTML = '<p><b>' + event.mapObject.title + '</b></p><p>' + event.mapObject.info + '</p>';
});

%CHART%.hiddenLegendItems = {};
%CHART%.addListener('init', function() {
    %CHART%.legend.switchable = true;
    %CHART%.legend.addListener('clickMarker', AmCharts.myHandleLegendClick);
    %CHART%.legend.addListener('clickLabel', AmCharts.myHandleLegendClick);

    function toggleMapObjectAlpha(e) {
        var alpha = e.type == "rollOverMapObject" ? 0.9 : 0.9;
        e.event.target.setAttribute("fill-opacity", alpha);
    }
    %CHART%.addListener('rollOverMapObject', toggleMapObjectAlpha);
    %CHART%.addListener('rollOutMapObject', toggleMapObjectAlpha);
});

AmCharts.myHandleLegendClick = function(event) {
    var groupId = event.dataItem.groupId;
    var map = event.chart;
    if (undefined !== event.dataItem.hidden && event.dataItem.hidden) {
        event.dataItem.hidden = false;
        map.showGroup(groupId);
    } else {
        event.dataItem.hidden = true;
        map.hideGroup(groupId);
    }
    map.legend.validateNow();
}

As well as in HTML box:

<div id="%CHART%" style="width: 100%px; height: 400px;"></div>

Thanks! I sort of figured something was interfering with the other references and the %CHART% variables of the code.

Per your suggestion, I have changed all references to “map” in my code to %CHART% , you can view the sample code here: https://weekendblitz.com/flyingblue-ammap-troubleshoot/

Your above suggestion has fixed a great number of the issues but I am still experiencing the problem of having 2 instances of the map on the page.

I only have one instance of the short code on the sample page and the sample appears perfectly when using the “Preview chart or map” option with in the Charts and Maps plugin page.

If it helps to troubleshoot, here is what I have in the “Resources pane”:

https://www.amcharts.com/lib/3/ammap.js
https://www.amcharts.com/lib/3/maps/js/worldLow.js

This is all I have in the HTML pane:

<div id="body" style="font-family: Verdana; font-size: 12px;padding: 10px;"></div>
<div id="%CHART%" style="width: 100%px; height: 400px;"></div>
<div id="info" style="padding: 10px; margin: 5px; background-color: #dedede;font-family: Verdana; font-size: 12px;padding: 10px;"></div>
<div id="description" style="font-family: Verdana; font-size: 12px;padding: 10px;"></div>

Here’s a shortened version of what’s in the JavaScript pane:

var %CHART% = AmCharts.makeChart("%CHART%", {
    type: "map",
    showDescriptionOnHover: "true",
    mouseWheelZoomEnabled: "true",
    "theme": "none",
    pathToImages: "https://www.amcharts.com/lib/3/images/",

    dataProvider: {
        map: "worldLow",
        zoomLatitude: 46.214708,
        zoomLevel: 1,
        zoomLongitude: 10.347274,
        areas: [{
        title: "American Samoa",
        id: "AS",
        color: "#3DD847",
        groupId: "100kmiles",
      description: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: 100k miles<br>Premium Economy: n/a miles<br>Business: 250k miles",
      info: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: 100k miles<br>Premium Economy: n/a miles<br>Business: 250k miles"
    }, {
........
{
        title: "Falkland Islands (Malvinas)",
        id: "FK",
        color: "#DDDDDD",
        groupId: "n/a",
      description: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: n/a miles<br>Premium Economy: n/a miles<br>Business: n/a miles",
      info: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: n/a miles<br>Premium Economy: n/a miles<br>Business: n/a miles"

        }]
    },

    areasSettings: {
        autoZoom: true,
        descriptionWindowBottom: "10",
        selectable: true,
        rollOverOutlineColor: "#FFFFFF",
        selectedColor: "#848383",
        rollOverColor: "#CC0000",
        alpha: 0.8,
        unlistedAreasAlpha: 0.6
    },

    zoomControl: {
        zoomControlEnabled: true,
        maxZoomLevel: 8
    },

    legend: {
        width: 260,
        marginRight: 27,
        marginLeft: 27,
        equalWidths: true,
        maxColumns: 2,
        backgroundAlpha: 0.5,
        backgroundColor: "#FFFFFF",
        borderColor: "#FFFFFF",
        borderAlpha: 1,
        right: 0,
        horizontalGap: 10,
        switchable: true,
        data: [{
            title: "25k miles",
            color: "#618ADA",
            groupId: "25kmiles"
        }, {
            title: "30k miles",
            color: "#FFCC33",
            groupId: "30kmiles"
        }, {
            title: "35k miles",
            color: "#66CC99",
            groupId: "35kmiles"
        }, {
            title: "50k miles",
            color: "#D54490",
            groupId: "50kmiles"
        }, {
            title: "60k miles",
            color: "#A041D5",
            groupId: "60kmiles"
        }, {
            title: "80k miles",
            color: "#FF9349",
            groupId: "80kmiles"
        }, {
            title: "100k miles",
            color: "#3DD847",
            groupId: "100kmiles"
        }]
    }

});

%CHART%.addListener("clickMapObject", function(event) {
    document.getElementById("info").innerHTML = '<p><b>' + event.mapObject.title + '</b></p><p>' + event.mapObject.info + '</p>';
});

%CHART%.hiddenLegendItems = {};
%CHART%.addListener('init', function() {
    %CHART%.legend.switchable = true;
    %CHART%.legend.addListener('clickMarker', AmCharts.myHandleLegendClick);
    %CHART%.legend.addListener('clickLabel', AmCharts.myHandleLegendClick);

    function toggleMapObjectAlpha(e) {
        var alpha = e.type == "rollOverMapObject" ? 0.9 : 0.9;
        e.event.target.setAttribute("fill-opacity", alpha);
    }
    %CHART%.addListener('rollOverMapObject', toggleMapObjectAlpha);
    %CHART%.addListener('rollOutMapObject', toggleMapObjectAlpha);
});

AmCharts.myHandleLegendClick = function(event) {
    var groupId = event.dataItem.groupId;
    if (undefined !== event.dataItem.hidden && event.dataItem.hidden) {
        event.dataItem.hidden = false;
        %CHART%.showGroup(groupId);
    } else {
        event.dataItem.hidden = true;
        %CHART%.hideGroup(groupId);
    }
    %CHART%.legend.validateNow();
};

When you view the sample page https://weekendblitz.com/flyingblue-ammap-troubleshoot/ you’ll find that the description box at the bottom is now working fine as is the legend toggle but the map panning feature is still working improperly and it all seems to be a result of the multiple instances of the map being called on the page.

It seems like the HTML portion of %CHART% is assigned an ID of “amchart2” but then the first instance of the map is assigned an ID of amchart1 then when all of amchart1 code finishes, it immediately restarts the code with an ID of amchart2. I can’t quite figure out why it’s duplicating the code. Again, this doesn’t happen in the preview section and doesn’t happen in JS Fiddle, just on the live page when I use the Amchart Plugin shortcode.

Thanks again!

Jeffrey

Hey Jeffrey,

I’m sorry I seem to have missed your last message. The map looks fine on your link.

Were you able to resolve all the issues?