I am creating a Map chart using amCharts5.
The data to be drawn includes latitude and longitude, title, and date as shown below.
var spots = [
{"date":1,"title":"point1","latitude":42.1613,"longitude":139.452},{"date":1,"title":"point2","latitude":41.3597,"longitude":139.806},
{"date":1,"title":"point3","latitude":40.3597,"longitude":138.605},
{"date":2,"title":"point1","latitude":42.1613,"longitude":139.452},
{"date":2,"title":"point2","latitude":41.3597,"longitude":139.806},
];
Drawing all the data was successful with the code below.
<script>
var spots = [{
"date": 1,
"title": "point1",
"latitude": 42.1613,
"longitude": 139.452
},
{
"date": 1,
"title": "point2",
"latitude": 41.3597,
"longitude": 139.806
},
{
"date": 1,
"title": "point3",
"latitude": 40.3597,
"longitude": 138.605
},
{
"date": 2,
"title": "point1",
"latitude": 42.1613,
"longitude": 139.452
},
{
"date": 2,
"title": "point2",
"latitude": 41.3597,
"longitude": 139.806
},
];
am5.ready(function() {
var root = am5.Root.new("spcsmap");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "rotateX",
panY: "translateY",
projection: am5map.geoMercator(),
homeZoomLevel: 1.8,
homeGeoPoint: {
longitude: 135,
latitude: 35
}
}));
chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
loadGeodata('JP');
var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
var pointSeries = chart.series.push(am5map.ClusteredPointSeries.new(root, {}));
pointSeries.set("clusteredBullet", function(root) {
var container = am5.Container.new(root, {
cursorOverStyle: "pointer"
});
var circle1 = container.children.push(am5.Circle.new(root, {
radius: 8,
tooltipY: 0,
fill: am5.color(0xff8c00)
}));
var circle2 = container.children.push(am5.Circle.new(root, {
radius: 12,
fillOpacity: 0.3,
tooltipY: 0,
fill: am5.color(0xff8c00)
}));
var circle3 = container.children.push(am5.Circle.new(root, {
radius: 16,
fillOpacity: 0.3,
tooltipY: 0,
fill: am5.color(0xff8c00)
}));
var label = container.children.push(am5.Label.new(root, {
centerX: am5.p50,
centerY: am5.p50,
fill: am5.color(0xffffff),
populateText: true,
fontSize: "8",
text: "{value}"
}));
container.events.on("click", function(e) {
pointSeries.zoomToCluster(e.target.dataItem);
});
return am5.Bullet.new(root, {
sprite: container
});
});
pointSeries.bullets.push(function() {
var circle = am5.Circle.new(root, {
radius: 6,
tooltipY: 0,
fill: am5.color(0xff8c00),
tooltipText: "{title}"
});
return am5.Bullet.new(root, {
sprite: circle
});
});
var container = chart.children.push(am5.Container.new(root, {
y: am5.p100,
centerX: am5.p50,
centerY: am5.p100,
x: am5.p50,
width: am5.percent(90),
layout: root.horizontalLayout,
paddingBottom: 10
}));
var first = 1;
var last = 7;
var slider = container.children.push(am5.Slider.new(root, {
orientation: "horizontal",
start: 0,
centerY: am5.p50
}));
slider.startGrip.get("icon").set("forceHidden", true);
slider.startGrip.set("label", am5.Label.new(root, {
text: first + "",
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0
}));
slider.events.on("rangechanged", function() {
var date = first + Math.round(slider.get("start", 0) * (last - first));
slider.startGrip.get("label").set("text", date + "");
});
chart.appear(1000, 100);
polygonSeries.events.on("datavalidated", function() {
chart.goHome();
});
const spotDatas = [];
am5.object.each(spots, function(key, datas) {
spotDatas.push({
geometry: {
type: "Point",
coordinates: [datas.longitude, datas.latitude]
},
title: datas.title
});
});
pointSeries.data.setAll(spotDatas);
function loadGeodata(country) {
chart.set("projection", am5map.geoMercator());
currentMap = am5geodata_data_countries2[country]["maps"][0];
am5.net.load("https://cdn.amcharts.com/lib/5/geodata/json/" + currentMap + ".json", chart).then(function(result) {
var geodata = am5.JSONParser.parse(result.response);
var data = [];
for (var i = 0; i < geodata.features.length; i++) {
data.push({
id: geodata.features[i].id,
});
}
polygonSeries.set("geoJSON", geodata);
polygonSeries.data.setAll(data);
});
}
});
</script>
What I would like to achieve from now on is to set up a slider that corresponds to the date and switch the displayed data depending on the slider value.
I thought it could be achieved with the code below, but an error occurred.
<script>
var spots = [
{"date":1,"title":"point1","latitude":42.1613,"longitude":139.452},
{"date":1,"title":"point2","latitude":41.3597,"longitude":139.806},
{"date":1,"title":"point3","latitude":40.3597,"longitude":138.605},
{"date":2,"title":"point1","latitude":42.1613,"longitude":139.452},
{"date":2,"title":"point2","latitude":41.3597,"longitude":139.806},
];
am5.ready(function() {
var root = am5.Root.new("spcsmap");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5map.MapChart.new(root, {
panX: "rotateX",
panY: "translateY",
projection: am5map.geoMercator(),
homeZoomLevel: 1.8,
homeGeoPoint: {
longitude: 135,
latitude: 35
}
}));
chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
loadGeodata('JP');
var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
var pointSeries = chart.series.push(am5map.ClusteredPointSeries.new(root, {}));
pointSeries.set("clusteredBullet", function(root) {
var container = am5.Container.new(root, {
cursorOverStyle: "pointer"
});
var circle1 = container.children.push(am5.Circle.new(root, {
radius: 8,
tooltipY: 0,
fill: am5.color(0xff8c00)
}));
var circle2 = container.children.push(am5.Circle.new(root, {
radius: 12,
fillOpacity: 0.3,
tooltipY: 0,
fill: am5.color(0xff8c00)
}));
var circle3 = container.children.push(am5.Circle.new(root, {
radius: 16,
fillOpacity: 0.3,
tooltipY: 0,
fill: am5.color(0xff8c00)
}));
var label = container.children.push(am5.Label.new(root, {
centerX: am5.p50,
centerY: am5.p50,
fill: am5.color(0xffffff),
populateText: true,
fontSize: "8",
text: "{value}"
}));
container.events.on("click", function(e) {
pointSeries.zoomToCluster(e.target.dataItem);
});
return am5.Bullet.new(root, {
sprite: container
});
});
pointSeries.bullets.push(function() {
var circle = am5.Circle.new(root, {
radius: 6,
tooltipY: 0,
fill: am5.color(0xff8c00),
tooltipText: "{title}"
});
return am5.Bullet.new(root, {
sprite: circle
});
});
var container = chart.children.push(am5.Container.new(root, {
y: am5.p100,
centerX: am5.p50,
centerY: am5.p100,
x: am5.p50,
width: am5.percent(90),
layout: root.horizontalLayout,
paddingBottom: 10
}));
var first = 1;
var last = 7;
var slider = container.children.push(am5.Slider.new(root, {
orientation: "horizontal",
start: 0,
centerY: am5.p50
}));
slider.startGrip.get("icon").set("forceHidden", true);
slider.startGrip.set("label", am5.Label.new(root, {
text: first + "",
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0
}));
slider.events.on("rangechanged", function() {
var date = first + Math.round(slider.get("start", 0) * (last - first));
slider.startGrip.get("label").set("text", date + "");
updateSpcs(date);
});
chart.appear(1000, 100);
polygonSeries.events.on("datavalidated", function() {
chart.goHome();
});
function loadGeodata(country) {
chart.set("projection", am5map.geoMercator());
currentMap = am5geodata_data_countries2[country]["maps"][0];
am5.net.load("https://cdn.amcharts.com/lib/5/geodata/json/" + currentMap + ".json", chart).then(function(result) {
var geodata = am5.JSONParser.parse(result.response);
var data = [];
for (var i = 0; i < geodata.features.length; i++) {
data.push({
id: geodata.features[i].id,
});
}
polygonSeries.set("geoJSON", geodata);
polygonSeries.data.setAll(data);
});
}
function updateSpcs(date) {
const spotDatas = [];
am5.object.each(spots, function(key, datas) {
var dataDate = datas.date;
if (dataDate == date) {
spotDatas.push({
geometry: {
type: "Point",
coordinates: [datas.longitude, datas.latitude]
},
title: datas.title
});
}
});
pointSeries.data.setAll(spotDatas);
}
});
</script>
The contents of the error are as follows.
Uncaught Error: EventDispatcher is disposed
What should I modify to express what I want to achieve?
I tried various codes based on the amcharts documentation, but none of them worked, and the above is the closest to completion.