How do I show map points using country codes with Highmaps?

Question

I have looked at several examples and put together my own world map as I want it, just one detail missing. I can position map points with coordinates, but I cannot position map points with country codes.

This is my example: http://jsfiddle.net/2sk6hfvz/

{
    "type": "mapbubble", // <<-- change this to 'mappoint', why doesn't ghost icons show up?
    "name": "Ghosts",
    "dataLabels":
    {
        "enabled": false
    },
    "marker":
    {
        "symbol": "url(https://cdn1.iconfinder.com/data/icons/Momentum_MatteEntireSet/32/ghost.png)"
    },
    mapData: mapData,
    joinBy: ['iso-a2', 'code'],
    data:
    [
            {
                name: "Liège",
                code: "SE",
                z: 1
            },
            {
                name: "Buble",
                code: "DE",
                z: 1
            }
        ]
    }

Change "mapbubble" to "mappoint" in the example. Why doesn't the mappoint setting show up in the same way as mapbubble then using country codes?

Answer 1

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}
}