[SOLVED] How to make a clickable map from an SVG file?

How to make a clickable map from an SVG file?

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.

Solution

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>