leafletにて地図上にカテゴリ毎に違ったアイコンを表示したい

前提・実現したいこと

openstreetMap、leafletにて、CSVファイルで受信したカテゴリ別に
違ったアイコンを表示したく存じます。

詳細

度々のご質問申し訳ございません。
CSVファイルの中にあるicon情報を使い、
カテゴリ毎に別々のアイコンを表示させる事ができません。
以下ソースにて、IF文にて、分岐を試みましたが、アイコン画像は表示されず、
デフォルトのマーカーアイコンが表示されます。
JavaScript、leafletにお詳しい方のお力をお借りしたく存じます。
宜しくお願い致します。

data.csv

icon,title,latitude,longitude,
icon1,コンビニA,35.728677,139.746093
icon2,コンビニB,35.724217,139.779052

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <title>leaflet-map-simple-instructor-sample</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

  <!-- Load Leaflet code library - see updates at http://leafletjs.com/download.html -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  <!-- Load Omnivore plugin to convert CSV to GeoJSON format -->
  <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>

  <!-- スタイルシートでマップとタイトルを配置する -->
  <style>
  body { margin:0; padding:0; }
  #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  #map-title { position: relative; margin-top: 10px; margin-left: 50px; float: left; background: white; border: 2px solid rgba(0,0,0,0.2); padding: 6px 8px; font-family: Helvetica; font-weight: bold; font-size: 24px; z-index: 800; }
  </style>
</head>
<body>

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

  <!-- JavaScriptを使用して地図コンテンツを作成する (.js) -->
  <script>

  /* 初期センターとズームレベルで地図を設定する */
  var map = L.map('map', {
    center: [35.728955,139.817161], 
    zoom: 12,  
  });

  /* マップレイヤーを表示するコントロールパネル */
  var controlLayers = L.control.layers( null, null, {
   position: "topright",
   collapsed: false
  }).addTo(map);

  /* 地形のベースマップタイル */
  var terrain = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
  }).addTo(map); // EDIT - insert or remove ".addTo(map)" 前回のセミコロンの前にデフォルトで表示する
  controlLayers.addBaseLayer(terrain, 'Stamen Terrain basemap');


  /* data.csvファイルから緯度/経度マーカーをアップロードし、ポップアップでタイトルを表示し、初期中心を上書きし、地図に合わせてズームします */
  var customLayer = L.geoJson(null, {
   onEachFeature: function(feature, layer) {


   //CSVの「icon」が「icon1」ならば「img1.png」
    if (feature.properties.icon === 'icon1')　{
        var icon = L.icon({
            iconUrl: 'img1.png',
            iconSize: [20,20]
          });
            }
   //CSVの「icon」が「icon2」ならば「img2.png」
   　if (feature.properties.icon === 'icon2')　{
         var icon = L.icon({
             iconUrl: 'img2.png',
             iconSize: [20,20]
           });
           }
     //アイコン追加
     layer.setIcon(icon);
     //CSVの「title」内容をポップアップに追加     
     layer.bindPopup(feature.properties.Title);
   }
  });

  var runLayer = omnivore.csv('data.csv', null, customLayer)
  .on('ready', function() {
   map.fitBounds(runLayer.getBounds());
  }).addTo(map);
  controlLayers.addOverlay(customLayer, 'Markers from data.csv');

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

試したこと

以下サイトを参考に致しましたが、上手くアイコンが表示されませんでした。
https://teratail.com/questions/33751

また、IFを削除して、以下コードのみにすると、
デフォルトマーカーから、アイコンへ変更されます。
var icon = L.icon({
iconUrl: 'img1.png',
iconSize: [20,20]
});

行動規範の内容に同意します

回答1件

ベストアンサー

console.log(feature.properties) としてデベロッパーツールで確認してみては。

追記：

下記矢印の先に全角の空白が。

js
1   //CSVの「icon」が「icon1」ならば「img1.png」
2//                                          ↓
3    if (feature.properties.icon === 'icon1')　{
4        var icon = L.icon({
5            iconUrl: 'img1.png',
6            iconSize: [20,20]
7          });
8            }
9   //CSVの「icon」が「icon2」ならば「img2.png」
10// ↓                                         ↓
11   　if (feature.properties.icon === 'icon2')　{
12         var icon = L.icon({
13             iconUrl: 'img2.png',
14             iconSize: [20,20]
15           });
16           }

投稿2018/11/23 06:57

編集2018/11/23 08:03

kei344

総合スコア69398

jam912sh

2018/11/23 07:36

kei344様、本日は大変お世話になっております。上記の件、console.log(feature.properties) とconsole.log(feature.properties.icon)にてデベロッパーツールにて確認致しました。値は問題なく取得されているようで御座います。引き続き、調査致します。ご教示頂き有難うございます！

jam912sh

2018/11/23 08:21

kei344様、ご指摘有難うございます。申し訳ございません。ご指摘頂きました通り、全角スペースが入っていいたようで御座います。こちらを削除し確認致しましたところ、無事解決致しました。勤労感謝の日にも関わらず、大変貴重なお時間にてご確認頂き有難うございました！今後は上記ミス気を付けます。ご迷惑をお掛け致しました。

行動規範の内容に同意します