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>タグで指定。
- ズームレベルは整数で指定。(小さいほど広域、大きいほど詳細)