#43506: Drill down choropleth

Pressing home button and hovering over us states removes heat map colors Fix: apply heatRules to the defaultState.

by notacouch

HTML

<!--
original fiddle:
https://jsfiddle.net/promitanan/qh5axfnL/3/

GitHub issue:
https://github.com/amcharts/amcharts4/issues/1027
-->
<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/worldHigh.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/usaHigh.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/canadaHigh.js"></script>

<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

React

/**
 * ---------------------------------------
 * 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/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);

let chart = am4core.create("chartdiv", am4maps.MapChart);

        chart.geodata = am4geodata_worldHigh;

        chart.projection = new am4maps.projections.Mercator();

        chart.deltaLongitude = -10;

        let hoverColor = "#f3b4ff";

        // Countries
        let countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
        let countries = countriesSeries.mapPolygons;
        countriesSeries.visible = false; // start off as hidden
        countriesSeries.exclude = ["AQ"];
        countriesSeries.geodata = am4geodata_worldHigh;
        countriesSeries.useGeodata = true;

        countriesSeries.data = [{
            "id": "NZ",
            "zoomLevel": 12,
            "zoomGeoPoint": {
                "latitude": -41,
                "longitude": 173
            }
        }, {
            "id": "RU",
            "zoomLevel": 2.1,
            "zoomGeoPoint": {
                "latitude": 68,
                "longitude": 108
            }
        }, {
            "id": "US",
            "zoomLevel": 2.5,
            "zoomGeoPoint": {
                "latitude": 130, // greater => south
                "longitude": 80   // greater => east
            }
        }];

        countriesSeries.dataFields.zoomLevel = "zoomLevel";
        countriesSeries.dataFields.zoomGeoPoint = "zoomGeoPoint";

        let labelContainerCountry = countriesSeries.createChild(am4core.Label);
        labelContainerCountry.tooltip.fontFamily = 'Raleway';
        labelContainerCountry.tooltip.fontWeight = '400';

        //console.log(chart.zoomLevel);

        let countryTemplate = countries.template;
        countryTemplate.applyOnClones...