ipolitique
Posts: 36
Joined: Sat Oct 25, 2014 12:03 am

Map not in Map Collection

Hi,
The Map I need is not listed in Highmaps - Map Collection.
So I'm trying to recreate it from svg.
I need several qualitative series (series.1: gauche, series.2: droite etc.)
But something is wrong in my code.
Could you please help me?





$(function () {


// Instanciate the map
$('#container').highcharts('Map', {
chart: {
spacingBottom: 20,
events:{
load: function() {
this.credits.element.onclick = function() {
window.open(
'http://www.france-politique.fr',
'_top'
);
}
}
}
},

title : {
text : 'Départementales 2021: présidents élus',
y: 0,
style: {
fontSize: '14px',
color: '#303030',
fontWeight: 'bold'
}
},

subtitle : {
enabled: false,
text : '',
y: 26,
style: {
fontSize: '11px',
color: '#666666',
fontWeight: 'normal'
}
},

credits: {
enabled: true,
text: 'Tous droits réservés Laurent de Boissieu pour France-politique.fr',
position: {
align: 'center',
verticalAlign: 'top',
x: 0,
y: 25
},
style: {
fontSize: '11px',
color: '#666666',
fontWeight: 'normal'
}
},

legend: {
enabled: true,
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
},

mapNavigation: {
enabled: true
},

series.1: [
{
type: "map",
name: "gauche",
color: "red",
data: [
{
name: "93",
path: "M 462.46 189.59 465.29 196.95 463.3 201.29 464.65 207.98 458.95 203.11 454.18 204.11 452.31 199.31 448.45 199.43 449.21 195.53 446.77 194.84 452.34 193.06 456.82 194.55 462.46 189.59 Z",
},
],
},
],

series.2: [
{
type: "map",
name: "droite",
color: "blue",
data: [
{
name: "077",
path: "M 463.39 218.42 465.56 210.96 464.65 207.98 463.3 201.29 465.29 196.95 462.46 189.59 464.69 183.28 467 181.24 471.58 184.63 474.5 185 477.72 181.73 481.3 184.2 483.21 182.85 487.56 183.79 489.59 182.29 492.87 182.81 493.35 179.91 498.91 181.52 499.91 184.95 500.01 189.54 504.1 193.07 504.89 196.1 507.24 195.19 508.8 198.81 511.22 197.26 511.83 201.82 518.07 203.92 518.1 206.33 513.28 207.82 512.79 212.33 517.22 214.25 517.28 218.93 515.52 221.03 517.65 223.34 519.88 222.78 522.43 224.87 519.29 226.3 517.05 229.41 518.18 231.26 514.37 234.23 515.27 236.09 512.47 237.89 512.81 242.52 514.09 245.76 511.11 247.39 505.24 246.91 501.15 248.19 499.42 246.97 495.14 248.83 492.11 248.56 490.01 253.34 491.78 256.58 489.37 262.35 487.45 262.54 485.23 266.35 481.01 267 479.22 268.9 476.86 265.96 471.3 269.76 467.49 268.66 459.81 269.68 456.64 269.33 457.77 266.15 460.19 263.32 459.21 259.45 453.99 256.93 453.02 251.98 454.66 248.26 460.5 244.46 459.12 241.09 458.85 234.22 460.2 230.12 461.76 220.3 463.39 218.42 Z",
},
{
name: "078",
path: "M 406.26 182.81 408.88 182.48 413.01 185.92 419.35 183.16 424.06 185.77 425.78 188.17 429.02 188.29 430.33 190.12 434.53 188.95 439.88 192.72 441.69 194.89 441.33 198.62 438.24 202.08 438.32 206.89 442.77 210.64 435.03 214.31 434.02 218.75 431.84 218.55 430.76 221.28 431.52 224.14 429.97 230.28 425.22 229.75 426.1 233.31 424.14 239.26 423.05 240.98 419.48 240.24 416.88 238.41 415.4 234.05 416.17 230.44 411.5 228.18 411.87 224.86 408.99 224.92 405.23 220.34 403.91 216.7 406.81 212.69 403.87 209.48 404.42 202.45 401.81 196.79 399.64 195.08 398.5 189.62 396.54 185.48 401.07 183.55 406.26 182.81 Z",
},
{
name: "091",
path: "M 442.77 210.64 448.38 213.17 451.36 215.8 456 215.62 459.48 214.42 463.39 218.42 461.76 220.3 460.2 230.12 458.85 234.22 459.12 241.09 460.5 244.46 454.66 248.26 453.02 251.98 450.3 253.03 448.48 250.81 446.5 253.05 443.05 252.3 441.21 249.97 438.56 253.87 431.83 254.06 428.26 254.8 426.2 252.79 427.4 244.57 425.37 243.95 424.14 239.26 426.1 233.31 425.22 229.75 429.97 230.28 431.52 224.14 430.76 221.28 431.84 218.55 434.02 218.75 435.03 214.31 442.77 210.64 Z",
},
{
name: "092",
path: "M 446.77 194.84 449.21 195.53 448.45 199.43 444.77 201.21 442.7 203.63 449.1 206.99 448.38 213.17 442.77 210.64 438.32 206.89 438.24 202.08 441.33 198.62 446.77 194.84 Z",
},
{
name: "094",
path: "M 449.1 206.99 453.32 205.89 454.18 204.11 458.95 203.11 464.65 207.98 465.56 210.96 463.39 218.42 459.48 214.42 456 215.62 451.36 215.8 448.38 213.17 449.1 206.99 Z",
},
{
name: "095",
path: "M 464.69 183.28 462.46 189.59 456.82 194.55 452.34 193.06 446.77 194.84 441.33 198.62 441.69 194.89 439.88 192.72 434.53 188.95 430.33 190.12 429.02 188.29 425.78 188.17 424.06 185.77 419.35 183.16 413.01 185.92 408.88 182.48 406.26 182.81 409.19 177.99 410.36 170.89 412.18 168.89 414.23 173.6 417.97 173.27 422.69 175.38 429.66 174.28 434.14 171.34 440.47 174.59 442.66 173.98 444.72 176.54 448.65 173.88 450.99 177.08 454.19 176.64 459.51 179.83 462.51 179.22 464.69 183.28 Z",
},
],
},
],

})
})
User avatar
dawid.d
Site Moderator
Posts: 1195
Joined: Thu Oct 06, 2022 11:31 am

Re: Map not in Map Collection

Hello,

Thanks for the question!

It looks like there are a few syntax issues with your code, especially with defining the series structure in Highcharts. Here’s a revised version that should fix the errors:
  1. Use series as an array instead of series.1, series.2, etc.
  2. Each series entry should be an object inside an array.
Demo: https://jsfiddle.net/BlackLabel/nw2hkjg4/

Hope it helps.

Best regards,
Dawid Draguła
Highcharts Developer
ipolitique
Posts: 36
Joined: Sat Oct 25, 2014 12:03 am

Re: Map not in Map Collection

Hello dawid.d,
It works perfectly, thank you very much for your helpful help!
Best regards

Return to “Highcharts Maps”