画像




指定範囲内で表示するメモ。




画像




script.js

// デフォルトアイコンパス
L.Icon.Default.imagePath = './img/icon/';

// MIERUNE Streets読み込み
const m_streets = new L.tileLayer(
'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]',
{
attribution:
'<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
}
);

// MIERUNE Gray読み込み
const m_gray = new L.tileLayer(
'https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=[APIキー]',
{
attribution:
'<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
}
);

// MAP読み込み
const map = L.map('map', {
center: [35.681, 139.767],
zoom: 14,
zoomControl: true,
layers: [m_streets],
});

// 背景レイヤ
const Map_BaseLayer = {
'MIERUNE Streets': m_streets,
'MIERUNE Gray': m_gray,
};

// レイヤ設定
L.control.layers(Map_BaseLayer, null).addTo(map);

// スケール設定
L.control
.scale({
imperial: false,
maxWidth: 300,
})
.addTo(map);

// 指定範囲内表示
map.fitBounds([
[35.6849, 139.7626],
[35.6770, 139.7710]
]);






Leafletを手軽に始めるビルド環境公開しています。
leaflet-starter





book


Q&A