rafael/mapaelのマップ上にプロットの横にツールチップを配置する方法

Question

ラファエル/マップマップ上にツールチップを配置しようとしています。現在は、地図の左下にデフォルト設定されていますが、地図上に配置されているプロットの近くに表示されることを期待しています。

私はここに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はan exampleを提供しています。

マウスでレンヌを移動すると、ツールチップが表示されます。

レンヌをクリックすると、ウィキペディアのページに移動します。

---

ツールチップを使用する場合は、実際に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; 
} 

しかし、唯一の位置および表示属性が機能ツールチップを持っていることが必須です。

hrefリンクに関して、Mapaelは実際にそれをサポートしています！エリア、プロット、またはリンクには、hrefオプション（必要に応じてターゲットオプション）を設定できます。 documentation 1として

：サイドノートとして

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にアップデートすることを強くお勧めします。