dayjournal memo

Total 963 articles!!

Leaflet #097 - 指定範囲内表示

Yasunori Kirimoto's avatar

画像



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



画像



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