score:2

Accepted answer

The reason they are not working the same way is because you have to pass x and y coordinates when you use "mappoint".

Your "goblin" data:

{
    "name": "Adam",
    "x": 1751,
    "y": -9500
}

Your "ghost" data (no "x" and "y"):

{
    name: "Li├Ęge",
    code: "SE",
    z: 1
}

If you give the "ghost" data some "x" and "y" properties, it will work. Please see this example.

The other thing that you can try if you want to insert images into the map without specifying any "x" and "y" is to do it via the dataLabels. In this example here, I have created a map of the USA. Each state that has the population density smaller than 7 people per square metre will display a ghost. If you want to go this way, there are two properties that you need to use this way:

  1. useHTML: true so you can have HTML <img> tags as data labels
  2. use formatter instead of format, but please note you have to pass a function to formatter

var ghostElem = '<img src="https://cdn1.iconfinder.com/data/icons/Momentum_MatteEntireSet/32/ghost.png"/>';


dataLabels: {
    enabled: true,
    useHTML: true,
    color: 'white',
    formatter: function() { return (this.point.value <7)? ghostElem: null}
}


Related Articles