How to make a clickable map from an SVG file?

Question

Currently I am learning Javascript.

What I am trying is to make a clickable map of Germany displaying data. Just like this.

Amchart provides Germany map . But it does not seem like the one above.

I have some data of Germany and want to display it according to regions just like the above.

I know first I need to load jquery on html but have no idea how to do with the Germany SVG.

Could you tell me how to? Thank you in advance.

Answer 1

You can easily change the USA example you cited (https://www.amcharts.com/demos/us-heat-map/) to Germany like this.

Most important, reference the Germany data:

<script src="https://www.amcharts.com/lib/4/geodata/germanyLow.js"></script>

Then change the map definition line to:

// Set map definition
  chart.geodata = window.am4geodata_germanyLow;

And set the German Data with the german state IDs. You can change the data to what you want:

polygonSeries.data = [
    {
      id: "DE-BB",
      value: 4447100
    },
    {
      id: "DE-BE",
      value: 626932
    },
    ...
]

Full demo here: https://codepen.io/Alexander9111/pen/YzXRJWK

And below:

//<!-- Chart code -->
//console.log(window.am4core);
//console.log(window.am4geodata_germanyLow);
window.am4core.ready(function () {
  // Themes begin
  window.am4core.useTheme(am4themes_animated);
  // Themes end
  // Create map instance
  var chart = window.am4core.create("chartdiv", window.am4maps.MapChart);
  // Set map definition
  chart.geodata = window.am4geodata_germanyLow;
  // Set projection
  //chart.projection = new window.am4maps.projections.Albers();
  // Create map polygon series
  var polygonSeries = chart.series.push(new window.am4maps.MapPolygonSeries());
  //Set min/max fill color for each area
  polygonSeries.heatRules.push({
    property: "fill",
    target: polygonSeries.mapPolygons.template,
    min: chart.colors.getIndex(1).brighten(1),
    max: chart.colors.getIndex(1).brighten(-0.3)
  });
  // Make map load polygon data (state shapes and names) from GeoJSON
  polygonSeries.useGeodata = true;
  // Set heatmap values for each state
  polygonSeries.data = [
    {
      id: "DE-BB",
      value: 4447100
    },
    {
      id: "DE-BE",
      value: 626932
    },
    {
      id: "DE-BW",
      value: 5130632
    },
    {
      id: "DE-BY",
      value: 2673400
    },
    {
      id: "DE-HB",
      value: 33871648
    },
    {
      id: "DE-HE",
      value: 4301261
    },
    {
      id: "DE-HH",
      value: 3405565
    },
    {
      id: "DE-MV",
      value: 783600
    },
    {
      id: "DE-NI",
      value: 15982378
    },
    {
      id: "DE-NW",
      value: 8186453
    },
    {
      id: "DE-RP",
      value: 1211537
    },
    {
      id: "DE-SH",
      value: 1293953
    },
    {
      id: "DE-SL",
      value: 12419293
    },
    {
      id: "DE-SN",
      value: 6080485
    },
    {
      id: "DE-ST",
      value: 2926324
    },
    {
      id: "DE-TH",
      value: 2688418
    }
  ];

  // Set up heat legend
  let heatLegend = chart.createChild(window.am4maps.HeatLegend);
  heatLegend.series = polygonSeries;
  heatLegend.align = "right";
  heatLegend.valign = "bottom";
  heatLegend.width = window.am4core.percent(20);
  heatLegend.marginRight = window.am4core.percent(4);
  heatLegend.minValue = 0;
  heatLegend.maxValue = 40000000;

  // Set up custom heat map legend labels using axis ranges
  var minRange = heatLegend.valueAxis.axisRanges.create();
  minRange.value = heatLegend.minValue;
  minRange.label.text = "Little";
  var maxRange = heatLegend.valueAxis.axisRanges.create();
  maxRange.value = heatLegend.maxValue;
  maxRange.label.text = "A lot!";

  // Blank out internal heat legend value axis labels
  heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function (
    labelText
  ) {
    return "";
  });

  // Configure series tooltip
  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.tooltipText = "{name}: {value}";
  polygonTemplate.nonScalingStroke = true;
  polygonTemplate.strokeWidth = 0.5;

  // Create hover state and set alternative fill color
  var hs = polygonTemplate.states.create("hover");
  hs.properties.fill = window.am4core.color("#3c5bdc");
}); // end am4core.ready()

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

<!-- HTML -->
<div id="chartdiv"></div>
<!-- Resources -->
<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/germanyLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>