Как выровнять подсказки рядом с графиками на карте Рафаэля / Мапаэля

Question

Я пытаюсь выровнять подсказки на карте rafael / mapael. В настоящее время они по умолчанию используют нижнюю левую сторону карты, но надеются, что они будут отображаться рядом с участком, который находится в процессе наблюдения.

Я создал jsbin здесь.

http://jsbin.com/pogaqecuwa/edit?html,js,output

Я также хочу добавить href ссылки на графики. Возможно ли, если да, могу ли я включить ссылку на каждый график или мне нужно перехватить обработчик событий?

    function initMap() {
        var $map = $('#map'),
                state;
        $map.mapael({
            map: {
                name: "usa_states",
            },


            plots: {
                'ny': {
                    latitude: 40.717079,
                    longitude: -74.00116,
                    tooltip: {content: "New York",
                              offset: {
                left:3000,
                top:1000
              }
                    }
                },
                'on': {
                    latitude: 33.145235,
                    longitude: -83.811834,
                    size: 18,
                    tooltip: {content: "Oconee National Forest"}
                },
                'sf': {
                    latitude: 37.792032,
                    longitude: -122.394613,
                    size: 12,
                    tooltip: {content: "San Francisco"}
                },
                'la': {
                    latitude: 26.935080,
                    longitude: -80.851766,
                    size: 26,
                    tooltip: {content: "Lake Okeechobee"}
                },
                'gc': {
                    latitude: 36.331308,
                    longitude: -83.336050,
                    size: 10,
                    tooltip: {content: "Grainger County"}
                },
                'cc': {
                    latitude: 36.269356,
                    longitude: -76.587477,
                    size: 22,
                    tooltip: {content: "Chowan County"}
                },
                'll': {
                    latitude: 30.700644,
                    longitude: -95.145249,
                    tooltip: {content: "Lake Livingston"}
                },
                'tc': {
                    latitude: 34.546708,
                    longitude: -90.211471,
                    size: 14,
                    tooltip: {content: "Tunica County"}
                },
                'lc': {
                    latitude: 32.628599,
                    longitude: -103.675115,
                    tooltip: {content: "Lea County"}
                },
                'uc': {
                    latitude: 40.456692,
                    longitude: -83.522688,
                    size: 11,
                    tooltip: {content: "Union County"}
                },
                'lm': {
                    latitude: 33.844630,
                    longitude: -118.157483,
                    tooltip: {content: "Lakewood Mutual"}
                }
            }
        });
}

//ie svg height fix
        function _fixMapHeight() {
            $map.find('svg').css('height', function () {
                return $(this).attr('height') + 'px';
            });
        }


    $(function () {
        initMap();
    });  

Answer 1

На самом деле, Mapael предоставляет пример, который показывает вам, как выполнять то, что вы хотите.

Если вы наведите курсор мыши на Ренна, вы увидите всплывающую подсказку.

Если вы нажмете на Ренн, вы попадете на страницу Википедии.

---

При использовании всплывающих подсказок вам нужно добавить немного CSS.

Обычно этот используется:

.mapael .mapTooltip {
    position: absolute;
    background-color: #474c4b;
    moz-opacity: 0.70;
    opacity: 0.70;
    filter: alpha(opacity=70);
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    max-width: 200px;
    display: none;
    color: #fff;
}

Тем не менее, только атрибуты position и display являются обязательными, чтобы иметь функциональную подсказку.

Что касается ссылок href, Mapael действительно поддерживает это! Область, участок или ссылка могут иметь параметр href (и, если необходимо, целевой параметр).

Согласно документации:

defaultArea / defaultPlot / defaultLink : (Object) Default options for all areas, plotted points or curved links of the map. 
    ...
    href : (String) Href for the elements.
    target : (String) Target of the href for the elements (it can be set to a regular HTML target such as _blank, _self, ...).

---

Как примечание, я не мог не заметить, что в вашем примере JSBin вы используете Mapael v0.7.1. Я настоятельно рекомендую вам обновить до последней версии 2.1.0.