I am experiencing an issue with the functionality of my amCharts maps. Whenever I refresh the page, the circles that are supposed to be displayed disappear. However, when I zoom in, the circles reappear.
This problem has me puzzled, and I'm not sure if it's due to the "custom" content management system (CMS) that my company uses or if there is another underlying issue. I even tried running the map on my personal website, but the same issue persists. Since I'm relatively new to working with amCharts and JavaScript, I'm at a loss for how to resolve this problem.
<!-- 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/themes/animated.js"></script>
<!-- Chart code -->
<script>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create a new instance of the map
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set the map definition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Miller();
// Create the polygon series for the map
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
// Exclude Antarctica
polygonSeries.exclude = ["AQ"];
// Use GeoJSON data to load polygon (e.g., country names) onto map
polygonSeries.useGeodata = true;
// Configure the series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#F0F0F0");
// Create a hover state and set an alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#cccccc");
// Implement zoom control
chart.zoomControl = new am4maps.ZoomControl();
// Add image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.mapImages.template.propertyFields.longitude = "longitude";
imageSeries.mapImages.template.propertyFields.latitude = "latitude";
imageSeries.mapImages.template.propertyFields.url = "url";
imageSeries.data = [ {
...
// Add events to recalculate the map position when the map is moved or zoomed
chart.events.on( "mappositionchanged", updateCustomMarkers );
// This function creates HTML elements for the current images on the map
function updateCustomMarkers( event ) {
// Iterate through all of the images
imageSeries.mapImages.each(function(image) {
// Check if there is a corresponding HTML element
if (!image.dummyData || !image.dummyData.externalElement) {
// Create one
image.dummyData = {
externalElement: createCustomMarker(image)
};
}
// Reposition the element based on coordinates
var xy = chart.geoPointToSVG( { longitude: image.longitude, latitude: image.latitude } );
image.dummyData.externalElement.style.top = xy.y + 'px';
image.dummyData.externalElement.style.left = xy.x + 'px';
});
}
// This function creates and returns a new marker element
function createCustomMarker( image ) {
var chart = image.dataItem.component.chart;
// Create a holder
var holder = document.createElement( 'div' );
holder.className = 'map-marker';
holder.title = image.dataItem.dataContext.title;
holder.style.position = 'absolute';
// Add a link if applicable
if ( undefined != image.url ) {
holder.onclick = function() {
window.location.href = image.url;
};
holder.className += ' map-clickable';
}
// Create the dot
var dot = document.createElement( 'div' );
dot.className = 'dot';
holder.appendChild( dot );
// Create the pulse
var pulse = document.createElement( 'div' );
pulse.className = 'pulse';
holder.appendChild( pulse );
// Append the marker to the map container
chart.svgContainer.htmlElement.appendChild( holder );
$(holder).tooltip({});
return holder;
}
</script>
I would greatly appreciate any assistance in ensuring that both the circles and the map display upon page load. Thank you.