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.
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.
Share Improve this question edited Mar 27, 2020 at 10:56 Alexandr_TT 14.6k3 gold badges31 silver badges58 bronze badges asked Mar 25, 2020 at 16:09 Doo Hyun ShinDoo Hyun Shin 2984 silver badges16 bronze badges 2- 1 Are you maybe confusing a heat map with a thematic map displaying heat data? Assuming you want to create a thematic map: Are you asking about how to implement a thematic map with the amchart library? What do you want to do with jquery? Do you want to modify an existing svg (map of germany) and populate / color it depending on the germany data? – Manuel Waltschek Commented Mar 25, 2020 at 16:25
- @ManuelWaltschek Sorry if I confused you. Yes I want to modify an existing svg (map of germany) and populate / color it depending on the germany data. I already have data and SVG file. The problem is that Germany SVG file does not work like 'this' which I mentioned above. – Doo Hyun Shin Commented Mar 25, 2020 at 16:31
3 Answers
Reset to default 4You can easily change the USA example you cited (https://www.amcharts./demos/us-heat-map/) to Germany like this.
Most important, reference the Germany data:
<script src="https://www.amcharts./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./lib/4/core.js"></script>
<script src="https://www.amcharts./lib/4/maps.js"></script>
<script src="https://www.amcharts./lib/4/geodata/germanyLow.js"></script>
<script src="https://www.amcharts./lib/4/themes/animated.js"></script>It is necessary to wrap each path with a group tag<g>and add inside it tags in which the name of the land of Germany will be
<title>"Baden-Wurttemberg" </title>
<path id="DE-BW" class="land" d="M180.99,750.43l0.58,2.09l-3.47,0.13L180.99,750.43zM206.4,570.93l8.66,-0.33l4.12,-7.25l6.54,0.95l0.83,-6.5l-2.07,-1.9l-1.84,2.62l0.97,-2.42l-4.96,-0.95l1.24,-2.93l11.93,-2.03l3.81,4.36l0.36,-3.78l5.23,-0.86l-1.54,8.57l1.8,1.69l3.63,-3.95l1.67,3.87l3.98,-4.23l4.61,11.83l-3.88,5.45l3.04,0.98l3.58,-3.6l0.77,9.54l5.81,-0.09l2.95,-6.01l3.68,3.64l-1.77,6.05l4.31,5.07l-3.48,1.64l3.18,9.66l-2.99,2.1l0.91,5.72l7.87,4.93l-2.46,4.64l2.62,0.9l-0.01,5l6.23,1.2l6.94,10.77l-2.17,1.09l1.94,4.53l-2.36,10.79l4.98,5.72l-5.35,2.5l1.74,-3.05l-1.91,-0.44l-3.02,4.26l-5.88,-4.76l-0.89,3.63l4.3,5.42l-0.75,8.22l-4.84,1.1l-4.09,5.13l-4.1,-1.88l-4.39,1.77l-4.24,7.74l6.02,9.22l4.53,16.17l-3.72,23.3l3.8,5.37l-4.73,2.12l3.47,2.57l0.82,7.82l-3.45,3.6l-3.16,-4.43l-3.99,3.28l-7.15,-2.49l-6.35,6.24l-7.29,0.87l-2.47,5.16l0,0l-32.49,-12.44l-12.39,2.97l-5.46,-8.47l-2.45,1.83l1.4,4.16l-4.17,-1.79l-0.25,-6.73l-1.86,0.82l-2.53,-4.15l-1.61,3.9l-0.73,-3.78l-3.23,-0.87l0.58,2.52l-5.88,1.11l-4.98,9.09l4.45,3.28l8.21,-3.17l1.48,2.35l-3.33,4.98l-3.59,-3.6l-4,2.98l1.93,2.27l-6.63,1.06l-11.33,-5.16l-7.36,5.95l-9.36,1.3l-3.24,-4.09l-4.44,-0.06l-8.25,5.23l-3.72,-2.72l3.29,-0.43l0.41,-3.27l-6.5,1.03l-5.01,-10.15l2.32,-3.43l0.55,-13.76l4.19,-8.82l-3.37,-5.92l0.47,-8.22l7.41,-17.3l3.29,-2.43l-0.78,-6.43l6.8,-23.67l8.46,-11.19l7.49,-4.36l9.11,-15.81l0,0l8.06,-13.06l2.02,-13.01l6.23,-5.87l-2.43,-2.9l3.64,-10.75l-4.12,-1.49l-1.29,-13.08l0,0l3.37,0.03l5.46,6.77l3.5,-2.61l-1.32,-6.75l6.19,-1.33l0.61,8.58l7.72,1.09l0.59,3.21l4.26,-1.08l-1.4,3.51l-3.26,-0.13l-1.54,5.66l3.08,1.47l6.37,-5.89l0.1,-4.73l11.14,-1.27l-3.41,-4.71L206.4,570.93z"/>
</g>
If you need to display more data in the tooltip, make it multi-line
<title> "Mecklenburg-Vorpommern"
------------------------------------
Area • Total -23,174 km2 (8,948 sq mi)
Capital Schwerin
ISO 3166 code DE-MV
</title>
When you hover over a specific part of the map, an increase and output of a hint which is inside the <title>
document.querySelectorAll('path.land').forEach(path => {
path.addEventListener('mouseover', e => {
path.parentNode.parentNode.append(path.parentNode);
const paths = [...document.querySelectorAll('path.land')]
setTimeout(()=> {
paths[paths.length - 1].classList.add('scaled');
},20)
});
});
document.querySelectorAll('path.land').forEach(path => {
path.addEventListener('mouseout', e => {
path.parentNode.parentNode.append(path.parentNode);
const paths = [...document.querySelectorAll('path.land')]
setTimeout(()=> {
paths[paths.length - 1].classList.remove('scaled');
},20)
});
});.land
{
fill: #CCCCCC;
fill-opacity: 1;
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
transform-origin: center center;
transform-box: fill-box;
transition: 1s;
}
.land.scaled {
fill:dodgerblue;
stroke:white;
stroke-width:2px;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}<!-- (c) ammap. | SVG map of Germany -->
<svg xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" version="1.1"
width="400" height="400" viewBox="0 0 600 800" style="border:1px solid">
<g>
<title>"Berlin"</title>
<path id="DE-BE" title="Berlin" class="land" d="M485.13,257.7L485.2,257.74L485.2,257.74L488.12,260.2L487.19,265.7L496.58,272.25L493.65,278.32L503.07,281.3L496.02,292.2L495.77,288.21L485.31,286.24L484.46,283.74L481.5,284.77L481.48,288.32L473.68,284.09L462.87,286.78L460.54,284.53L465.46,274.35L462.28,273.56L463.02,266.3L468.62,266.16L468.88,261.95L471.62,262.01L472.85,258.49L477.73,262.39L484.8,259.5L484.07,257.58L484.07,257.58L484.98,257.05L484.98,257.05L485.36,257.16L485.36,257.16z"/>
</g>
<g>
<title>"Brandenburg"</title>
<path id="DE-BB" class="land" d="M344.3,209.85l8.02,1.19l1.8,-3.16l7.08,1.66l1.2,-8.96l7.4,-3.75l4.06,2.84l5.54,-0.75l-1.38,-3.02l4.06,0.48l10.37,-5.54l1.53,-7.65l7.88,3.47l3.88,-2.05l1.78,3.73l8.55,2.52l3.33,5.44l13.8,-0.45l1.43,2.9l4.58,0.3l0.85,3.82l12.47,-1.39l-1.35,2.75l3.96,0.87l9.22,-8.82l5.16,3.63l4.42,-6.82l6.74,3.41l1.96,-5.34l3.03,0.62l2.39,-2.91l1.82,-8.42l4.82,-1.24l5.59,-7.61l6.29,-0.43l-2.43,-3.12l1.17,-4.79l5.37,5.8l2.49,8.85l20.64,-0.67l-0.89,7.39L524.76,195l10.43,0.28l3.57,-5.47l6.01,-2.08l0,0l2.24,7.22l-4.5,6.74l-0.82,12.83l-13.97,12.39l1.04,8.08l-2.41,4.88l14.57,9.2l18.26,18.7l-2.18,4.03l1.88,4.48l-6.32,9.97l3.71,12.6l7.73,3.9l-2.04,12.46l4.91,5.25l-4.07,16.95l-6.63,7.67l10.62,17.16l-1.73,7.98l0,0l-2.12,-1.61l-1.12,4.56l-4.09,0.3l-3.03,-3.09l-11.42,3.93l-3.51,3.93l-12.47,-4.08l-3.16,6.77l-3.47,0.11l1.82,3.13l-4.07,7.31l-2.52,-2.38l-11.84,3.46l-14.67,-0.7l-9.17,-8.53l-1.34,2.87l-3.49,-1.17l-3.59,5.3l-3.34,-1.15l-2.51,-3.24l2.05,-9.8l-4.06,-4.59l1.12,-2.54l-6.89,-5.4l0,0l8.48,-7.22l-2.99,-16.74l-6.2,0.89l0.25,-2.97l-4.62,0.05l-0.97,-3.69h-6.75l-0.47,-3.38l-4.14,0.53l-6.92,-5.08l-3.75,3.09l-4.62,-0.36l-3.86,-4.92l-2.84,1.76l-13.81,-15.78l5.04,-6.12l-3.3,-2.48l3.94,-9.8l-2.16,-7.13l3.66,-6.58l-5.64,-4.62l-3.65,2.66l0.29,-3.85l-2.94,0.24l1.64,-9.97l3.81,-0.42l-1.96,-9.34l3.75,-9.1l-1.54,-5.94l-2.51,-1.75l-4.4,2.67l-0.12,-4.27l-9.2,1.93l-9.36,-3.58l0.63,-4.53l-6.5,-3.88l-3.03,1.23l-1.1,-3.25l-3.23,-0.37l0.88,-2.82l-2.52,0.24l0,0l-9.3,-4.54l-7.29,2.44L344.3,209.85zM484.8,259.5l-7.07,2.89l-4.88,-3.9l-1.23,3.52l-2.74,-0.06l-0.25,4.21l-5.6,0.15l-0.75,7.26l3.18,0.78l-4.92,10.19l2.33,2.25l10.8,-2.69l7.8,4.23l0.02,-3.55l2.96,-1.03l0.85,2.5l10.45,1.97l0.25,3.99l7.05,-10.9l-9.42,-2.97l2.93,-6.08l-9.39,-6.55l0.93,-5.5l-2.92,-2.46l0,0l0.17,-0.58l0,0l-0.38,-0.1l0,0l-0.91,0.52L484.8,259.5z"/>
</g>
<g>
<title>"Bremen"</title>
<path id="DE-HB" class="land" d="M167.33,198.78l0.72,-0.1l0,0l6.18,1.69l-1.23,2.18l2.79,2.05l13.14,0.83l2.17,3.48l5.17,-2.19l2.46,2.73l-2.24,1.09l2.65,2.01l-0.55,5.41l-2.93,3.42l-4.4,-2.78l-2.81,2.1l-3.19,-3.5l-3.43,1.47l-6.32,-13.54l-6.92,-3.24l0,0l0,0l0,0l-1.31,-3.24l0,0L167.33,198.78zM169.27,158.35l8.9,-0.44l-2.71,3.76l0.96,8.47l-3.74,1l-1.17,-3.99l0,0l1.42,-1.84L169.27,158.35z"/>
</g>
<g>
<title>"Hamburg"</title>
<path id="DE-HH" class="land" d="M246.33,163.56L248.94,155.53L253.09,160.38L257.57,153.33L262.18,153.98L263.46,150.25L267.7,150.59L268.7,146.04L274.31,144.08L275.84,145.66L272.71,150.58L277.67,155.3L276.21,160.45L273.15,161.8L273.86,167.23L277,167.42L284.34,175.11L283.21,176.76L283.21,176.76L278.78,180.74L274.68,180.74L266.87,173.56L262.59,178.61L258.16,178.86L257.4,174.35L254.73,177.15L251.25,173.6L249.16,163.92z"/>
</g>
<g>
<title>"Hesse"</title>
<path id="DE-HE" class="land" d="M228.57,363.63L239.71,364.71L243.77,370.74L239.94,370.01L241.01,373.34L238.39,372.36L237.13,376.89L240.77,381.62L240.85,386.94L236.65,388.67L236.04,392.66L233.68,392.15L235.59,394.41L246.59,399.46L249.05,395.24L246.92,396.99L244.56,392.48L250.72,390.28L250.53,387.99L254.96,391.71L254.04,387.33L257.29,387.02L258.96,391.32L258.96,391.32L261.78,400.55L267.08,401.15L267.92,406.43L278.65,410.58L276.22,417.97L274.12,413.9L271.17,415.3L274.68,417.62L272.55,423.36L276.66,425.82L276.6,428.59L266.07,428.06L264.81,431.25L267.6,434.96L260.4,435.21L262.79,436.27L261.76,438.66L264.33,437.27L267.42,441.23L265.3,446.07L260.55,447.42L255.68,465.57L261,466.66L260.6,462.87L267,462.49L268.82,467.35L265.93,468.54L266.23,478L266.23,478L264.73,482.94L257.28,489.23L248.36,487.1L247.38,498.61L241.49,502.46L242.14,506.21L231.68,505.4L232.45,519.97L227.46,520.98L223.4,516.33L213.92,514.58L209.49,520.27L207.43,516.82L199.68,520.26L198.33,524.58L201.66,525.34L202.97,529.97L200.98,531.51L202.13,544.72L205.3,544.47L205.58,549.91L208.4,550.81L206.67,553.11L209.25,554.87L204.1,566.8L206.4,570.93L206.4,570.93L204.44,572.16L207.85,576.87L196.72,578.15L196.62,582.87L190.25,588.76L187.17,587.29L188.71,581.63L191.97,581.76L193.37,578.24L189.11,579.32L188.52,576.11L180.8,575.02L180.19,566.45L174,567.78L175.32,574.53L171.82,577.14L166.36,570.37L162.99,570.34L162.99,570.34L158.96,559.7L166.61,552.81L163.07,552.18L160.28,546.83L156.62,531.69L147.81,525.89L128.79,532.15L121.66,523.67L125.77,521.07L126.65,516.79L131.62,519.2L131.78,515.09L128.71,512.68L130.36,509.21L135.33,505.79L138.18,507.96L138.42,502.49L142.89,503.54L143.7,499.7L139.92,492.22L133.79,488.56L136.77,484.32L135.78,477.16L138.86,473.89L142.66,476.29L144.72,474.55L144.01,461.08L144.01,461.08L146.74,456.2L144.6,450.64L153.07,441.46L158.94,443.44L165.39,437.61L165.28,432.87L170.31,427.46L168.09,421.33L181.98,418.31L180.44,415.53L184.98,408.27L182.08,401.69L174.03,404.39L171.58,401.32L175.59,395.35L180.31,391.22L195.87,389.93L196.45,386.03L192.88,380.49L201,376.79L205.64,379.11L205.92,384.27L213.6,382.79L223.52,369.32L221.31,366.92z"/>
</g>
<g>
<title> "Mecklenburg-Vorpommern"
------------------------------------
Area • Total -23,174 km2 (8,948 sq mi)
Capital Schwerin
ISO 3166 code DE-MV
</title>
<path id="DE-MV" class="land" d="M506.34,97.76l4.16,7.29l9.15,5.19l13.36,13.4l-2.67,1.61l1.77,4.97l-11.17,-0.75l-6.21,3.27l-0.74,-3.29l-1.09,3.36l-5.44,-0.79l7.1,-6.32l-1.86,-8.65l3.52,0.01l-0.37,5.89l1.59,-2.95l3.65,2.11l0.45,-4.57l-4.91,-8.62l-3.86,0.08l1.03,5.1l-0.28,-2.04l-3.95,3.73l-0.23,-5.16l-5.59,3.1l2.7,-9.62l-4.04,-5.48L506.34,97.76zM435.9,69.27l1.61,1.44l-3.42,-0.11L435.9,69.27zM424.89,63.46l2.05,3.08l22.51,0.9l0.62,1.97l-7.87,2.04l-10.53,-1.85l-6.48,6.64l10.89,-5.09l-1.95,4.42l1.53,-3.05l2.24,3.08l3.26,-2.78l1.61,5.67l7.15,-7.56l6.79,-2.47l-0.25,4.24l4.26,3.17l0.76,9.39l4.76,1.33L464,88.41l2.73,-1.42l6.5,3.42l2.33,5.54l2.84,0.23l-3.42,2.36l6.37,-1.55l-2.24,3.23l1.8,-1.25l3.69,7.51l2.08,0.08l-0.64,-4.17l14.05,-4.86l-0.8,2.15l6.6,5.51l-3.72,7.61l10.86,11.49l-5.72,4.9l-0.46,3.65l18.19,11.06l10.48,-0.91l-3.31,4.93l4.15,1.7l8.41,38.14l0,0l-6.01,2.08l-3.57,5.47L524.76,195l8.17,-10.36l0.89,-7.39l-20.64,0.67l-2.49,-8.85l-5.37,-5.8l-1.17,4.79l2.43,3.12l-6.29,0.43l-5.59,7.61l-4.82,1.24l-1.82,8.42l-2.39,2.91l-3.03,-0.62l-1.96,5.34l-6.74,-3.41l-4.42,6.82l-5.16,-3.63l-9.22,8.82l-3.96,-0.87l1.35,-2.75l-12.47,1.39l-0.85,-3.82l-4.58,-0.3l-1.43,-2.9l-13.8,0.45l-3.33,-5.44l-8.55,-2.52l-1.78,-3.73l-3.88,2.05l-7.88,-3.47l-1.53,7.65l-10.37,5.54l-4.06,-0.48l1.38,3.02l-5.54,0.75l-4.06,-2.84l-7.4,3.75l-1.2,8.96l-7.08,-1.66l-1.8,3.16l-8.02,-1.19l0,0l-5.31,-1.53l0.82,-4.63l-6.83,-3.55l-6.5,-12.73l-4.42,-1.59l-5.27,4.67l-8.65,-7.03l-6.65,0.68l0,0l2.42,-9.56l12.25,-6.35l-0.17,-6.55l5.62,0.36l2.65,-8.29l-1.86,-5.47l-4.63,-0.29l-5.85,-5.36l0.85,-13.02l6.93,-5.62l1.96,2.87l3.45,-1.03l-4.59,-1.62l0.66,-3.64l0,0l8.62,-5.35l8.99,-0.97l5.08,3.39l-0.13,5.23l4.98,-2.57l7.9,6.75l1.52,-7.62l-2.42,0.9l-0.06,-4.29L354.8,120l-2.75,-0.41l-0.14,-3.94l6.66,-2.2l-0.02,5.96l1.88,-6.97l3.46,-0.25l3.28,-6.13l-1.35,-1.37l-4.67,5.94l-0.27,-2.75l9.71,-8.54l10.65,0.8l17.71,-4.2l3.87,-5.85l9.57,-6.35L424.89,63.46zM464.13,50.28l-5.16,15.79l2.21,-14.48L464.13,50.28zM482.31,41.36l-3.58,5.45l2.77,6.09l13.64,-0.74l2.81,2.3l-6.61,12.74l2.47,4.76l3.76,0.38l5.99,6.49l-3.54,7.89l-0.54,-3l-3.58,-0.14l3.71,-3.18l-5.99,1.1l4.77,-3.81l-4.41,2.36L492,77.51l-5.2,1.21l-9.55,7.89l0.34,2.53l0.46,-1.89l3.38,1.09l-1.64,3.56l-6.46,-3.18l1.98,0.57l0.78,-3.61l-4.17,2.7l-4.35,-1.79l-0.39,-2.88l-3.42,1.6l2.85,-2l-4.49,-3.49l0.83,-4.21l8.47,-1.45l-3.12,-4.98l-3.91,0.79l1.8,-3.63l-3.64,0.9l3.07,-4.87l3.67,0.83l-1.8,4.08l4.56,-3.56l-2.7,-0.61l0.18,-2.75l-3.88,0.31L464,56.46l6.37,-0.96l3.81,4.46l-0.45,-4.24l3.66,-2.99l-1.02,3.48l2.34,-1.22l2.35,7.22l2.45,2.46l3.33,-1.08l0.54,-9.21l-4.2,1.51l-4.83,-6.9l-8.04,6.07l2.62,-9.48l-7.86,9.54l5.41,-10.88L482.31,41.36z"/>
</g>
<g>
<title>"Lower Saxony"</title>
<path id="DE-NI" class="land" d="M60.4,159.06l-6.04,1.6l1.74,3.04l-5.74,-3.15l6.06,-3.78L60.4,159.06zM97.87,144.43l2.35,1.9l-4.99,-0.89L97.87,144.43zM109.16,141.9l3.35,1.47l-10.55,2.34l0.91,-3.27L109.16,141.9zM118.39,139.44l6,1.1l-9.43,1.86L118.39,139.44zM129.41,138.01l4.77,2.17l-7.91,-1.23L129.41,138.01zM179.97,127.51l5.23,5.99l7.84,1.37l8.04,-1.86l-1.01,-3.55l0,0l13.06,-0.56l6.67,2.83l12.21,17.13l2.84,8.25l11.48,6.46l0,0l2.83,0.35l2.08,9.69l3.48,3.54l2.68,-2.8l0.75,4.5l4.44,-0.25l4.28,-5.05l7.81,7.18h4.1l4.43,-3.98l0,0l18.28,7.39l0,0l6.65,-0.68l8.65,7.03l5.27,-4.67l4.42,1.59l6.5,12.73l6.83,3.55l-0.82,4.63l5.31,1.53l0,0l4.55,7.01l7.29,-2.44l9.3,4.54l0,0l-2.7,3.89l-2.98,-0.7l-0.45,6.88l-12.05,6.6l-19.61,-3.49l-4.16,6.16l-11.02,1.12l1.98,13.53l1.93,-0.26l5.79,11.2l3.61,-1.46l-2.47,5.88l4.52,7.55l-4.03,0.18l-0.71,3.44l8.97,8.94l-5.84,3.47l6.5,11.69l-4.59,3.15l2.97,2.63l-0.96,4.01l-6.47,3.21l1.43,4.79l-16.92,0.71l-8.8,4.69l5.67,4.84l-2.42,1.99l2.34,4.9l-4.6,4.32l-0.2,3.87l8.03,17.4l0,0l-3.96,2.24l1.14,6.25l-3.23,-2.15l-5.53,2.62l-5.49,-3.91l-4.01,0.48l-4.54,9.57l-4.16,2.37l-2,-1.58l-3.07,5.57l-5.45,1.37l-1.4,-1.95l-7.55,6.33l0,0l-1.67,-4.3l-3.25,0.31l0.92,4.38l-4.44,-3.72l0.19,2.28l-6.15,2.2l2.35,4.52l2.14,-1.75l-2.47,4.21l-11,-5.05l-1.91,-2.26l2.36,0.51l0.61,-3.99l4.2,-1.72l-0.08,-5.32l-3.63,-4.73l1.26,-4.53l2.61,0.98l-1.06,-3.33l3.82,0.73l-4.05,-6.03l-11.14,-1.08l0,0l-4.86,-0.35l0.01,-9.56l4.54,-5.24l0.89,-6.85l-8.64,0.73l1.04,-5.53l-4.3,-2.48l0.06,-4.22l-4.21,1.27l-2.11,-2.07l1.21,-9.22l-3.83,-2.61l1.27,-3.61l-9.09,-0.57l-1.66,-6.2l3.7,1.13l-0.5,-4.2l2.61,-0.77l-7.08,-5.01l10.03,-12.94l-1.83,-4.11l2.7,-3.43l-2.38,-2.18l-3,-0.29l-7.38,10.27l-5.19,1.29l-9.48,-0.64l-0.33,-11.32l-3.23,-2.83l-6.02,3.41l-3.47,-1.36l-5.41,7.04l-7.26,-1.47l0.85,5.74l8.13,4.31l-0.09,15.3l4.74,3.12l-7.04,7.64l-7.68,-2.54l-5.97,6.44l-10.21,0.4l-3.27,3.45l-6.11,-4.99l7.84,-3.25l1.17,-4.9l-7.94,-4.33l3.57,-6.49l-1.59,-3.61l3.82,-0.74l-3.51,-5.79l-14.26,-3.71l-1.57,-5.4l-5.14,-2.29l-2.74,4.46l2.44,1.08l-1.28,4.74l-18.29,11.56l-14.88,2.32l0,0l-2.39,-5.02l3.02,-8.69l-5.28,-9.79l-3.12,3.39l-11.76,-2.84l-3.81,-2.53l-1.13,-6.92l5.53,-1.08l-3.48,-6.68l2.53,-2.25l19.34,0.57l2.08,-21.73l8.28,-16.56l-2.42,-13.97l3.04,-4.26l-1.13,-6.84l2.29,-8.14l4.02,-0.19l-18.76,-2.27l1.21,-20.46l4.21,3.68l-3.7,-3.96l4.04,2.69l2.51,-3.23l-3.45,-3.97l9.89,-9.75l7.43,-1.81l10.45,1.73l11.38,-5.21l0.02,2.11l6.55,-1.16l1.8,-2.54l-1.58,2.92l13.81,-0.12l1.09,7.07l4.65,0.61l3.51,10.82l-7.1,3.26l0.18,3.1l8.78,7.68l4.21,-0.14l2.93,-5.51l-0.19,-6.81l-5.28,0.11l3.42,-9.74l3.58,-0.12l8.07,6.35l3.47,-0.63l2.41,3.76l0,0l1.17,3.99l3.74,-1l-0.96,-8.47l2.71,-3.76l-8.9,0.44l0,0l-2.48,-9.53l4.18,-12.99l4.08,-7.1L179.97,127.51zM167.27,198.66L167.27,198.66l1.31,3.24l6.92,3.24l6.32,13.54l3.43,-1.47l3.19,3.5l2.81,-2.1l4.4,2.78l2.93,-3.42l0.55,-5.41l-2.65,-2.01l2.24,-1.09l-2.46,-2.73l-5.17,2.19l-2.17,-3.48l-13.14,-0.83l-2.79,-2.05l1.23,-2.18l-6.18,-1.69L167.27,198.66z"/>
</g>
<g>
<title>"North Rhine-Westphalia"</title>
<path id="DE-NW" class="land" d="M76.38,302.23L91.26,299.91L109.56,288.35L110.84,283.61L108.4,282.53L111.14,278.07L116.27,280.36L117.84,285.76L132.1,289.47L135.61,295.25L131.79,295.99L133.38,299.6L129.81,306.09L137.75,310.42L136.58,315.32L128.74,318.57L134.84,323.57L138.11,320.12L148.32,319.71L154.29,313.27L161.97,315.81L169,308.17L164.26,305.05L164.35,289.75L156.22,285.44L155.37,279.7L162.63,281.17L168.04,274.14L171.52,275.49L177.54,272.09L180.77,274.92L181.1,286.24L190.58,286.88L195.77,285.58L203.15,275.32L206.15,275.61L208.53,277.79L205.83,281.23L207.66,285.33L197.63,298.27L204.71,303.28L202.09,304.04L202.59,308.25L198.89,307.12L200.54,313.31L209.63,313.88L208.36,317.5L212.19,320.1L210.98,329.32L213.09,331.4L217.31,330.13L217.25,334.35L221.55,336.83L220.51,342.36L229.15,341.63L228.26,348.48L223.71,353.72L223.71,363.28L228.57,363.63L228.57,363.63L221.31,366.92L223.52,369.32L213.6,382.79L205.92,384.27L205.64,379.11L201,376.79L192.88,380.49L196.45,386.03L195.87,389.93L180.31,391.22L175.59,395.35L171.58,401.32L174.03,404.39L182.08,401.69L184.98,408.27L180.44,415.53L181.98,418.31L168.09,421.33L170.31,427.46L165.28,432.87L165.39,437.61L158.94,443.44L153.07,441.46L144.6,450.64L146.74,456.2L144.01,461.08L144.01,461.08L138.65,459.88L134.03,452.04L134.05,444.96L125.1,441.26L126.51,436.67L122.85,435.21L119.22,437.66L120.94,445.04L114.44,447.46L115.13,451.42L110.08,455.63L96.22,457.75L93.72,465.7L85.91,467.3L85.17,464.78L81.7,469.61L79.69,468.42L78.04,471.05L75.88,469.03L72.18,473.18L67.87,473.6L67.91,476.25L64.81,476.88L65.96,482.74L63.25,484.33L59.61,480.43L56.06,482.31L59.52,493.57L53.31,496L51.25,492.58L49.29,495.2L46.99,490.88L37.45,495.98L34.92,490.75L34.4,497.38L34.4,497.38L30.39,491.64L32.63,486.02L31,480.75L23.07,480.09L20.03,475.41L25.8,466.98L19.96,466.99L16.38,457.62L11.14,457.68L10.3,452.21L6.95,449.92L10.22,448.04L9.84,444.94L13.35,444.87L14.68,437.33L9.87,436.02L10.22,431.03L2.1,431.94L0.03,424.56L3.1,422.7L6,425.79L9.29,420.15L19.74,413.5L17.53,411.91L19.17,409.75L13.86,412L13.18,404.88L23.01,392.69L22.22,377.36L14.41,367.78L16.02,362.62L10.66,360.78L11.4,356.38L5.75,354.14L8.02,349.6L5.13,345.39L12.71,341.21L19.2,343.66L16.2,337.39L34.27,345.09L33.62,340.22L38.56,342.38L52.24,335.8L55.28,337.7L61.53,328.65L52.4,323.19L52.83,319.98L55.56,319.49L57.1,315L63.11,314.79L71.34,303.9z"/>
</g>
<g>
<title>"Saxony"</title>
<path id="DE-SN" title="Saxony" class="land" d="M409.06,420.36L403.51,415.05L403.77,405.34L400.41,396.85L403.55,395.99L400.5,382.43L404.19,379.5L405.85,372.11L418.09,370.21L419.2,367.43L421.97,368.9L430.88,365.69L429.82,367.29L435.07,361.75L440.17,363.52L444.84,359.68L451.1,364.45L453.48,361.28L458.17,363.61L458.17,363.61L465.06,369.01L463.95,371.54L468.01,376.13L465.95,385.93L468.46,389.17L471.8,390.33L475.4,385.03L478.89,386.2L480.23,383.33L489.4,391.86L504.07,392.57L515.91,389.1L518.43,391.49L522.5,384.18L520.68,381.05L524.16,380.93L527.32,374.16L539.79,378.24L543.3,374.3L554.72,370.38L557.76,373.47L561.84,373.17L562.96,368.61L565.08,370.21L565.08,370.21L565.46,375.9L579.17,381.68L580.87,394.65L584.98,401.69L580.86,421.64L569.28,447.49L558.02,443.73L559.96,436.33L554.58,437.64L556.68,430.81L550.29,427.18L550.48,424.72L549.9,427.06L544.64,427.52L537.82,423.85L535.1,430.7L539.27,430.96L538.35,434L543.85,435.87L543.2,439.71L535.53,440.02L523.44,448.37L512.17,450.25L512.04,455.14L509.38,456.85L488.35,459.06L488.24,465.7L484.54,469.3L478.5,464.63L475.36,471.66L470.54,470.42L467.23,479.28L456.82,478.64L456.11,484.77L451.41,489.31L443.25,483.66L442.67,486.5L441.71,484.71L437.9,486.39L436.06,489.9L433.92,487.95L423.7,489.94L412.12,505.41L412.5,512.26L409.51,511.86L409.75,507.48L406.3,504.99L407.28,502.51L403.83,502.33L402.79,497.38L397.47,497.79L397.47,497.79L389.6,494.54L389.97,490.78L386.17,487.29L386.17,487.29L384.37,484.79L387.82,484.27L388.86,480.96L382.78,475.87L391.14,466.23L394.64,474.55L396.15,472.01L401.44,471.96L400.58,466.68L403.18,468.31L403.78,465.78L407.84,466.63L411.24,463.28L407.72,460.17L407.97,455.85L405.43,455.76L409.46,451.27L407,447.48L413.15,447.22L414.87,444.14L419.12,445.23L421.83,440.04L432.72,437.54L429.76,429.79L423.35,427.71L423.1,423.08L412.5,419.03z"/>
</g>
<g>
<title>"Saxony-Anhalt"
</title>
<path id="DE-ST" title="Saxony-Anhalt" class="land" d="M365.45,218.95L367.97,218.71L367.09,221.53L370.32,221.9L371.42,225.16L374.45,223.93L380.95,227.81L380.32,232.33L389.68,235.92L398.88,233.99L399,238.25L403.4,235.59L405.91,237.34L407.45,243.27L403.7,252.38L405.66,261.72L401.86,262.14L400.21,272.11L403.15,271.87L402.87,275.71L406.51,273.05L412.15,277.67L408.49,284.25L410.65,291.37L406.71,301.18L410.01,303.66L404.97,309.78L418.78,325.56L421.61,323.81L425.47,328.72L430.09,329.08L433.84,326L440.76,331.08L444.91,330.55L445.38,333.93L452.13,333.93L453.1,337.62L457.72,337.57L457.46,340.54L463.67,339.65L466.65,356.39L458.17,363.61L458.17,363.61L453.48,361.28L451.1,364.45L444.84,359.68L440.17,363.52L435.07,361.75L429.82,367.29L430.88,365.69L421.97,368.9L419.2,367.43L418.09,370.21L405.85,372.11L404.19,379.5L400.5,382.43L403.55,395.99L400.41,396.85L403.77,405.34L403.51,415.05L409.06,420.36L409.06,420.36L406.94,425.62L409.56,427.41L404.76,435.61L402.78,431.91L392.16,432.77L384.1,423.91L375.7,425.21L369.96,418.22L358.26,419.09L357.31,409.95L350.71,407.1L357.69,399.43L352.63,390.75L347.7,387.76L326.79,386.99L323.84,374.77L320.02,370.61L320.54,368.2L322.79,369.28L322.26,366.55L308.21,364.11L308.21,364.11L300.18,346.71L300.39,342.85L304.98,338.52L302.64,333.62L305.06,331.63L299.4,326.79L308.2,322.1L325.12,321.39L323.69,316.6L330.16,313.39L331.12,309.38L328.15,306.74L332.74,303.59L326.25,291.89L332.08,288.43L323.11,279.48L323.82,276.04L327.85,275.86L323.33,268.31L325.79,262.43L322.18,263.89L316.39,252.69L314.46,252.95L312.48,239.42L323.5,238.31L327.66,232.14L347.27,235.63L359.32,229.03L359.76,222.15L362.75,222.84z"/>
</g>
<g>
<title>"Schleswig-Holstein"
------------------------------------
Area • Total -15,763.18 km2 (6,086.20 sq mi)
Capital Kiel
ISO 3166 code DE-SH
</title>
<path id="DE-SH" class="land" d="M166.82,66.59l2.35,2.45l-1.94,1.67l-2.67,-4.29L166.82,66.59zM332.49,58.08l9.41,2.94l5.37,11.14l-7.81,-2.19l-4.48,2.14l-2.14,-4.95l-4.11,0.5l1.58,1.6l-2.51,-1.5l1.31,-7.3L332.49,58.08zM167.37,57.79l-0.91,4.28l-1.17,-5.25L167.37,57.79zM180.99,55.13l-0.17,6.25l-5.39,1.13L173.59,58L180.99,55.13zM171.44,52.84l1.27,2.23l-4.19,-2.04L171.44,52.84zM160.46,46.18l0.94,2.71l-2.42,0.45l-4.45,-6.2l4.47,-5.15l-1.37,2.73L160.46,46.18zM169.54,33.33l3.91,1.16l-1.25,7.3l-10.71,-2.42l1.81,-5.03L169.54,33.33zM163.97,0.73l1.77,0.6l-4.43,0.14l2.81,3.28l-5.56,5.21l1.11,7.58l3.58,2.32l11.07,-1.05l2.19,-2.65l19.86,0.96l18.37,5.74l0.89,4.46l2.86,0.97l3.16,0.14l4.19,-4.6l1.73,5.88l11.27,-9.7l-0.47,5.07l12.03,3.77l3.84,4.81l3.35,-1.14l-0.01,-3.72l3.27,1.96l5.13,10.28l-2.49,-0.09l2.35,1.88l-0.49,13.02l-4,5.24L253,64.29l2.07,2.87l16.57,-4.02l4.75,3.21l-4.27,15.75l3.28,-1.77l2.68,-9.43l6.21,-2.37l17.55,7.84l6.6,6.44l5.49,-0.85l8.99,-7.58l6.01,1.51l5.56,-3.27l0.84,2.82l-4.37,2.11l2.28,16.93l-14.19,12.24l-3.89,-2.32l-3.69,6.28l2.12,5.41l5.44,0.71l2.12,3.81l0,0l-0.66,3.64l4.59,1.62l-3.45,1.03l-1.96,-2.87l-6.93,5.62l-0.85,13.02l5.85,5.36l4.63,0.29l1.86,5.47l-2.65,8.29l-5.62,-0.36l0.17,6.55l-12.25,6.35l-2.42,9.56l0,0l-18.28,-7.39l0,0l1.13,-1.65l-7.34,-7.69l-3.15,-0.18l-0.71,-5.44l3.07,-1.35l1.46,-5.15l-4.96,-4.72l3.12,-4.92l-1.53,-1.58l-5.61,1.96l-1,4.55l-4.24,-0.34l-1.27,3.73l-4.62,-0.65l-4.48,7.05l-4.14,-4.86l-2.61,8.04l0,0l-11.48,-6.46l-2.84,-8.25l-12.21,-17.13l-6.67,-2.83l-13.06,0.56l0,0l-6.27,-6.5l-1.5,-7.38l-4.91,-2.29l4.75,-2.33l5.01,1.18l1.7,-2.38l-3.64,-7.99l-4.47,1.29l-3.12,-5.67l1.94,-12.13l-8.27,-0.65l-2.03,2.44L173,82.47l1.71,-5.06l2.16,1.62l3.1,-1.96l-5.35,-1.38l0.8,-2.11l16.15,-2.02l11.39,-7.45l-3.03,-0.39l-1.19,-4.4l-5.54,6.62l-5.8,-1.17l5.53,-13.43l-0.83,-1.84l-4.22,1.34l2.68,-2.28l-10.42,-11.71l-5.97,-17.46L162.4,23.4l-4.71,-3.58l-3.78,14.22l1.04,-17.71l6.25,-15.67L163.97,0.73z"/>
</g>
<g>
<title>"Thuringia"</title>
<path id="DE-TH" class="land" d="M308.21,364.11L322.26,366.55L322.79,369.28L320.54,368.2L320.02,370.61L323.84,374.77L326.79,386.99L347.7,387.76L352.63,390.75L357.69,399.43L350.71,407.1L357.31,409.95L358.26,419.09L369.96,418.22L375.7,425.21L384.1,423.91L392.16,432.77L402.78,431.91L404.76,435.61L409.56,427.41L406.94,425.62L409.06,420.36L409.06,420.36L412.5,419.03L423.1,423.08L423.35,427.71L429.76,429.79L432.72,437.54L421.83,440.04L419.12,445.23L414.87,444.14L413.15,447.22L407,447.48L409.46,451.27L405.43,455.76L407.97,455.85L407.72,460.17L411.24,463.28L407.84,466.63L403.78,465.78L403.18,468.31L400.58,466.68L401.44,471.96L396.15,472.01L394.64,474.55L391.14,466.23L382.78,475.87L388.86,480.96L387.82,484.27L384.37,484.79L386.17,487.29L386.17,487.29L379.89,490.67L376.99,487.67L360.59,492.12L358.09,486.59L355.54,487.62L354.1,485.17L354.77,478.48L349.35,477.53L345.84,482.04L343.09,481.72L345.43,493.56L343.32,502.7L336.61,501L337.36,496.54L334.65,492.94L326.34,494.82L323.22,490.38L316.62,490.37L309.05,495L309.21,497.5L317.46,502.02L317.53,505.09L310.2,504.4L309.26,509.04L302.29,506.5L301.79,496.22L298.27,493.2L294.9,494.07L292.4,489.44L288.76,490.22L284.63,480.24L278.37,478.53L276.56,474.22L272.67,475.36L270.48,473.26L266.23,478L266.23,478L265.93,468.54L268.82,467.35L267,462.49L260.6,462.87L261,466.66L255.68,465.57L260.55,447.42L265.3,446.07L267.42,441.23L264.33,437.27L261.76,438.66L262.79,436.27L260.4,435.21L267.6,434.96L264.81,431.25L266.07,428.06L276.6,428.59L276.66,425.82L272.55,423.36L274.68,417.62L271.17,415.3L274.12,413.9L276.22,417.97L278.65,410.58L267.92,406.43L267.08,401.15L261.78,400.55L258.96,391.32L258.96,391.32L266.51,385L267.91,386.94L273.36,385.58L276.44,380.01L278.43,381.59L282.59,379.22L287.13,369.65L291.14,369.17L296.62,373.08L302.16,370.46L305.39,372.61L304.25,366.35z"/>
</g>
</svg>The inplete part of the map is shown here as there is a limit on the number of characters
A more plete copy of the map jsfiddle
Thanks to the author of the script @Observer
I never manipulated an existing svg with jquery. To manipulate an existing svg I might remend trying to do so with d3.js instead.
Maybe this article will help you start out with it.
Alternatively you could create a choropleth map with d3.js like in this tutorial.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742378111a4432599.html
评论列表（0条）