演習問題1-2: 色やアイコンを変えてみよう!

問題1. アイコンを変更してください.
FontAwesomeに利用できるアイコンが掲載されています.

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

  <!-- Font Awesome for Leaflet (css) -->
 <link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="../leaflet.awesome-markers/dist/leaflet.awesome-markers.css">

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

  <!-- Font Awesome for Leaflet (js) -->
  <script type="text/javascript" src="../leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>

  <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-2:FontAwesomeで色やアイコンを変えてみよう!</h1>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([33.5833, 130.4000], 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);

var restaurantMarker = L.AwesomeMarkers.icon({
  prefix: 'fa',
  icon: 'coffee',
  markerColor: 'darkred',
  iconColor: 'white'
});

L.marker([33.5932094, 130.3558809], { icon: restaurantMarker }).addTo(map)
    .bindPopup('BODIKセミナー')
</script>
</body>
</html>
// 37行を下記のように変更してください.
// 例:bus
icon: 'bus',

問題2. マーカーの色を変更してください.

// 38行を下記のように変更してください.
// 例1:
markerColor: 'black',