演習問題1-1: 地図を表示させよう!

問題1. 以下のコードを編集して福岡を表示してください.(初期状態はロンドン)

  • 福岡の座標は:33.5833° N, 130.4000° E

<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">
  <title>2015/11/12 BODIKセミナー 演習1-1</title>

  <!-- Leaflet(地図ライブラリ)ファイル -->
  <script type="text/javascript" src="../leaflet/leaflet.js"></script>
  <link rel="stylesheet" href="../leaflet/leaflet.css">

  <style>
  body { padding: 0; margin: 0; }
  h1 { margin-left: 1em; font-family: sans-serif; font-weight: lighter; }
  #map { width: 100%; height: 400px; padding: 0; margin: 0; }
  </style>
</head>

<body>

<h1>演習1-1</h1>

<div id="map"></div>

<script type="text/javascript">
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

</script>

</body>

</html>

// 26行目を以下のように編集してください.

var map = L.map('map').setView([33.5833, 130.4000], 13);

問題2. SRPビルにマーカーを表示してください.

  • SRPビルの座標は:33.5932094° N,130.3558809° E
// 31行目に以下のコードを追加してください.

L.marker([33.5932094, 130.3558809]).addTo(map);

問題3. 問題2で表示したマーカーをクリックするとポップアップで「BODIKセミナー」と表示するように修正してください.

// 問題2で追加したコードを以下のように編集してください.

L.marker([33.5932094, 130.3558809]).addTo(map).bindPopup('BODIKセミナー');