// Themes begin am4core.useTheme(am4themes_animated); am4core.addLicense("CH261541974"); am4core.addLicense("MP386491625"); // Themes end var chart = am4core.create("chartdiv", am4maps.MapChart); // Set map definition chart.geodata = am4geodata_worldLow; // Set projection chart.projection = new am4maps.projections.Miller(); // Create map polygon series var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries()); // Make map load polygon (like country names) data from GeoJSON polygonSeries.useGeodata = true; // Remove Antarctica polygonSeries.exclude = ["AQ"]; // Configure series var polygonTemplate = polygonSeries.mapPolygons.template; polygonTemplate.togglable = true; polygonTemplate.tooltipText = "{name} {period}"; polygonTemplate.fill = am4core.color("#395b74"); // color world polygonTemplate.stroke = am4core.color("#ffffff"); var lastSelected; polygonTemplate.strokeWidth = 0.5; //chart.dataSource.url = "/module/myData.php"; $.ajax( { url : "/module/myData.php", async : false, success: function (output) { polygonSeries.data=jQuery.parseJSON(output); }}); // polygonSeries.data = [{"id": "CN","name": "China", "fill": am4core.color("#187E6A")},{"id": "DOM","name": "Dominican Republic", "fill": am4core.color("#187E6A")},{"id": "EC","name": "Ecuador", "fill": am4core.color("#187E6A")},{"id": "GH","name": "Ghana", "fill": am4core.color("#187E6A")},{"id": "GD","name": "Grenada", "fill": am4core.color("#187E6A")},{"id": "MX","name": "Mexico", "fill": am4core.color("#187E6A")},{"id": "TN","name": "Tunisia", "fill": am4core.color("#187E6A")}]; polygonTemplate.events.on("hit-off", function(ev) { if (lastSelected) { // This line serves multiple purposes: // 1. Clicking a country twice actually de-activates, the line below // de-activates it in advance, so the toggle then re-activates, making it // appear as if it was never de-activated to begin with. // 2. Previously activated countries should be de-activated. lastSelected.isActive = false; } ev.target.series.chart.zoomToMapObject(ev.target); if (lastSelected !== ev.target) { lastSelected = ev.target; } var data = ev.target.dataItem.dataContext; if (data.icon) { var info = document.getElementById("info"); //info.innerHTML = "

" + data.name + " (" + data.id + ")

"; //background: #ffffff; // if(data.kind == 2){ info.innerHTML = '

'+data.name+'

Single measure

'; $("#inf").addClass("projekte_infos_2"); $("#inf").removeClass("d-none"); }else{ $("#inf").removeClass("projekte_infos_2"); $("#inf").removeClass("d-none"); info.innerHTML = '
'+data.name; } if(data.kind == 1) info.innerHTML +='
Project
'+data.period+'
'; if(data.children !== "0") info.innerHTML +='
Children & Youth
'+data.children+'
'; if(data.coaches !== "0") info.innerHTML +='
Coaches & Instructors
'+data.coaches+'
'; if(data.sports !== "0") info.innerHTML +='
Sport Grounds
'+data.sports+'
'; if (data.description) { //info.innerHTML += data.description; } else { //info.innerHTML += "No description provided." } } }); polygonTemplate.propertyFields.fill = "fill"; // Create hover state and set alternative fill color var hs = polygonTemplate.states.create("hover"); hs.properties.fill = chart.colors.getIndex(0).brighten(-0.5); // Zoom control 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);