Leaflet地図：「Jawg Maps」のシンプルな世界地図＋「RainViewer」雨雲

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。

今回、シンプルな世界地図を作成。

［↑］にある「Jawg Maps」から、国名や主な都市名が日本語でシンプルに表示される以下の4つを表示できるようにした。

• Jawg.Streets
• Jawg.Terrain
• Jawg.Sunny
• Jawg.Light

作成した地図は以下。

≪サンプルソース≫

accessTokenには、自分が取得したものを入れる。

<script>
var map = L.map('map');
map.setView([49, 26], 4);
var Jawg_Streets = L.tileLayer('https://{s}.tile.jawg.io/jawg-streets/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
	attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">c <b>Jawg</b>Maps</a> c <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	minZoom: 0,
	maxZoom: 22,
	subdomains: 'abcd',
	accessToken: '<your accessToken>'
});
Jawg_Streets.addTo(map);
var Jawg_Terrain = L.tileLayer('https://{s}.tile.jawg.io/jawg-terrain/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
	attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">c <b>Jawg</b>Maps</a> c <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	minZoom: 0,
	maxZoom: 22,
	subdomains: 'abcd',
	accessToken: '<your accessToken>'
});
var Jawg_Sunny = L.tileLayer('https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
	attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">c <b>Jawg</b>Maps</a> c <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	minZoom: 0,
	maxZoom: 22,
	subdomains: 'abcd',
	accessToken: '<your accessToken>'
});
var Jawg_Light = L.tileLayer('https://{s}.tile.jawg.io/jawg-light/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
	attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">c <b>Jawg</b>Maps</a> c <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	minZoom: 0,
	maxZoom: 22,
	subdomains: 'abcd',
	accessToken: '<your accessToken>'
});
//...
var baseMap = {
	"Jawg.Streets": Jawg_Streets,
	"Jawg.Terrain": Jawg_Terrain,
	"Jawg.Sunny": Jawg_Sunny,
	"Jawg.Light": Jawg_Light,
	//...
};
L.control.layers(baseMap).addTo(map);
</script>

合わせて、「RainViewer」雨雲を重ねて表示できるようにした。

「RainViewer」雨雲については以下を参照。

≪サンプルソース≫

<script>
// ---------------
let json = getRainViewer();
let results = JSON.parse(json);
let time = results[results.length - 1];
var RainViewer = L.tileLayer('https://tilecache.rainviewer.com/v2/radar/' + time + '/256/{z}/{x}/{y}/2/1_1.png', {
	opacity: 0.5,
	attribution: 'Contains public sector information licensed under the Open Government Licence | Radar By <a target="_top" rel="noopener" href="https://jmwforecast.com">JMWForecast Limited</a>'
});
var overlay = {
	"RainViewer 雨雲": RainViewer
};
// ---------------
L.control.layers(baseMap, overlay).addTo(map);
function getRainViewer(address) {
	var result = $.ajax({
		type: 'GET',
		url: 'https://tilecache.rainviewer.com/api/maps.json',
		async: false	// *** 同期通信 ***
	}).responseText;
	return result;
}
</script>