Maps#map
This demo shows how we can use any image as a MapChart background that pans and zooms together with the map itself.
MapChart
/** * --------------------------------------- * 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 instancevar chart = am4core.create("chartdiv", am4maps.MapChart);chart.geodata = am4geodata_worldLow;chart.projection = new am4maps.projections.Miller();// chart.homeZoomLevel = 0.8;// chart.minZoomLevel = 0.8; // Create map polygon seriesvar polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());polygonSeries.exclude = ["AQ"];polygonSeries.useGeodata = true; // Configure seriesvar polygonTemplate = polygonSeries.mapPolygons.template;polygonTemplate.tooltipText = "{name}";polygonTemplate.fill = am4core.color("#8e6b3f");polygonTemplate.fillOpacity = 0.7;polygonTemplate.stroke = am4core.color("#6e5332"); // Create hover state and set alternative fill colorvar hs = polygonTemplate.states.create("hover");hs.properties.fill = am4core.color("#6e5332"); var bgSeries = chart.series.push(new am4maps.MapImageSeries());bgSeries.toBack();var bgImage = bgSeries.mapImages.template.createChild(am4core.Image);bgImage.propertyFields.href = "src";bgImage.width = 700;bgImage.height = 394;bgSeries.data = [ { src: "https://docs.amcharts.com/assets/pergament2.png" }];
<div id="chartdiv"></div>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: #ecddb5;}#chartdiv { width: 700px; height: 394px; margin: 0 auto; border: 1px solid #6e5332; border-radius: 10px;}
use-custom-image-as-draggable-and-zoomable-mapchart-backgrou
