Why can't I use this geojson stored on my s3 bucket with amcharts?

Question

I want to create a clickable map similar to one given here. If you click on the link it takes you to another page. I want to do a similar thing but with a geojson file I have for Italy. So following on from a previous question I made, I decided to use amcharts. Since I am new to javascript and html I decided to first play around with some relevant examples by just using my own GeoJSON file. Here is the code I am trying to use

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

<script>
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodataSource.url = "https://walruswondersitaly.s3.amazonaws.com/Regions.json"
chart.projection = new am4maps.projections.Miller();
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.mapPolygons.template.events.on("hit", function(ev) {
  chart.zoomToMapObject(ev.target);
});
var label = chart.chartContainer.createChild(am4core.Label);
</script>

The above code is adapted from an example given in the documentation

But when I tested it on codeopen and tried it in Wix it just says 'Unable to load file'. As you can see the GeoJSON file is stored as an object in amazon s3. I made sure the bucket was set to 'block all public access off' and read access was given to the public when I originally uploaded it to the bucket. Does anyone know what is going on?

Answer 1

I used another source and It worked. Its weird I think that your GeoJSON is malformed or something.

var chart2 = am4core.create("chartdiv2", am4maps.MapChart);
chart2.geodataSource.url = 'https://gist.githubusercontent.com/elboman/5ee92356f49875da7337/raw/7008305a4b065a76a2c5103cd7698d990c98661a/italian-regions.geojson';
chart2.projection = new am4maps.projections.Miller();
var polygonSeries = chart2.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.mapPolygons.template.events.on("hit", function(ev) {
  chart2.zoomToMapObject(ev.target);
});
var label2 = chart2.chartContainer.createChild(am4core.Label);
label2.text = "Italy";

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

#chartdiv, #chartdiv2 {
  width: 50%;
  height: 400px;
  float: left;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv2"></div>

With your JSON + id

var chart2 = am4core.create("chartdiv2", am4maps.MapChart);
chart2.geodataSource.url = 'https://raw.githubusercontent.com/Carlos123211/PeruGeoJson/master/italy.json';
chart2.projection = new am4maps.projections.Miller();
var polygonSeries = chart2.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.mapPolygons.template.events.on("hit", function(ev) {
  chart2.zoomToMapObject(ev.target);
});
var label2 = chart2.chartContainer.createChild(am4core.Label);
label2.text = "Italy";

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv2"></div>