Как показать точки на карте, используя коды стран с Highmaps?

Question

Я посмотрел на несколько примеров и составил свою карту мира, как я хочу, только одна деталь отсутствует. Я могу расположить точки на карте с координатами, но не могу расположить точки на карте с кодами стран.

Это мой пример: 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
            }
        ]
    }

Измените "mapbubble" на "mappoint" в примере. Почему настройки mappoint не отображаются так же, как mapbubble, тогда используются коды стран?

Answer 1

Причина, по которой они не работают одинаково, заключается в том, что вы должны передавать координаты x и y, когда используете "mappoint".

Ваши "гоблинские" данные:

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

Ваши "призрачные" данные (без "x" и "y"):

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

Если вы дадите "призрачным" данным некоторые свойства "x" и "y", это сработает. Пожалуйста, посмотрите этот пример.

Другая вещь, которую вы можете попробовать, если вы хотите вставить изображения в карту без указания "x" и "y", это сделать это через dataLabels. В этом примере я создал карту США. В каждом штате с плотностью населения менее 7 человек на квадратный метр будет отображаться призрак. Если вы хотите пойти по этому пути, вам нужно использовать два свойства:

1. useHTML: true так что вы можете иметь HTML <img> теги как метки данных
2. использование formatter вместо format Обратите внимание, что вы должны передать функцию 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}
}