//マーカーリスト ~連想配列~
const posts =[
{
lat: 35.00538045010759,
lon: 135.7834094573902,
name: "知恩院",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "50"
},
{
lat: 35.01605555146804,
lon: 135.75177951154387,
name: "堀川通",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "49"
},
{
lat: 35.013858188491014,
lon: 135.74914175142104,
name: "二条城",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "48"
},
{
lat: 35.02066507997166,
lon: 135.76313623437287,
name: "京都御苑",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "47"
},
{
lat: 35.02500532343974,
lon: 135.76223793371608,
name: "京都御所",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "46"
},
{
lat: 35.01799760688584,
lon: 135.77151450679438,
name: "鴨川",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "45"
},
{
lat: 35.017046378124626,
lon: 135.78533842218673,
name: "丸太町通",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "44"
},
{
lat: 35.015721769846735,
lon: 135.78468798650061,
name: "岡崎通",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "43"
},
{
lat: 35.01599416202443,
lon: 135.78251110649273,
name: "平安神宮",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "42"
},
{
lat: 35.020290559196226,
lon: 135.7898166022941,
name: "真如堂・金戒光明寺出入口",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "41"
},
{
lat: 35.02130170701552,
lon: 135.78966093361348,
name: "真如堂本堂",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "40"
},
{
lat: 35.02185872423533,
lon: 135.78821735658633,
name: "真如堂山門",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "39"
},
{
lat: 35.02049449276186,
lon: 135.7873426220724,
name: "栄摂院",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "38"
},
{
lat: 35.01919440207685,
lon: 135.78958058268447,
name: "竹内栖鳳墓",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "37"
},
{
lat: 35.01888028460121,
lon: 135.7897743722858,
name: "三重塔(文殊塔)",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "36"
},
{
lat: 35.020073595099355,
lon: 135.78996581495423,
name: "会津墓地",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "35"
},
{
lat: 35.01983261692497,
lon: 135.78960243595165,
name: "西雲院東門",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "34"
},
{
lat: 35.01999516548448,
lon: 135.78929129970592,
name: "會津小鉄之墓",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "33"
},
{
lat: 35.01982602711164,
lon: 135.78949782980007,
name: "紫雲石",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "32"
},
{
lat: 35.02015091284738,
lon: 135.7894874044351,
name: "西雲院",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "31"
},
{
lat: 35.01867947523118,
lon: 135.78869183123402,
name: "平敦盛供養塔",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "30"
},
{
lat: 35.018598199684014,
lon: 135.78868512571148,
name: "熊谷直實供養塔",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "29"
},
{
lat: 35.018645427376654,
lon: 135.7887427932053,
name: "法然上人御廟",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "28"
},
{
lat: 35.018794798504025,
lon: 135.78858521342568,
name: "五劫思惟阿弥陀仏",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "27"
},
{
lat: 35.01896833226522,
lon: 135.7885429686337,
name: "春日局供養塔",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "26"
},
{
lat: 35.01898370865668,
lon: 135.7885892367392,
name: "お江供養塔",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "25"
},
{
lat: 35.01841797527395,
lon: 135.78845298777665,
name: "蓮池院",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "24"
},
{
lat: 35.01868518989189,
lon: 135.78824005364464,
name: "蓮池(兜之池)",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "23"
},
{
lat: 35.01874889228683,
lon: 135.78821423738287,
name: "極楽橋",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "22"
},
{
lat: 35.01977268804924,
lon: 135.78860310550678,
name: "花峯庵(茶室)",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "21"
},
{
lat: 35.019773511776464,
lon: 135.7885145926093,
name: "紫雲亭(茶室)",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "20"
},
{
lat: 35.02029097274111,
lon: 135.78868757727452,
name: "ご縁の庭",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "19"
},
{
lat: 35.01997798682665,
lon: 135.7882980337087,
name: "方丈北庭",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "18"
},
{
lat: 35.019959576980966,
lon: 135.78844555520453,
name: "鎧之池",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "17"
},
{
lat: 35.01972014712915,
lon: 135.78832787328403,
name: "紫雲の庭",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "16"
},
{
lat: 35.01913737867522,
lon: 135.7882969394182,
name: "新清和殿",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "15"
},
{
lat: 35.01937953585278,
lon: 135.78829062043687,
name: "清和殿",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "14"
},
{
lat: 35.019504193744766,
lon: 135.7883010139968,
name: "寺務所",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "13"
},
{
lat: 35.019642221306505,
lon: 135.78801018277835,
name: "大方丈",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "12"
},
{
lat: 35.019348424264166,
lon: 135.7878096876545,
name: "鎧掛けの松",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "11"
},
{
lat: 35.01901929168312,
lon: 135.78732522226665,
name: "鐘楼",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "10"
},
{
lat: 35.01887713036666,
lon: 135.78763454134642,
name: "納骨堂",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "9"
},
{
lat: 35.018830770712384,
lon: 135.78793287970205,
name: "新経蔵",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "8"
},
{
lat: 35.019039491252784,
lon: 135.78791449770236,
name: "阿弥陀堂",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "7"
},
{
lat: 35.01949254403717,
lon: 135.7875031138947,
name: "御影堂(大殿)",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "6"
},
{
lat: 35.01870156906491,
lon: 135.78729819154694,
name: "勢至丸像",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "5"
},
{
lat: 35.01846713765403,
lon: 135.7873147635177,
name: "山門",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "4"
},
{
lat: 35.01788029119067,
lon: 135.78862311758405,
name: "南門",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "3"
},
{
lat: 35.02135390682819,
lon: 135.78722828535385,
name: "北門",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "2"
},
{
lat: 35.01821591712393,
lon: 135.7859817511367,
name: "高麗門",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "",
address: "",
tel: "",
link_id: "",
cat_id: "1"
},
{ //マップの中心も兼ねる
lat: 35.01962683147278,
lon: 135.7878975570202,
name: "金戒光明寺",
name_tooltip: "", //マウスオーバー時に表示する【注釈】
post_no: "
〒606-8331", //
address: "
京都市左京区黒谷町121", //
tel: "
Tel 075-771-2204", //
link_id: "",
cat_id: "0"
}
];
const init_zoom = 17; //ズーム初期値
const center_lon = posts[posts.length-1].lon; //マップ中心の経度
const center_lat = posts[posts.length-1].lat; //マップ中心の緯度
const center_lat_shift = posts[posts.length-1].lat * 1.000002; //緯度をマップ中心の緯度より北へシフト ---> 初期表示の吹き出し用
//マップタイトルの緯度経度・タイトル名
const maptitle_lonlat = [center_lon, center_lat]; //マップ中心の緯度・経度をセット
const maptitle_name = posts[posts.length-1].name; //マップのタイトル名
// カテゴリーID とマーカー画像の対応
const icon_map = {
0: "http://hannari-tabi.up.seesaa.net/image/green_20x34.png", //緑のメインアイコン
1: "http://hannari-tabi.up.seesaa.net/image/lightblue1-thumbnail2.gif",
2: "http://hannari-tabi.up.seesaa.net/image/lightblue2-thumbnail2.gif",
3: "http://hannari-tabi.up.seesaa.net/image/lightblue3-thumbnail2.gif",
4: "http://hannari-tabi.up.seesaa.net/image/lightblue4-thumbnail2.gif",
5: "http://hannari-tabi.up.seesaa.net/image/lightblue5-thumbnail2.gif",
6: "http://hannari-tabi.up.seesaa.net/image/lightblue6-thumbnail2.gif",
7: "http://hannari-tabi.up.seesaa.net/image/lightblue7-thumbnail2.gif",
8: "http://hannari-tabi.up.seesaa.net/image/lightblue8-thumbnail2.gif",
9: "http://hannari-tabi.up.seesaa.net/image/lightblue9-thumbnail2.gif",
10: "http://hannari-tabi.up.seesaa.net/image/lightblue10-thumbnail2.gif",
11: "http://hannari-tabi.up.seesaa.net/image/lightblue11-thumbnail2.gif",
12: "http://hannari-tabi.up.seesaa.net/image/lightblue12-thumbnail2.gif",
13: "http://hannari-tabi.up.seesaa.net/image/lightblue13-thumbnail2.gif",
14: "http://hannari-tabi.up.seesaa.net/image/lightblue14-thumbnail2.gif",
15: "http://hannari-tabi.up.seesaa.net/image/lightblue15-thumbnail2.gif",
16: "http://hannari-tabi.up.seesaa.net/image/lightblue16-thumbnail2.gif",
17: "http://hannari-tabi.up.seesaa.net/image/lightblue17-thumbnail2.gif",
18: "http://hannari-tabi.up.seesaa.net/image/lightblue18-thumbnail2.gif",
19: "http://hannari-tabi.up.seesaa.net/image/lightblue19-thumbnail2.gif",
20: "http://hannari-tabi.up.seesaa.net/image/lightblue20-thumbnail2.gif",
21: "http://hannari-tabi.up.seesaa.net/image/lightblue21-thumbnail2.gif",
22: "http://hannari-tabi.up.seesaa.net/image/lightblue22-thumbnail2.gif",
23: "http://hannari-tabi.up.seesaa.net/image/lightblue23-thumbnail2.gif",
24: "http://hannari-tabi.up.seesaa.net/image/lightblue24-thumbnail2.gif",
25: "http://hannari-tabi.up.seesaa.net/image/lightblue25-thumbnail2.gif",
26: "http://hannari-tabi.up.seesaa.net/image/lightblue26-thumbnail2.gif",
27: "http://hannari-tabi.up.seesaa.net/image/lightblue27-thumbnail2.gif",
28: "http://hannari-tabi.up.seesaa.net/image/lightblue28-thumbnail2.gif",
29: "http://hannari-tabi.up.seesaa.net/image/lightblue29-thumbnail2.gif",
30: "http://hannari-tabi.up.seesaa.net/image/lightblue30-thumbnail2.gif",
31: "http://hannari-tabi.up.seesaa.net/image/lightblue31-thumbnail2.gif",
32: "http://hannari-tabi.up.seesaa.net/image/lightblue32-thumbnail2.gif",
33: "http://hannari-tabi.up.seesaa.net/image/lightblue33-thumbnail2.gif",
34: "http://hannari-tabi.up.seesaa.net/image/lightblue34-thumbnail2.gif",
35: "http://hannari-tabi.up.seesaa.net/image/lightblue35-thumbnail2.gif",
36: "http://hannari-tabi.up.seesaa.net/image/lightblue36-thumbnail2.gif",
37: "http://hannari-tabi.up.seesaa.net/image/lightblue37-thumbnail2.gif",
38: "http://hannari-tabi.up.seesaa.net/image/lightblue38-thumbnail2.gif",
39: "http://hannari-tabi.up.seesaa.net/image/lightblue39-thumbnail2.gif",
40: "http://hannari-tabi.up.seesaa.net/image/lightblue40-thumbnail2.gif",
41: "http://hannari-tabi.up.seesaa.net/image/lightblue41-thumbnail2.gif",
42: "http://hannari-tabi.up.seesaa.net/image/lightblue42-thumbnail2.gif",
43: "http://hannari-tabi.up.seesaa.net/image/lightblue43-thumbnail2.gif",
44: "http://hannari-tabi.up.seesaa.net/image/lightblue44-thumbnail2.gif",
45: "http://hannari-tabi.up.seesaa.net/image/lightblue45-thumbnail2.gif",
46: "http://hannari-tabi.up.seesaa.net/image/lightblue46-thumbnail2.gif",
47: "http://hannari-tabi.up.seesaa.net/image/lightblue47-thumbnail2.gif",
48: "http://hannari-tabi.up.seesaa.net/image/lightblue48-thumbnail2.gif",
49: "http://hannari-tabi.up.seesaa.net/image/lightblue49-thumbnail2.gif",
50: "http://hannari-tabi.up.seesaa.net/image/lightblue50-thumbnail2.gif"
};
const title_name = `${posts[posts.length-1].name}`; //通常のfont-sizeでのタイトル名
// const title_name = `${posts[posts.length-1].name}`; //1行に納めるためにタイトル名のfont-sizeを調整
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑新規作成時の変更内容↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//測地系(WGS84)、座標系(メルカトル図法・地理座標系)コード
const epsg4326 = ol.proj.get('EPSG:4326'); //変換元となる測地系(WGS84)と座標系(地理座標系)の組み合わせ。
const epsg3857 = ol.proj.get('EPSG:3857'); //測地系(WGS84)と座標系(メルカトル図法)の組み合わせ。OpenLayersのデフォルト。
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// マーカーとツールチップを、施設(cat_id)毎に設定するための Layer
const marker_layer = new ol.layer.Vector();
// マーカーの生成
const features = posts.map((post, index) => {
const lonlat = [post.lon, post.lat];
const feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(lonlat, epsg4326, epsg3857)),
post: post
});
feature.setId(index);
return feature;
});
const style_cache = {};
function get_style(feature, hover) {
const post = feature.get("post");
const key = hover ? `style_tooltip_${feature.getId()}` : `style_${post.cat_id}`;
let style = style_cache[key];
if (! style) {
style = [];
style.push(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
// anchor: [0.5, 1.5], //縦位置(1.5)はマップタイトルをマップ中心マーカーの下端から少し離して配置するための措置
src: icon_map[post.cat_id]
})
}));
if (hover) {
let zoom = map.getView().getZoom(); //マウスオーバー時に表示する文字サイズ。new ol.View で指定したzoom値(当マップでは18)。
let font_size = zoom * 0.8;
// let font_size = zoom * 1.0;
style.push(new ol.style.Style({
text: new ol.style.Text({
font: font_size + 'px Calibri,sans-serif',
text: post.name + post.name_tooltip, //マウスオーバーで施設名を表示
backgroundFill: new ol.style.Fill({
color: "white"
}),
padding: [3,14,0,14], //[top, right, bottom, left]
// textAlign: "left", //Default is 'center'
offsetX: 10,
offsetY: -30
})
}));
}
style_cache[key] = style;
}
return style;
} // end of get_style function
marker_layer.setSource(new ol.source.Vector({features: features}));
marker_layer.setStyle((feature, resolution) => get_style(feature));
const view = new ol.View({center: ol.proj.fromLonLat([center_lon, center_lat]),zoom:init_zoom,maxZoom:20}); // maxZoom のデフォルトは28。minZoom のデフォルトは0。
const map = new ol.Map({
target: 'hannari_mymap',
view: view,
controls: [
new ol.control.Attribution({collapsible: false}), //「OpenStreetMap」を表示
new ol.control.FullScreen(), //マップ右上にフルスクリーンとの切り替えアイコンを表示
new ol.control.Zoom(), //マップ左上に+-を表示
new ol.control.ZoomSlider() //ズームスライダーを表示
]
});
map.addLayer(new ol.layer.Tile({ source: new ol.source.OSM() }));
map.addLayer(marker_layer);
map.addControl(new ol.control.ScaleLine());
// 吹き出し
const popup_e = Object.assign(document.createElement("div"), {
className: "ol-popup",
innerHTML: `