Search code examples
javascriptamchartsamcharts4

amcharts4 getting map elements to link to URL using polygon property

The following (while call core.js, maps.js, animated.js and a contextual countryLow.js file renders a map with polygons of regions (or sub-administrative districts):

var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_franceLow;
chart.projection = new am4maps.projections.Miller();

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.applyOnClones = true;
polygonSeries.fill = am4core.color("#a791b4");
polygonSeries.fillOpacity = 0.8; 
polygonSeries.strokeOpacity = 0.3;

var regionTemplate = polygonSeries.mapPolygons.template;
regionTemplate.tooltipText = "{name}";
regionTemplate.properties.fillOpacity = 0.8; 
regionTemplate.propertyFields.fill = "color";
regionTemplate.propertyFields.url = "url";
regionTemplate.columns.template.url = "http://localhost:3000/go/cities?region_id={properties.id()}"

While the tooltip is being revealed, how can one get the polygon to be clickable while passing the polygon's ID value as a parameter to the URL?

Solution

  • Just write zeroin code in Javascript instead of typescript and you will not have the error ;

    regionTemplate.url = "http://www.amcharts.com/";
regionTemplate.adapter.add("url", function(url, target) { return url + "?id=" + target.dataItem.dataContext.id; }):