Jmap jQuery plugin

この地図では各都道府県別に色を設定し、都道府県を選択するとその都道府県の情報がモーダルで表示されます。

都道府県選択の挙動は、onSelect で指定する事ができます。

Example

$('#jmap').jmap({
    height: "450px",
    showHeatmap: true,
    showHeatlabel: true,
    heatmapLabelUnit: '人'
    heatmapConditions: ["<5000", ">=5000",  ">=8000"], // 色がマッチする条件
    heatmapColors: ["#cccccc", "#FFA500", "#FF0000"], 　　　　　 // マッチした場合のヒートマップの色
    areas: [
    {code: 1,name: "北海道",number: 5320},
    {code: 2,name: "青森",number: 1278},
    {code: 3,name: "岩手",number: 1255},
    {code: 4,name: "宮城",number: 2323},
    {code: 5,name: "秋田",number: 996},
    {code: 6,name: "山形",number: 1102},
    {code: 7,name: "福島",number: 1882},
    {code: 8,name: "茨城",number: 2892},
    {code: 9,name: "栃木",number: 1957},
    {code: 10,name: "群馬",number: 1960},
    {code: 11,name: "埼玉",number: 7310},
    {code: 12,name: "千葉",number: 6246},
    {code: 13,name: "東京",number: 13724},
    {code: 14,name: "神奈川",number: 9159},
    {code: 15,name: "新潟",number: 2267},
    {code: 16,name: "富山",number: 1056},
    {code: 17,name: "石川",number: 1147},
    {code: 18,name: "福井",number: 779},
    {code: 19,name: "山梨",number: 823},
    {code: 20,name: "長野",number: 2076},
    {code: 21,name: "岐阜",number: 2008},
    {code: 22,name: "静岡",number: 3675},
    {code: 23,name: "愛知",number: 7525},
    {code: 24,name: "三重",number: 1800},
    {code: 25,name: "滋賀",number: 1413},
    {code: 26,name: "京都",number: 2599},
    {code: 27,name: "大阪",number: 8823},
    {code: 28,name: "兵庫",number: 5503},
    {code: 29,name: "奈良",number: 1348},
    {code: 30,name: "和歌山",number: 945},
    {code: 31,name: "鳥取",number: 565},
    {code: 32,name: "島根",number: 685},
    {code: 33,name: "岡山",number: 1907},
    {code: 34,name: "広島",number: 2829},
    {code: 35,name: "山口",number: 1383},
    {code: 36,name: "徳島",number: 743},
    {code: 37,name: "香川",number: 967},
    {code: 38,name: "愛媛",number: 1364},
    {code: 39,name: "高知",number: 714},
    {code: 40,name: "福岡",number: 5107},
    {code: 41,name: "佐賀",number: 824},
    {code: 42,name: "長崎",number: 1354},
    {code: 43,name: "熊本",number: 1765},
    {code: 44,name: "大分",number: 1152},
    {code: 45,name: "宮崎",number: 1089},
    {code: 46,name: "鹿児島",number: 1626},
    {code: 47,name: "沖縄",number: 1443}
    ]
});
                    

この地図では人口が800万人以上、500万人以上、500万人未満の3つの条件を指定しています。

Example

$('#jmap').jmap({
    id: null,   // 地図の識別子
    width: '100%',  // 地図の横幅
    height: '100%', // 地図の縦幅
    viewType: 'map',    // 地図の種類
    gridNumber: 6,      // グリッド表示の列数
    gridOffset: 1,      // グリッド表示の開始列数
    backgroundColor: 'transparent', // 地図背景の色
    backgroundRadius: '0',          // 地図背景の角丸
    backgroundPadding: '0',         // 地図背景の余白
    lineColor: 'transparent',   // 地図背景枠線の幅
    lineWidth: 0,               // 地図背景枠線の色
    lineStyle: 'solid',         // 地図背景枠線の書式
    showIslandDivider: true,    // 遠島区切り線の有無
    dividerWidth: '1px',        // 遠島区切り線の幅
    dividerColor: '#bfbfbf',    // 遠島区切り線の色
    dividerStyle: 'solid',      // 遠島区切り線の書式
    font: 'inherit',    // 都道府県名フォント
    fontSize: '12px',   // 都道府県名フォントのサイズ
    fontColor: '#fff',  // 都道府県名フォントの色
    textNowrap: false,  // 
    selectable: true,   // 都道府県マウスホバーの有無
    cursor: 'pointer',  // 都道府県マウスホバーのカーソル
    showTextShadow: false,      // 都道府県名ドロップシャドーの有無
    textShadowWidth: '2px',     // 都道府県名ドロップシャドーの幅
    textShadowColor: '#000',    // 	都道府県名ドロップシャードの色
    showPrefectureName: true,               // 都道府県名の有無
    prefectureNameType: 'short',            // 都道府県名の表示形式
    prefectureClass: 'jmap-pref',           // 都道府県の共通CSSクラス
    prefectureBackgroundColor: '#333',      // 都道府県の色
    prefectureBackgroundHoverColor: '#666', // 都道府県マウスオーバ―時の色
    prefectureLineGap: '1px',               // 都道府県枠線の間隔
    prefectureLineWidth: '1px',             // 都道府県枠線の幅
    prefectureLineColor: '#fff',            // 都道府県枠線の色
    prefectureLineHoverColor: '#aa1a00',    // 都道府県マウスオーバ―時の枠線の色
    prefectureLineY: '0px',                 // 都道府県枠線のY軸開始位置
    prefectureLineX: '0px',                 // 都道府県枠線のX軸開始位置
    prefectureRadius: '3px',                // 都道府県枠の角丸
    showInfobox: false,             // 情報表示エリアの有無
    infoboxClass: 'jmap-infobox',   // 情報表示エリアのCSSクラス
    infoboxContent: '',             // 情報表示エリアのコンテンツ
    infoboxBackgroundColor: 'transparent',  // 
    skew: '0',                  // 地図の歪み角度
    showTextNoneSkewed: true,   // 地図歪み時の文字の角度
    showHeatmap: false,         // 都道府県のヒートマップ表示
    showHeatlabel: false,       // 都道府県のヒートラベル表示
    heatmapColors: [],          // 都道府県のヒートマップ色配列
    heatmapFontColors: [],      // 都道府県のヒートマップフォント色配列
    heatmapType: 'HRed',        // 都道府県のヒートマップタイプ
    containerClass: 'jmap-container', 
    contentClass: 'jmap-content',
    dividerClass: 'jmap-divider',
    // 地図が読み込まれた際に呼び出されます
    onLoad: function(e, data) {

    },
    // 都道府県が選択された際に呼び出されます
    onSelect: function(e, data) {

    },
    // 都道府県にマウスオーバーした際に呼び出されます
    onHover: function(e, data) {

    },
    // 
    onMouseout: function(e, data) {

    },
    areas: [] // 都道府県別のオブジェクト
});