Support » Plugin: amCharts: Charts and Maps » Map not showing after publish

  • Hi,

    When i want to add a map on wordpress. The map appears in preview mode, but it does not appear on the web page when publishing.

    i just add on wp [amcharts id=”flightmap”]

    and just only work on firefox.

    My code at below.

    am4core.ready(function() {

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

    // Create map instance
    var chart = am4core.create(“$CHART$”, am4maps.MapChart);

    var interfaceColors = new am4core.InterfaceColorSet();

    // Set map definition
    chart.geodata = am4geodata_worldLow;

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

    // Export
    chart.exporting.menu = new am4core.ExportMenu();

    // Zoom control
    chart.zoomControl = new am4maps.ZoomControl();

    // Data for general and map use
    var originCities = [
    {
    “id”: “Niamey”,
    “title”: “Niamey”,
    “destinations”: [“istanbul”, “dakar”],
    “latitude”: 13.476991,
    “longitude”: 2.177187,
    “scale”: 1.5,
    “zoomLevel”: 2.74,
    “zoomLongitude”: -1.669922,
    “zoomLatitude”: 21.297564
    },
    ];

    var destinationCities = [{
    “id”: “istanbul”,
    “title”: “Istanbul”,
    “latitude”: 41.270917,
    “longitude”: 28.727531
    }, {
    “id”: “dakar”,
    “title”: “Dakar”,
    “latitude”: 14.670812,
    “longitude”: -17.067497
    }];

    // Default to Niamey view
    //chart.homeGeoPoint = { “longitude”: originCities[0].zoomLongitude, “latitude”: originCities[0].zoomLatitude };
    //chart.homeZoomLevel = originCities[0].zoomLevel;

    var targetSVG = “M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z”;
    var planeSVG = “m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47”;

    // Texts
    var labelsContainer = chart.createChild(am4core.Container);
    labelsContainer.isMeasured = false;
    labelsContainer.x = 80;
    labelsContainer.y = 27;
    labelsContainer.layout = “horizontal”;
    labelsContainer.zIndex = 10;

    var plane = labelsContainer.createChild(am4core.Sprite);
    plane.scale = 0.15;
    plane.path = planeSVG;
    plane.fill = am4core.color(“#cc0000”);

    var title = labelsContainer.createChild(am4core.Label);
    title.text = “Flights from Niamey”;
    title.fill = am4core.color(“#cc0000”);
    title.fontSize = 20;
    title.valign = “middle”;
    title.dy = 2;
    title.marginLeft = 15;

    // The world
    var worldPolygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    worldPolygonSeries.useGeodata = true;
    worldPolygonSeries.fillOpacity = 0.6;
    worldPolygonSeries.exclude = [“AQ”];

    // Origin series (big targets, Niamey and Vilnius)
    var originImageSeries = chart.series.push(new am4maps.MapImageSeries());

    var originImageTemplate = originImageSeries.mapImages.template;

    originImageTemplate.propertyFields.latitude = “latitude”;
    originImageTemplate.propertyFields.longitude = “longitude”;
    originImageTemplate.propertyFields.id = “id”;

    originImageTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
    originImageTemplate.nonScaling = true;
    originImageTemplate.tooltipText = “{title}”;

    originImageTemplate.setStateOnChildren = true;
    originImageTemplate.states.create(“hover”);

    originImageTemplate.horizontalCenter = “middle”;
    originImageTemplate.verticalCenter = “middle”;

    var originHitCircle = originImageTemplate.createChild(am4core.Circle);
    originHitCircle.radius = 11;
    originHitCircle.fill = interfaceColors.getFor(“background”);

    var originTargetIcon = originImageTemplate.createChild(am4core.Sprite);
    originTargetIcon.fill = interfaceColors.getFor(“alternativeBackground”);
    originTargetIcon.strokeWidth = 0;
    originTargetIcon.scale = 1.3;
    originTargetIcon.horizontalCenter = “middle”;
    originTargetIcon.verticalCenter = “middle”;
    originTargetIcon.path = targetSVG;

    var originHoverState = originTargetIcon.states.create(“hover”);
    originHoverState.properties.fill = chart.colors.getIndex(1);

    // when hit on city, change lines
    originImageTemplate.events.on(“hit”, function(event) {
    showLines(event.target.dataItem);
    })

    // destination series (small targets)
    var destinationImageSeries = chart.series.push(new am4maps.MapImageSeries());
    var destinationImageTemplate = destinationImageSeries.mapImages.template;

    destinationImageTemplate.nonScaling = true;
    destinationImageTemplate.tooltipText = “{title}”;
    destinationImageTemplate.fill = interfaceColors.getFor(“alternativeBackground”);
    destinationImageTemplate.setStateOnChildren = true;
    destinationImageTemplate.states.create(“hover”);

    destinationImageTemplate.propertyFields.latitude = “latitude”;
    destinationImageTemplate.propertyFields.longitude = “longitude”;
    destinationImageTemplate.propertyFields.id = “id”;

    var destinationHitCircle = destinationImageTemplate.createChild(am4core.Circle);
    destinationHitCircle.radius = 7;
    destinationHitCircle.fillOpacity = 1;
    destinationHitCircle.fill = interfaceColors.getFor(“background”);

    var destinationTargetIcon = destinationImageTemplate.createChild(am4core.Sprite);
    destinationTargetIcon.scale = 0.7;
    destinationTargetIcon.path = targetSVG;
    destinationTargetIcon.horizontalCenter = “middle”;
    destinationTargetIcon.verticalCenter = “middle”;

    originImageSeries.data = originCities;
    destinationImageSeries.data = destinationCities;

    // Line series
    var lineSeries = chart.series.push(new am4maps.MapLineSeries());
    lineSeries.mapLines.template.line.strokeOpacity = 0.5;

    chart.events.on(“ready”, function() {
    showLines(originImageSeries.dataItems.getIndex(0));
    })

    var currentOrigin;

    function showLines(origin) {

    var dataContext = origin.dataContext;
    var destinations = dataContext.destinations;
    // clear old
    lineSeries.mapLines.clear();
    lineSeries.toBack();
    worldPolygonSeries.toBack();

    currentOrigin = origin;

    if (destinations) {
    for (var i = 0; i < destinations.length; i++) {
    var line = lineSeries.mapLines.create();
    line.imagesToConnect = [origin.mapImage.id, destinations[i]];
    }
    }

    title.text = “Flights from ” + dataContext.title;

    chart.zoomToGeoPoint({ latitude: dataContext.zoomLatitude, longitude: dataContext.zoomLongitude }, dataContext.zoomLevel, true);
    }

    var graticuleSeries = chart.series.push(new am4maps.GraticuleSeries());
    graticuleSeries.mapLines.template.line.strokeOpacity = 0.05;

    });

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author martynasma

    (@martynasma)

    Do you get any errors in browser console?

    Hi,

    I am getting below error on Chrome Browser Console.

    ReferenceError: am4core is not defined
    at (index):94

    Thx

    Plugin Author martynasma

    (@martynasma)

    Is core.js in your Resources box?

    You can see my map config at below picture.
    It is coming automatically. Which folder should i check on my wp?

    My Config

    Thx

    Plugin Author martynasma

    (@martynasma)

    Look at your browser console. It contains some JS error that is not related to amCharts. Since it is a critical JS error it halts all further JS execution.

    Is it enough for page side?

    I add raw html section. and inserted [amcharts id=”flightmap”] code.

    https://ibb.co/fvg0HHk

    Thx

    Plugin Author martynasma

    (@martynasma)

    The error is coming from something else. Not amCharts block.

    Uncaught SyntaxError: Unexpected token '&'

    You’ll need to fix that.

    Ok i will try to fix it. After i will inform you.
    Your charts are very useful many thanks again.

    Hi, I have fixed my Uncaught SyntaxError: Unexpected token ‘&’ problem.
    And problem still continue. I cannot show map chart on my page.

    It gives below error

    ReferenceError: am4core is not defined (index):22
    at (index):11

    Thx

    Plugin Author martynasma

    (@martynasma)

    OK, it seems that you have some sort of plugin that makes amCharts libs load after actual chart code.

    In your chart code, try replacing this:

    am4core.ready(function() {

    With this:

    jQuery.ready(function() {

    • This reply was modified 7 months, 3 weeks ago by martynasma.

    Hi when i tried, also preview page is not working.
    But i tried version 3, now it is showing on my page old map.

    I think there is some mismatch with wordpress 5.4 and amcharts 4 plugin.
    Because if i choose version4, i can see maps on my preview page only.
    I cannot see the map on published page.

    Thx

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Map not showing after publish’ is closed to new replies.