Geçenlerde bir arkadaşım Dünya Bienalleri hakkında bir tez hazırladığını ve tüm dünyada var olan bienallerin yerlerini gösteren bir haritadan bahsetti ;ona yardımcı olurken bu AMCHARTS firmasının ürünüyle karşılaştım. çok başarılı bulduğum bu kısa kodu sizinle paylaşmak istedim. Bu arada sadece bir harita gibi düşünmeyin ; ayrıca bu haritanın üzerinde dinamik olarak grafikler resimler çizgiler çizebiliyorsunuz
Bu aşağıda paylaştığım kodu herhangi bir sayfanızın içerisine gömmeniz yeterli. Kodu biraz inceleyerek haritayı genişletebilir ya da daraltabilirsiniz.
<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/worldLow.js"></script>
<div id="chartdiv"></div>
<script>
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Create map instance
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;
// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#74B266");
// Create hover state and set alternative fill color
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");
// Remove Antarctica
polygonSeries.include = ["BE","EL","LT", "PT", "BG", "ES", "LU", "RO", "CZ", "FR", "HU", "SI", "DK", "HR", "MT", "SK", "DE", "IT", "NL", "FI", "EE", "CY", "AT", "SE", "IE", "LV", "PL", "NO", "LI", "CH", "ME", "MK", "AL", "RS", "TR", "XK", "BA","GB","GR","DZ","LB","SY","EG","LY","TN","IL","MA","JO","PS"];
</script>