Leafletで色々な地図を表示する（２／６）

#２、Overlay表示
##２－１、基本地図にOverlay表示を追加
　次に基本地図上に別のデータを重ねてみましょう。 　次の例では、地図上に地名や境界線等を重ね書きする場合について示します。 　HTML部分とJAVA Script部における基本地図を表示する部分は、『Leaflet_Tutrial_104.html』の内容とほぼ同じです。 　地図の表示例とソースファイル内容を示します。 　但し、初期状態ではOverLay部を表示しない設定ですので、右上のマークにマウスを合わせて下段の四角（□）マークにチェックを入れると選択された表示がされます。 　なお、『OpenSeaMark』については、ある程度地図が拡大された場合に表示されます。 　実際の表示を確認したい方は、[こちらをクリック](http://hal322.html.xdomain.jp/Leaflet%20Tutorial/Leaflet/Leaflet_Tutrial_201.html)してください。
![Leaflet_Tutrial_201.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408707/e720b0fd-3e98-7d44-3c6f-4256986d363b.png)

ソースファイルの内容

```php:Leaflet_Tutrial_201.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_201.html	2019/4/26	by T. Fujita</title>
    <meta charset = "utf-8" />
    <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script>
    function init() {
	var Basic_Map = new Array();
	Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
		continuousWorld: false
	});
	Basic_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 3 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 4 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 5 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-background'
	});
	Basic_Map[ 6 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-lite'
	});
	Basic_Map[ 7 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		minZoom: 1,
		maxZoom: 16,
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'watercolor'
	});
	Basic_Map[ 8 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles &copy; <a href="http://www.esrij.com/"> Esri Japan </a>'
	});
	Basic_Map[ 9 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
		maxZoom: 13,
		attribution: 'Tiles by <a href="http://www.esrij.com/"> Esri Japan </a>'
	});

        var map_201 = L.map('map_201').setView([35.65809922, 139.74135747], 10);
        map_201.addLayer( Basic_Map[ 0 ] );

	var baseMap = {
		"OpenStreetMap": Basic_Map[ 0 ],
		"国土地理院 標準地図": Basic_Map[ 1 ],
		"国土地理院 淡色地図": Basic_Map[ 2 ],
		"国土地理院 写真": Basic_Map[ 3 ],
		"国土地理院 白地図": Basic_Map[ 4 ],
		"Stamen Toner-Background": Basic_Map[ 5 ],
		"Stamen Toner-Lite": Basic_Map[ 6 ],
		"Stamen Watercolor": Basic_Map[ 7 ],
		"Esri World Topo Map": Basic_Map[ 8 ],
		"Esri Ocean Base Map": Basic_Map[ 9 ],
	};

	var Over_Layer = new Array();
	Over_Layer[ 0 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-hybrid'
	});
	Over_Layer[ 1 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-lines'
	});
	Over_Layer[ 2 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-labels'
	});
	Over_Layer[ 3 ] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
	    attribution: "<a href='http://www.openseamap.org' target='_blank'>OpenSeaMap</a> contributors"
	});

	var overLay_201 = {
	    "Stamen-hybrid": Over_Layer[ 0 ],
	    "Stamen toner-lines": Over_Layer[ 1 ],
	    "Stamen toner-labels": Over_Layer[ 2 ],
	    "OpenSeaMap": Over_Layer[ 3 ],
	};
	L.control.layers(baseMap, overLay_201).addTo(map_201);

    }
</script>
</head>
<body onload="init()">
    <div id="map_201" style="width: 100%; height: 400px; border: solid 1px"></div>
</body>
</html>
```

２９行目から４９行目までの部分でOverlay用データをそれぞれの配列に収容後、５７行目の『L.control』で基本地図とOverlayデータを選択するようにしています。

##２－２、Pluginを使用したOverlay表示
　次にPluginを使用したOverLayを追加してみましょう。 　Pluginを使用して地図を表示する場合には、[Leafletのホームページ](https://leafletjs.com/plugins.html)等で公開されているPluginが必要です。 　今回は、NASAの地形データならびにUSGSの地震データを表示させますので次のPluginを使用します。
　・Leaflet.GIBS:　NASAの地形データ表示用
　・Leaflet Ajax:　USGSの地震データJSON版表示用

　地図の表示例とHTML及びJAVA Scriptのソースファイル内容を以下に示します。 　実際の表示を確認したい方は、[こちらをクリック](http://hal322.html.xdomain.jp/Leaflet%20Tutorial/Leaflet/Leaflet_Tutrial_202.html)してください。
![Leaflet_Tutrial_202.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408707/4b1216c2-cbdf-3b3f-37b4-14b71465e760.png)
　NASAの地形データでは、基本地図としてCost Line（白地図）をOverLayとしてWater Maskが選択できるように追加しました。 　ソースファイル内容で８・９行目と５２～５５行目、６８行目、９３～９６行目、１２５行目が追記箇所です。 　他にどのようなデータが利用できるかは、[NASA GIBS](http://aparshin.github.io/leaflet-GIBS/examples/#3/60.00/50.00)のデモを参照下さい。

　さらに地震情報のOverLayを追加（１０行目、９７～１１９行目、１２６行目）してみました。　 地震データは[『 USGS 』](https://earthquake.usgs.gov/data/?source=sitenav) からGeojsonフォーマットで受領しており、 　 Leaflet 用プラグイン[『 Leaflet Ajax 』](https://github.com/calvinmetcalf/leaflet-ajax)を追加することで表示させています。 　なお、USGSから受領できるデータ・フォーマットには、[「Geojson」](http://geojson.org/)以外にも [「KML」](https://developers.google.com/kml/documentation/?hl=ja)があります。 　また、USGSから受領できる地震データは、１日分／１週間分／１ケ月分と各種ありますのが、ここでは１週間分のデータを表示させています。 　他の地震データの使用例は、コメント文として記載していますので参考にしてください。 

ソースファイル内容

```php:Leaflet_Tutrial_202.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_202.html	2019/4/26	by T. Fujita</title>
    <meta charset = "utf-8" />
    <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src = "./Plugins\leaflet-GIBS-master\src/GIBSMetadata.js" ></script>
    <script src = "./Plugins\leaflet-GIBS-master\src/GIBSLayer.js" ></script>
    <script src = "./Plugins/leaflet-ajax-master/dist/leaflet.ajax.js" ></script>

<script>
    function init() {
	var Basic_Map = new Array();
	Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
		continuousWorld: false
	});
	Basic_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 3 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 4 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 5 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-background'
	});
	Basic_Map[ 6 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-lite'
	});
	Basic_Map[ 7 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		minZoom: 1,
		maxZoom: 16,
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'watercolor'
	});
	Basic_Map[ 8 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles &copy; <a href="http://www.esrij.com/"> Esri Japan </a>'
	});
	Basic_Map[ 9 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
		maxZoom: 13,
		attribution: 'Tiles by <a href="http://www.esrij.com/"> Esri Japan </a>'
	});
	Basic_Map[ 10 ] = new L.GIBSLayer('Coastlines', {
		date: new Date('2015/04/01'),
		transparent: true
	});

	var baseMap = {
		"OpenStreetMap": Basic_Map[ 0 ],
		"国土地理院 標準地図": Basic_Map[ 1 ],
		"国土地理院 淡色地図": Basic_Map[ 2 ],
		"国土地理院 写真": Basic_Map[ 3 ],
		"国土地理院 白地図": Basic_Map[ 4 ],
		"Stamen Toner-Background": Basic_Map[ 5 ],
		"Stamen Toner-Lite": Basic_Map[ 6 ],
		"Stamen Watercolor": Basic_Map[ 7 ],
		"Esri World Topo Map": Basic_Map[ 8 ],
		"Esri Ocean Base Map": Basic_Map[ 9 ],
		"NASA EOSDIS GIBS/Coast Lines": Basic_Map[ 10 ],
	};

	var Over_Layer = new Array();
	Over_Layer[ 0 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-hybrid'
	});
	Over_Layer[ 1 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-lines'
	});
	Over_Layer[ 2 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-labels'
	});
	Over_Layer[ 3 ] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
	    attribution: "<a href='http://www.openseamap.org' target='_blank'>OpenSeaMap</a> contributors"
	});
	Over_Layer[ 4 ] = new L.GIBSLayer('MODIS_Water_Mask', {
	    date: new Date('2018/11/15'),
	    transparent: true
	});
	Over_Layer[ 5 ] = new L.GeoJSON.AJAX(
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson",
		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
	   {pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng, {
		    radius: feature.properties.mag * feature.properties.mag / 3,
		    fillcolor: "#FF7800",
		    color: "#FF7800",
		    weight: 1,
		    opacity: 0.5,
		    fillOpacity: 0.5
		}); },
	    onEachFeature: function (feature, layer) {
	    layer.bindPopup(new Date(feature.properties.time).toUTCString() + " / " + feature.properties.title);
	    } 
	});

	var overLay = {
	    "Stamen toner-lines": Over_Layer[ 1 ],
	    "Stamen toner-labels": Over_Layer[ 2 ],
	    "OpenSeaMap": Over_Layer[ 3 ],
	    "GIBS Water Mask": Over_Layer[ 4 ],
	    "1W All Earthquake(Geojson)": Over_Layer[ 5 ]
	};

        var map_202 = L.map('map_202').setView([35.65809922, 139.74135747], 8);
        map_202.addLayer( Basic_Map[ 0 ] );
	L.control.layers(baseMap, overLay).addTo(map_202);
    }
</script>
</head>
<body onload="init()">
    <div id="map_202" style="width: 100%; height: 400px; background-color:#ffffff; border: solid 1px"></div>
</body>
</html>
```

##２－３、その他のOverlay表示
　上記の他にも[Open Weather Map](https://openweathermap.org/)等 Overlay可能なデータを配信しているサイトがあります。 　Open Weather Mapを使用するためには、当該ホームページでAPI keyを入手する必要がありますので、ここで使用方法の紹介はしませんが、 次のURL等が参考になると思います。
　・[GitHub - buche/leaflet-openweathermap](https://github.com/buche/leaflet-openweathermap)
　・[あらふぉ ぁ らいふ 2018年12月29日](https://after40-life.com/2018/12/29/post-453/)
***
###Leafletで色々な地図を表示する記事内容
[１、Leafletで色々な地図を表示する](https://qiita.com/halboujp/items/67e70f55906b7266e1fc)
２、Overlay表示
[３、色々な表示](https://qiita.com/halboujp/items/32c7eac2788578a2aa2b)
[４、マーカーの表示](https://qiita.com/halboujp/items/bea67da3a403747bda83)
[５、色々な図形の表示](https://qiita.com/halboujp/items/09f02cbd93f2b846ef35)
[６、おまけ](https://qiita.com/halboujp/items/d1b289090964a82fe942)
[追加－１、デバイスの位置を地図上に表示する](https://qiita.com/halboujp/items/e53e6cf52a78f22f4fa8)
[追加ー２、写真の撮影地を地図上に表示する](https://qiita.com/halboujp/items/c2cdb304e74f514d372d)

ここに記載したHTML/JavaScriptの動作を確認したい方は、[「https://github.com/To-Fujita/Leaflet.JS_Tutorial」](https://github.com/To-Fujita/Leaflet.JS_Tutorial
) あるいは [「http://hal322.html.xdomain.jp/」](http://hal322.html.xdomain.jp/)を参照ください。