user11121497
Reputation:
How to add hyperlink to individual countries? AMCharts
I am trying to attach a link to another page when an individual country is clicked. I have added one url link so far to Algeria (id: DZ):
{ "data": [{"id": "DZ"}], "url": "https://en.wikipedia.org/wiki/Algeria" }
However when I click the map it returns a 404 not found error, it also converts the address to %7Burl%7D. I am running my site on localhost. I have tried adding both an actual website (https://en.wikipedia.org/wiki/Algeria) and the path to one of my local html file pages but both return the exact same error. Is this occurring because i'm running localhost or because my code is wrong?
The function used to link url when country is clicked:
mapPolygonTemplate.events.on("hit", function(ev) {
ev.target.series.chart.url = "{url}";
});
Also the link isn't localised to one country on the map, the error occurs when anywhere on the map is clicked. How can I make sure each country has its own unique link when I attach them all?
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_worldUltra;
chart.projection = new am4maps.projections.Miller();
chart.zoomControl = new am4maps.ZoomControl();
var homeButton = new am4core.Button();
homeButton.events.on("hit", function() {
chart.goHome();
});
homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);
chart.homeZoomLevel = 4;
chart.homeGeoPoint = {
longitude: 16.5,
latitude: 3.8
};
var groupData = [{
"data": [{
"id": "DZ",
"url": "https://en.wikipedia.org/wiki/Algeria"
}]
},
{
"data": [{
"id": "AO"
}]
},
{
"data": [{
"id": "BJ"
}]
},
{
"data": [{
"id": "BW"
}]
},
{
"data": [{
"id": "BF"
}]
},
{
"data": [{
"id": "BI"
}]
},
{
"data": [{
"id": "CM"
}]
},
{
"data": [{
"id": "CV"
}]
},
{
"data": [{
"id": "CF"
}]
},
{
"data": [{
"id": "KM"
}]
},
{
"data": [{
"id": "CD"
}]
},
{
"data": [{
"id": "DJ"
}]
},
{
"data": [{
"id": "EG"
}]
},
{
"data": [{
"id": "GQ"
}]
},
{
"data": [{
"id": "ER"
}]
},
{
"data": [{
"id": "ET"
}]
},
{
"data": [{
"id": "GA"
}]
},
{
"data": [{
"id": "GM"
}]
},
{
"data": [{
"id": "GH"
}]
},
{
"data": [{
"id": "GN"
}]
},
{
"data": [{
"id": "GW"
}]
},
{
"data": [{
"id": "CI"
}]
},
{
"data": [{
"id": "KE"
}]
},
{
"data": [{
"id": "LS"
}]
},
{
"data": [{
"id": "LR"
}]
},
{
"data": [{
"id": "LY"
}]
},
{
"data": [{
"id": "MG"
}]
},
{
"data": [{
"id": "MW"
}]
},
{
"data": [{
"id": "ML"
}]
},
{
"data": [{
"id": "MR"
}]
},
{
"data": [{
"id": "MU"
}]
},
{
"data": [{
"id": "MA"
}]
},
{
"data": [{
"id": "MZ"
}]
},
{
"data": [{
"id": "NA"
}]
},
{
"data": [{
"id": "NE"
}]
},
{
"data": [{
"id": "NG"
}]
},
{
"data": [{
"id": "CG"
}]
},
{
"data": [{
"id": "RE"
}]
},
{
"data": [{
"id": "RW"
}]
},
{
"data": [{
"id": "SH"
}]
},
{
"data": [{
"id": "ST"
}]
},
{
"data": [{
"id": "SN"
}]
},
{
"data": [{
"id": "SC"
}]
},
{
"data": [{
"id": "SL"
}]
},
{
"data": [{
"id": "SO"
}]
},
{
"data": [{
"id": "ZA"
}]
},
{
"data": [{
"id": "SS"
}]
},
{
"data": [{
"id": "SD"
}]
},
{
"data": [{
"id": "SZ"
}]
},
{
"data": [{
"id": "TZ"
}]
},
{
"data": [{
"id": "TG"
}]
},
{
"data": [{
"id": "TN"
}]
},
{
"data": [{
"id": "UG"
}]
},
{
"data": [{
"id": "EH"
}]
},
{
"data": [{
"id": "YT"
}]
},
{
"data": [{
"id": "ZM"
}]
},
{
"data": [{
"id": "ZW"
}]
},
{
"data": [{
"id": "TD"
}]
}
];
var excludedCountries = ["AQ"];
groupData.forEach(function(group) {
var series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
var includedCountries = [];
group.data.forEach(function(country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);
});
series.include = includedCountries;
series.fill = am4core.color("#fff");
series.setStateOnChildren = true;
var seriesHoverState = series.states.create("hover");
var mapPolygonTemplate = series.mapPolygons.template;
mapPolygonTemplate.fill = am4core.color("#fff");
mapPolygonTemplate.fillOpacity = 1;
mapPolygonTemplate.nonScalingStroke = false;
mapPolygonTemplate.stroke = am4core.color("#878787");
mapPolygonTemplate.strokeWidth = 0.2;
mapPolygonTemplate.strokeOpacity = 0.5;
mapPolygonTemplate.tooltipText = "{name}";
mapPolygonTemplate.events.on("hit", function(ev) {
ev.target.series.chart.url = "{url}";
});
var hoverState = mapPolygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#a3cc88");
series.data = JSON.parse(JSON.stringify(group.data));
});
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
var worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.3;
worldSeries.mapPolygons.template.nonScalingStroke = true;
worldSeries.mapPolygons.template.stroke = worldSeries.mapPolygons.template.fill;
worldSeries.mapPolygons.template.strokeWidth = 0;html body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
height: 90vh;
width: 100vh;
border: solid #000 1px;
}<div id="chartdiv"></div>
<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/worldUltra.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>Upvotes: 2
Views: 1291
Answers (1)
Darlesson
Reputation: 6162
You can use propertyFields to refer to the URL in your data as in mapPolygonTemplate.propertyFields.url = "url";.
Please check the working example below:
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.geodata = am4geodata_worldUltra;
chart.projection = new am4maps.projections.Miller();
chart.zoomControl = new am4maps.ZoomControl();
var homeButton = new am4core.Button();
homeButton.events.on("hit", function() {
chart.goHome();
});
homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);
chart.homeZoomLevel = 4;
chart.homeGeoPoint = {
longitude: 16.5,
latitude: 3.8
};
var groupData = [{
"data": [{
"id": "DZ",
"url": "https://en.wikipedia.org/wiki/Algeria"
}]
},
{
"data": [{
"id": "AO"
}]
},
{
"data": [{
"id": "BJ"
}]
},
{
"data": [{
"id": "BW"
}]
},
{
"data": [{
"id": "BF"
}]
},
{
"data": [{
"id": "BI"
}]
},
{
"data": [{
"id": "CM"
}]
},
{
"data": [{
"id": "CV"
}]
},
{
"data": [{
"id": "CF"
}]
},
{
"data": [{
"id": "KM"
}]
},
{
"data": [{
"id": "CD"
}]
},
{
"data": [{
"id": "DJ"
}]
},
{
"data": [{
"id": "EG"
}]
},
{
"data": [{
"id": "GQ"
}]
},
{
"data": [{
"id": "ER"
}]
},
{
"data": [{
"id": "ET"
}]
},
{
"data": [{
"id": "GA"
}]
},
{
"data": [{
"id": "GM"
}]
},
{
"data": [{
"id": "GH"
}]
},
{
"data": [{
"id": "GN"
}]
},
{
"data": [{
"id": "GW"
}]
},
{
"data": [{
"id": "CI"
}]
},
{
"data": [{
"id": "KE"
}]
},
{
"data": [{
"id": "LS"
}]
},
{
"data": [{
"id": "LR"
}]
},
{
"data": [{
"id": "LY"
}]
},
{
"data": [{
"id": "MG"
}]
},
{
"data": [{
"id": "MW"
}]
},
{
"data": [{
"id": "ML"
}]
},
{
"data": [{
"id": "MR"
}]
},
{
"data": [{
"id": "MU"
}]
},
{
"data": [{
"id": "MA"
}]
},
{
"data": [{
"id": "MZ"
}]
},
{
"data": [{
"id": "NA"
}]
},
{
"data": [{
"id": "NE"
}]
},
{
"data": [{
"id": "NG"
}]
},
{
"data": [{
"id": "CG"
}]
},
{
"data": [{
"id": "RE"
}]
},
{
"data": [{
"id": "RW"
}]
},
{
"data": [{
"id": "SH"
}]
},
{
"data": [{
"id": "ST"
}]
},
{
"data": [{
"id": "SN"
}]
},
{
"data": [{
"id": "SC"
}]
},
{
"data": [{
"id": "SL"
}]
},
{
"data": [{
"id": "SO"
}]
},
{
"data": [{
"id": "ZA"
}]
},
{
"data": [{
"id": "SS"
}]
},
{
"data": [{
"id": "SD"
}]
},
{
"data": [{
"id": "SZ"
}]
},
{
"data": [{
"id": "TZ"
}]
},
{
"data": [{
"id": "TG"
}]
},
{
"data": [{
"id": "TN"
}]
},
{
"data": [{
"id": "UG"
}]
},
{
"data": [{
"id": "EH"
}]
},
{
"data": [{
"id": "YT"
}]
},
{
"data": [{
"id": "ZM"
}]
},
{
"data": [{
"id": "ZW"
}]
},
{
"data": [{
"id": "TD"
}]
}
];
var excludedCountries = ["AQ"];
groupData.forEach(function(group) {
var series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
var includedCountries = [];
group.data.forEach(function(country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);
});
series.include = includedCountries;
series.fill = am4core.color("#fff");
series.setStateOnChildren = true;
var seriesHoverState = series.states.create("hover");
var mapPolygonTemplate = series.mapPolygons.template;
mapPolygonTemplate.fill = am4core.color("#fff");
mapPolygonTemplate.fillOpacity = 1;
mapPolygonTemplate.nonScalingStroke = false;
mapPolygonTemplate.stroke = am4core.color("#878787");
mapPolygonTemplate.strokeWidth = 0.2;
mapPolygonTemplate.strokeOpacity = 0.5;
mapPolygonTemplate.tooltipText = "{name}";
mapPolygonTemplate.propertyFields.url = "url";
// mapPolygonTemplate.urlTarget = "_blank";
// mapPolygonTemplate.events.on("hit", function(ev) {
// ev.target.series.chart.url = "{url}";
// });
var hoverState = mapPolygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#a3cc88");
series.data = JSON.parse(JSON.stringify(group.data));
});
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
var worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.3;
worldSeries.mapPolygons.template.nonScalingStroke = true;
worldSeries.mapPolygons.template.stroke = worldSeries.mapPolygons.template.fill;
worldSeries.mapPolygons.template.strokeWidth = 0;html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
height: 90vh;
width: 100vh;
border: solid #000 1px;
}<div id="chartdiv"></div>
<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/worldUltra.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>Upvotes: 3
Related Questions
- AmCharts 4 Donut Graph - HyperLink for Custom URL
- Change / translate country names to different language for Amcharts
- amcharts4 getting map elements to link to URL using polygon property
- amcharts drill-down map countries clickable
- AmCharts 4 - drill map - get country iso code
- amCharts: Open a URL when Clicking Map Marker
- How to make a world map with clickable countries in AMcharts?
- I want to add a link to certain countries in JQVMap
- AMChars, Zoom to certain countries with external buttons
- To colored the particular country using amcharts using country name