Devlog, Leaflet-1

Devlog, Leaflet-1

by higax

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
  width: 500px;
  height: 500px;
}

JavaScript

// 初期位置「神戸ポートタワー」でマップを生成
var map = L.map('map').setView([34.6825,135.1866], 11);

// OpenStreetMapのレイヤをマップに追加
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
}).addTo(map);

// マーカーにポップアップを追加
L.marker([34.6825,135.1866]).addTo(map).bindPopup('神戸ポートタワー').openPopup();