window.onload = function() {
var myMap = L.map("map", {
zoom: 7,
center: [35.710139, 139.810833], // 地図中心点
});
// タイルレイヤにはオープンストリートマップを拝借
myMap.addLayer(
L.tileLayer("https://tile.openstreetmap.jp/{z}/{x}/{y}.png", {
attribution: "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
})
);
var myCircle = new L.circle(
[35.710139, 139.810833], // 円の中心点
{ // radius以外のオプションはPathから継承
radius: 95330, // 半径(m)
color: "#ff0000", // 外周色
weight: 1, // 外周太さ(ピクセル)
opacity: 1, // 外周透過度(0: 透明 ⇔ 1:不透明)
fillColor: "#ff0000", // 塗りつぶし色
fillOpacity: 0.5, // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明)
}
);
// 追加!
myMap.addLayer(myCircle);
}OKWave系のq5546321でgoogle mapsのほうにリンクされている、「東京スカイツリーが見える範囲」を相変わらずサンプルにしています。中心点は (35.710139, 139.810833)、半径は95,330mにしています。(この範囲でスカイツリーが見えることを保障するわけではありません!念のため)
- 上のHTMLをコピーして、緯度・経度・大きさを変えれば好きな地図を表示できます。
- 大きさは、表示させる<div>タグで指定。
- ズームレベルは整数で指定。(小さいほど広域、大きいほど詳細)