質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,262

jam912sh

score 23

 前提・実現したいこと

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]
});

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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


追記:

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

   //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]
           });
           }

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/23 16:36

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

    キャンセル

  • 2018/11/23 17:21

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る