// JavaScript Document
var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib=''
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
var map = new L.Map('map').addLayer(osm).setView([35.681236,139.767125], 14);
var osmGeocoder = new L.Control.OSMGeocoder({placeholder: '住所・キーワード入力'});
map.addControl(osmGeocoder);
//中心点にマーカー・センターマーカーを表示
//'hogaku-transparent.gif', //2014/06/12 透明画像に変更
// 2018/01/31 その年の方角に矢印を追加 - その年に合わせて表示する
var centercrossIcon = L.icon({
iconUrl: '/koyomi/map_ehoo/img/hogaku-year-transparent/'+((new Date()).getFullYear()%5)+'.gif',
iconRetinaUrl: '/koyomi/map_ehoo/img/hogaku-year-transparent/'+((new Date()).getFullYear()%5)+'.gif',
iconSize: [357, 356], // アイコンサイズ
iconAnchor: [178, 178], // 画像の位置。左上が 0,0
});
var crosshair = new L.marker(map.getCenter(), {icon: centercrossIcon, clickable:false}).addTo(map); // clickable:falseをいれないと十字画像の下のアイコンが触れない
map.on('move', function(e) {
crosshair.setLatLng(map.getCenter());
});
//中心点センターマーカー・十字マーカー・別画像を表示 // 2021/12/28追加
var centercrossIconCross = L.icon({
iconUrl: '/benri_img/center.gif',
iconRetinaUrl: '/benri_img/center.gif',
iconSize: [32, 32], // アイコンサイズ
iconAnchor: [17, 16] // 画像の位置。左上が 0,0
});
var crosshairCross = new L.marker(map.getCenter(), {icon: centercrossIconCross, clickable:false}); // clickable:falseをいれないと十字画像の下のアイコンが触れない
map.on('move', function(e) {
crosshairCross.setLatLng(map.getCenter());
});
//中心点アイコンを表示
var centerIcon = L.icon({
iconUrl: '/map_icon_Leaflet/icon-with_shadow/DeepSkyBlue.png',
iconRetinaUrl: '/map_icon_Leaflet/icon-with_shadow/DeepSkyBlue.png',
iconSize: [32, 32], // アイコンサイズ
iconAnchor: [11, 32] // 画像の位置。左上が 0,0
});
var centerIcon = new L.marker(map.getCenter(), {icon: centerIcon, clickable:false}); // clickable:falseをいれないと十字画像の下のアイコンが触れない
map.on('move', function(e) {
centerIcon.setLatLng(map.getCenter());
});//鬼さんアイコンを表示
var OniIcon = L.icon({
iconUrl: 'img/icon-oni.png',
iconRetinaUrl: 'img/icon-oni.png',
iconSize: [60, 50], // アイコンサイズ
iconAnchor: [29, 37] // 画像の位置。左上が 0,0
});
var OniIcon = new L.marker(map.getCenter(), {icon: OniIcon, clickable:false}); // clickable:falseをいれないと十字画像の下のアイコンが触れない
map.on('move', function(e) {
OniIcon.setLatLng(map.getCenter());
});//ハートアイコンを表示
var HeartIcon = L.icon({
iconUrl: 'img/icon-heart.png',
iconRetinaUrl: 'img/icon-heart.png',
iconSize: [41, 32], // アイコンサイズ
iconAnchor: [16, 32] // 画像の位置。左上が 0,0
});
var HeartIcon = new L.marker(map.getCenter(), {icon: HeartIcon, clickable:false}); // clickable:falseをいれないと十字画像の下のアイコンが触れない
map.on('move', function(e) {
HeartIcon.setLatLng(map.getCenter());
});//大きな鬼さんを表示
var OniIcon_right = L.icon({
iconUrl: 'img/icon-oni-right.png',
iconRetinaUrl: 'img/icon-oni-right.png',
iconSize: [417, 339], // アイコンサイズ
iconAnchor: [43, 50] // 画像の位置。左上が 0,0
});
var OniIcon_right = new L.marker(map.getCenter(), {icon: OniIcon_right, clickable:false}); // clickable:falseをいれないと十字画像の下のアイコンが触れない
map.on('move', function(e) {
OniIcon_right.setLatLng(map.getCenter());
});
// 指定の地点にマーカーを表示。今回は使わない
// var marker = L.marker([35.681236,139.767125],{title: 'マーカー'}).addTo(map);
//地理院地図
var gsi = new L.TileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{attribution: "地理院タイル"
});
//地理院写真
var gsiphoto = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
{attribution: "地理院タイル"});
//地理院地図淡色地図タイル
var gsipale = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
{minZoom:2,maxZoom:18,attribution: "地理院タイル"}).addTo(map);
//OpenStreetMap - 地理院地図を一番上に表示するために必要
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: "© OpenStreetMap contributors"});
//Esri 道路地図
var esri_worldStreet = new L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
});
//Esri 衛星画像
var esri_worldimagery = new L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
//Esri 地形図
esri_worldtopo = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
});
//google_maps
var google_maps = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', {attribution: "Google Map"});
// 地図メニューを追加
var baseMaps = {
"地理院地図" : gsi,
"地理院写真" : gsiphoto,
"地理院淡色地図" : gsipale,
"OpenStreetMap" : osm,
"Esri 道路地図": esri_worldStreet,
"Esri 衛星画像": esri_worldimagery,
"Esri 地形図": esri_worldtopo,
"Google マップ": google_maps
};
var overlay = {
"方角画像": crosshair, // 2020/03/29追加
"センター十字マーカー": crosshairCross, // 2021/12/28追加
"センターアイコン": centerIcon, // 2022/02/02追加
"ハートアイコン": HeartIcon, // 2022/02/02追加
"鬼さんアイコン": OniIcon, // 2022/02/02追加
"大きな鬼さんを呼ぶ": OniIcon_right // 2022/02/18追加
}
L.control.layers(baseMaps,overlay).addTo(map);
//スケールを左下に追加
L.control.scale().addTo(map);
//デザイン化されたスケールを右下に表示
L.control.graphicScale({fill:'fill', position: 'bottomright' }).addTo(map);
//現在地を取得
var locate = L.control.locate({
flyTo:true,
strings: {
title: "クリックすると現在地を取得します"
}
}).addTo(map);
//ミニマップを表示
var osm2 = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {minZoom: 0, maxZoom: 15, attribution: 'Map data © OpenStreetMap contributors' });
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true, position: 'bottomleft' }).addTo(map);
//フルスクリーンコントロール
var fsControl = L.control.fullscreen();
map.addControl(fsControl);
map.on('enterFullscreen', function(){
if(window.console) window.console.log('enterFullscreen');
});
map.on('exitFullscreen', function(){
if(window.console) window.console.log('exitFullscreen');
});