How to customize a map?

The code you pasted should work except you will need to replace “chartdiv” with “%CHART%”

Thanks it’s work!

I have a last question, how to display an extra info in the bubble? Like:

Texas Ohio
25 millions 11,5 millions

Thanks.

You can add that info in the “title” property of the area. I.e.:

{
  id: "US-TX",
  title: "Texas\n25 millions",
  value: 25000000
}

Let me know if this works for you. (i.e. you don’t display area title anywhere else but rollover balloon)

If you do, there might be other advanced approaches for it.

Perfect! Even the 25 millions appears on the same line than the name of the state..but I don’t want to ask too much.

Replace the “\n” with <br> to make the line in a balloon break.

Perfect.

I have another question…sorry I am pain in the ass.

How to add a permanent text on a specific area. For instance on the USA map I would like to see all the names of the 50 states and not only when the mouse is over one and the bubble appears.

Thanks.

You can place any label using latitude/longitude coordinates.

Here’s an example that displays a label over a few states:

https://jsfiddle.net/jEHXm/

Please note that latitude/longitude coordinates on this map are arbitrary and do not correspond with real life coordinates. That is because the map is distorted for visual purposes.

You can use the above example to find out the coordinates as well. Just click on a any point in the map while holding the SHIFT key. The coordinates will be displayed just below the map.

You can use it to find out the coordinates for other labels you may need.

In fact my plan was to mixed utilisation; Bubble and permanent text. Is it possible?

How to combine that

dataProvider: {
map: “usaLow”,
areas: [{
id: “US-CA”,
title: “The Golden State33 millions”,
value: 33000000
}]

and that

dataProvider: {
map: “usaLow”,
getAreasFromMap: true,
images: [
{ latitude: 52.694617, longitude: -129.74359, label: ‘CA’, mouseEnabled: false, labelPosition: ‘middle’ }
]
},

Sure:

dataProvider: {
    map: "usaLow",
    areas: [{
        id: "US-CA",
        title: "The Golden State33 millions",
        value: 33000000
    }],
    images: [{
        latitude: 52.694617,
        longitude: -129.74359,
        label: 'CA',
        mouseEnabled: false,
        labelPosition: 'middle'
    }]
},

Thanks, it works perfectly. I forgot to put the comma here:
}],

Great ??