javascript – How to make clickable map from SVG file?

Question:

I am currently learning Javascript.

I'm trying to make a clickable map of Germany with data. Such as this one .
Amchart provides a map of Germany in an SVG file. But it doesn't look like the example above.

I have some data for Germany and I want to display it according to regions as above.

I know that I need to load jquery to html but don't know how to do it with germany map svg.

Free translation of the question How to make a clickable map from an SVG file? by @Doo Hyun Shin .

Answer:

You can easily change the US example you quoted: https://www.amcharts.com/demos/us-heat-map/ for Germany
Most importantly, refer to the German 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 German government identifiers (ID). You can change the data to whatever you want:

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

Full demo here: codepen

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());
  //Установите min/max fill color для каждой области
  polygonSeries.heatRules.push({
    property: "fill",
    target: polygonSeries.mapPolygons.template,
    min: chart.colors.getIndex(1).brighten(1),
    max: chart.colors.getIndex(1).brighten(-0.3)
  });
  // Заставить карту загружать данные многоугольника (указать формы и имена) из GeoJSON
  polygonSeries.useGeodata = true;
  // Установите значения тепловых карт для каждого состояния
  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
    }
  ];

  // Установить легенду тепла
  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;

  // Настроить пользовательские метки легенды тепловой карты, используя диапазоны осей
  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!";

  // Вычеркнуть внутренние метки осей значений  labels
  heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function (
    labelText
  ) {
    return "";
  });

  // Настроить всплывающую подсказку
  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.tooltipText = "{name}: {value}";
  polygonTemplate.nonScalingStroke = true;
  polygonTemplate.strokeWidth = 0.5;

  // Создать состояние наведения и установить альтернативный цвет заливки
  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>

Free translation of the answer How to make a clickable map from an SVG file? by @Alex L .

Post Views: 22
Scroll to Top