Skip to content

Instantly share code, notes, and snippets.

@miyachin

miyachin/leaflet-demo.html

Created March 14, 2019 03:16
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save miyachin/aa1f1d745578aa915fc2c2bd6e99d4df to your computer and use it in GitHub Desktop.
Save miyachin/aa1f1d745578aa915fc2c2bd6e99d4df to your computer and use it in GitHub Desktop.
Download ZIP
Raw
leaflet-demo.html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Leafletデモ</title>
</head>
<body>
<div id="mapid"></div>
</body>
</html>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<style media="screen">
#mapid {
height: 500px;
}
</style>
<script type="text/javascript">
//地図の中心地を定義
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}', {
attribution: 'Map data &copy; <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: '***' //ここにaccess tokenを挿入
}).addTo(mymap);
// Marker（ピン）を追加する
var marker = L.marker([51.5, -0.09]).addTo(mymap);
marker.bindPopup("<b>Hello</b>").openPopup();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment