Leafletの基本部分

## はじめに
Leafletとは、Web地図サービスで広く使われるオープンソースのJavaScriptライブラリです。
仕事でLeafletを使うことなったので、勉強してみました。
今回は基本的な機能の実装を試みます。

参考文献は以下です。
https://leafletjs.com/

## Leafletでマップを表示するための準備
まずはLeafletを使うための、cssとJavaScriptライブラリをHead部分で指定します。

```html
<head>
    <title>Quick Start - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>                              
</head>
```
## マップを配置
body部分にdivタグでマップを配置します。

```html
<body>
    <div id="mapid" style="width: 600px; height: 400px;"></div>
</body>
```

##マップの作製
マップの初期設定をしていきます。
詳しくはコード上のコメントを参照してください。

```html
<script>
    //地図の中心と、zoomレベルを設定
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    //タイルレイヤーの追加(この例ではMapbox Streetsタイルレイヤーを用いる)
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                id: 'mapbox/streets-v11',
                tileSize: 512,
                //APIはデフォルトで512x512のタイルを返すので（256x256ではなく）、ズームを-1でオフセット。
                zoomOffset: -1
                }).addTo(mymap);
</script>
```
##マーカー追加
マーカー追加を追加します。[lat,lon]で指定します。

```javascript
var marker = L.marker([51.5, -0.09]).addTo(mymap);
```
##Circle追加
Circleを追加します。マーカーと異なるのはradiusの指定があることです。

```javascript
var circle = L.circle([51.508, -0.11], {
                            color: 'red',
                            fillColor: '#f03',
                            fillOpacity: 0.5,
                            radius: 500
                }).addTo(mymap);
```


##ポリゴン追加
ポリゴンを追加します。

```javascript
var polygon = L.polygon([
                        [51.509, -0.08],
                        [51.503, -0.06],
                        [51.51, -0.047]
                        ]).addTo(mymap)
```
##ポップアップ付きマーカー
ポップアップ付きマーカーを追加します。

```javascript
 marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
                circle.bindPopup("I am a circle.").openPopup();
                polygon.bindPopup("I am a polygon.");
```
##ポップアップをレイヤーのようにする
addToではなくopenOnにすると一度のみ表示し、クリックすると消える。

```javascript
var sta_popup = L.popup()
                 .setLatLng([51.5, -0.09])
                 .setContent("I am a standalone popup.")
                 .openOn(mymap);

```
##クリックファンクション
ここでは、クリックするたびに緯度経度を表示させてみます。

```javascript
function onMapClick_Art(e) {
                        alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick_Art);
```
##まとめ
上記の機能をまとめると以下のようになります。

```html
<!DOCTYPE html>
<html>
        <head>
                <title>Quick Start - Leaflet</title>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
                <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>                              
        </head>
        <body>
                <div id="mapid" style="width: 600px; height: 400px;"></div>
        <script>
                //地図の中心と、zoomレベルを設定
                //var mymap = L.map('mapid').setView([37.85, 138.8], 9);
                var mymap = L.map('mapid').setView([51.505, -0.09], 13);
                //タイルレイヤーの追加(この例ではMapbox Streetsタイルレイヤーを用いる)
                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                                maxZoom: 18,
                                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                                        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                                id: 'mapbox/streets-v11',
                                tileSize: 512,
                                zoomOffset: -1//APIはデフォルトで512x512のタイルを返すので（256x256ではなく）、ズームを-1でオフセット。
                                }).addTo(mymap);
                //マーカー追加[lat,lon]で指定
                var marker = L.marker([51.5, -0.09]).addTo(mymap);
                //Circle追加[lat,lon]で指定(Markerと異なるのはradiusのみ)
                var circle = L.circle([51.508, -0.11], {
                            color: 'red',
                            fillColor: '#f03',
                            fillOpacity: 0.5,
                            radius: 500
                }).addTo(mymap);
                //ポリゴンの追加
                var polygon = L.polygon([
                            [51.509, -0.08],
                            [51.503, -0.06],
                            [51.51, -0.047]
                        ]).addTo(mymap)
                //ポップアップつきマーカー
                marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
                circle.bindPopup("I am a circle.").openPopup();
                polygon.bindPopup("I am a polygon.")
                //ポップアップをレイヤーのようにできる(addToではなくopenOnにすると一度のみ表示し、クリックすると消える);
                var sta_popup = L.popup()
                        .setLatLng([51.5, -0.09])
                        .setContent("I am a standalone popup.")
                        .openOn(mymap);
                //クリックするたびに緯度経度を表示する関数
                function onMapClick_Art(e) {
                            alert("You clicked the map at " + e.latlng);
                }
                mymap.on('click', onMapClick_Art);
        </script>
        </body>
</html>

```


このような地図ができます。
![leaf_tutorial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477750/7bd5dc98-63d1-ef76-2823-6d79b3aaa2f3.png)