Leaflet 1.3 - 4-1 Leaflet Quick Start Guide

4-1 Leaflet Quick Start Guide

A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with Mapbox tiles) on your page, working with markers, polylines and popups, and dealing with events.

ページに（Mapbox タイルを使用して）Leaflet マップを設定、および、マーカとポリライン、ポップアップを使用した作業、および、イベント処理を含む Leaflet の基本機能を使用してすぐに始められる単純なステップバイステップガイド。

「Leaflet Quick Start Guide（http://leafletjs.com/examples/quick-start/）」に従ってファイルを作成します。

Preparing your page
ページの準備

Before writing any code for the map, you need to do the following preparation steps on your page:

マップのためのコードを書く前に、ページに次の準備段階を実行する必要があります：

● Include Leaflet CSS file in the head section of your document:

（HTML）ドキュメントの head セクションに Leaflet CSS ファイルを挿入します：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
 integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
 crossorigin=""/>

● Include Leaflet JavaScript file after Leaflet’s CSS:

Leaflet CSS の後に Leaflet JavaScript ファイルを挿入します：
<!-- Make sure you put this AFTER Leaflet's CSS -->

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
 integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
 crossorigin=""></script>

Put a div element with a certain id where you want your map to be:

div エレメントをマップにしたい id とともに設置します：

<div id="mapid"></div>

Make sure the map container has a defined height, for example by setting it in CSS:

例えば、CSS に設定っすることによって、定義された高さがあるマップコンテナを確認します：

#mapid { height: 180px; }

Now you’re ready to initialize the map and do some stuff with it.

今、マップを初期化し、材料を実行する準備ができました。


Setting up the map
マップの設定

Let’s create a map of the center of London with pretty Mapbox Streets tiles. First we’ll initialize the map and set its view to our chosen geographical coordinates and a zoom level:

見事な Mapbox Streets tiles でロンドンの中心部のマップを作成します。最初に、マップを初期化し、選んだ地理座標とズームレベルにビューを設定します：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

By default (as we didn’t pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.

初期値によって（マップ事例を作成するときオプションをと適用していないので）、マップの全てのマウスとタッチ作用は利用可能で、ズームと属性コントロール（制御）があります。

Note that setView call also returns the map object — most Leaflet methods act like this when they don’t return an explicit value, which allows convenient jQuery-like method chaining.

setView コールは、同じようにマップオブジェクトを返します - 便利な jQuery 風のメッソッド連鎖を許可するという、はっきりした値を返さないとき殆どの Leaflet メソッドはこのように動作することは、重要です。

Next we’ll add a tile layer to add to our map, in this case it’s a Mapbox Streets tile layer. Creating a tile layer usually involves setting the URL template for the tile images, the attribution text and the maximum zoom level of the layer. In this example we’ll use the mapbox.streets tiles from Mapbox’s “Classic maps” (in order to use tiles from Mapbox, you must also request an access token).

次に、タイルレイヤをマップに追加するために追加します、この場合、それは Mapbox Streets タイルレイヤです。タイルレイヤを作成することは、通常、タイル画像の URL template と属性テキスト（attribution text）、レイヤの最大ズームレベル（maximum zoom level）の設定を含みます。この例では、Mapbox の "Classic maps”（Mapbox からタイルを使用することによって、アクセストークン（access token）もリクエストする必要があります）から mapbox.streets タイルを使用します。

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
 maxZoom: 18,
 id: 'mapbox.streets',
 accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Make sure all the code is called after the div and leaflet.js inclusion. That’s it! You have a working Leaflet map now.

div と leaflet.js 挿入の後に、全てのコードが呼び出されることを確認します。それで完了です！今、Leaflet マップが動作します。

It’s worth noting that Leaflet is provider-agnostic, meaning that it doesn’t enforce a particular choice of providers for tiles. You can try replacing mapbox.streets with mapbox.satellite, and see what happens. Also, Leaflet doesn’t even contain a single provider-specific line of code, so you’re free to use other providers if you need to (we’d suggest Mapbox though, it looks beautiful).

Leaflet は、プロバイダ不可知論者（プロバイダの存在について確かな知識を持っていない）、それは、タイルに対して特定のプロバイダを選択することを強制するものではないことを意味します。mapbox.streets を mapbox.satellite に置き換えてみると、何が起こるかわかります。Leaflet は、単一のプロバイダ固有のラインのコードさえ含みません、それは、もし必要なら他のプロバイダを使用することを束縛しません。（美しく見えるので、Mapbox を提案します。）

Mapbox のツール、API、SDK を使用するには、Mapbox access token が必要です。そのためには、Mapbox でアカウントを作成します。
ここでは、アカウントの作成が必要ない OpenStreetMap を使用してみました。コードの例は、Overview ページにあります。

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 18
 }).addTo(mymap);
</script>

Markers, circles and polygons

Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let’s add a marker:

タイルレイヤの他にも、マーカやポリライン、ポリゴン、円、ポップアップを含む他のものをマップに簡単に追加できます。マーカを追加してみます。

var marker = L.marker([51.5, -0.09]).addTo(mymap);

Adding a circle is the same (except for specifying the radius in meters as a second argument), but lets you control how it looks by passing options as the last argument when creating the object:

（２番めの引数としてメータ単位で半径を指定する場合を除いて）円を追加することは同じです、しかし、オブジェクトを作成するとき、最後の因数としてオプションを渡すことによって表示方法を制御できます。

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

Adding a polygon is as easy:

ポリゴンを追加することも簡単です：

var polygon = L.polygon([
 [51.509, -0.08],
 [51.503, -0.06],
 [51.51, -0.047]
]).addTo(mymap);

Working with popups
ポップアップを使用した動作

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:

ポップアップ（popup）は、マップ上の特定のオブジェクトに、いくつかの情報を付属させたいときに、通常、使用されます。Leaflet は、これに対してとても便利なショートカットがあります。

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

Try clicking on our objects. The bindPopup method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object, and the openPopup method (for markers only) immediately opens the attached popup.

オブジェクトをクリックしてみましょう。bindPopup メソッドはマーカに、指定された HTML コンテンツを伴ったポップアップを付属し、オブジェクトをクリックしたときポップアップが現れます。そして、openPopup メソッドが、（マーカに対してだけ）付属されたポップアップをすぐに開きます。

You can also use popups as layers (when you need something more than attaching a popup to an object):

（オブジェクトにポップアップを付属することよりも何かを必要とするとき）レイヤとしてポップアップも使用できます。

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

Here we use openOn instead of addTo because it handles automatic closing of a previously opened popup when opening a new one which is good for usability.

ここで、addTo の代わりに openOn を使用します。なぜなら、使い勝手がいいように、新しいポップアップが開いたときその前に開いたポップアップを自動的に閉じる処理をします。

Dealing with events
イベントの処理

Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function. It allows you to react to user interaction:

Leaflet で発生することはいつでも、マーカをクリックしたり、マップのズームが変わるなど、corresponding オブジェクトは、ファンクションで登録されたイベントを送信します。それは、ユーザとのインタラクション（対話）に反応することを許可します：

function onMapClick(e) {
 alert("You clicked the map at " + e.latlng);
}

mymap.on('click', onMapClick);

Each object has its own set of events — see documentation for details. The first argument of the listener function is an event object — it contains useful information about the event that happened. For example, map click event object (e in the example above) has latlng property which is a location at which the click occured.

各オブジェクトは、それ自身のイベントの設定があります - 詳細はドキュメントを参照してください。listener ファンクションの１番目の引数は、event オブジェクトです - それは発生するイベントについて有用な情報を含んでいます。例えば、map click event オブジェクト（上記 example の e）は、クリック発生位置である経緯度プロパティを持っています。

Let’s improve our example by using a popup instead of an alert:

alert（アラート）の代わりに popup（ポップアップ）を使用することによって example を改良します。

var popup = L.popup();

function onMapClick(e) {
 popup
  .setLatLng(e.latlng)
  .setContent("You clicked the map at " + e.latlng.toString())
  .openOn(mymap);
}

mymap.on('click', onMapClick);

Try clicking on the map and you will see the coordinates in a popup. View the full example →

マップ状をクリックしてポップアップの地理座標を見てみます。全ての機能の例を見ます ->

Now you’ve learned Leaflet basics and can start building map apps straight away! Don’t forget to take a look at the detailed documentation or other examples.

これで Leaflet の基礎を習得しすぐにマップアプリを構築し始めることができます。詳細なドキュメント、または、他の例を確認することを忘れないでください。

全コード

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-...（省略）"
   crossorigin=""/>
  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-...（省略）"
   crossorigin=""></script>

  <title>Leaflet Quick Start Guide</title>
 </head>
 <body>

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

   // Setting up the map
   var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 18 //,
//  id: 'mapbox.streets',
//  accessToken: 'your.mapbox.access.token'
   }).addTo(mymap);

   // Markers, circles and polygons
   var marker = L.marker([51.5, -0.09]).addTo(mymap);
   
   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);

   // Working with popups
   marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
   circle.bindPopup("I am a circle.");
   polygon.bindPopup("I am a polygon.");

   // Working with popups
   var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

   // Dealing with events
   /**
   function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
   }

   mymap.on('click', onMapClick);
   */

   function onMapClick(e) {
    popup
     .setLatLng(e.latlng)
     .setContent("You clicked the map at " + e.latlng.toString())
     .openOn(mymap);
   }

   mymap.on('click', onMapClick);

  </script>
 </body>
</html>