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

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

ただいまの
回答率

89.10%

leafletにて地図上のマーカーをアイコンに変更したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,113

jam912sh

score 23

leafletにて地図上のマーカーをアイコンに変更したいのですが、以下コードでは変更できませんでした。
JavaScript、leafletにお詳しい方、ご教示頂たく存じます。
宜しくお願い致します。

 詳細

CSVから読み込んだデータをオープンストリートマップ上に
デフォルトの青いマーカーを表示させるところまでは、完成致しましたが、
そのマーカーを自分で色など指定できるアイコン変更する事ができませんでした。
ウェブで色々検索して、実装を試みましたが、解決できませんでした。

 該当のソースコード

<!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; }
  /* 変更するアイコンの色設定 */
  .marker {
    width: 20px !important;
    height: 20px !important;
    margin: -10px !important;
    border-radius: 10px;
    border: 3px solid #fdfdfd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.8);
    background-color: #c43;
    z-index: 20 !important;
  }
  </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) {
     layer.bindPopup(feature.properties.Title);
   }
  });

  /* マーカーをアイコンに変える */
  var myIcon = L.divIcon({ className: 'marker', iconAnchor: [0, 0] });
      //マーカーに同じ地点にアイコンを設定
      L.marker(mpoint, { icon: myIcon });

  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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

昔に回答したもので応用できるかも。

【JavaScript - Open Street Mapにカテゴリ毎に違ったアイコンを表示したい|teratail】
https://teratail.com/questions/33751

下記 記事の Answer にある onEachFeature の関数内で layer.setIcon(icon1); でもいけるかも。

【layers - Leaflet : Change marker icon from onEachFeature instead of pointToLayer - Geographic Information Systems Stack Exchange】
https://gis.stackexchange.com/questions/153381/leaflet-change-marker-icon-from-oneachfeature-instead-of-pointtolayer

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/23 14:45

    kei344様、ご教示頂き有難うございます。上記の
    onEachFeature の関数内で layer.setIcon(icon1);にて無事問題解決致しました。
    大変助かりました!お忙しい中、貴重な情報を頂き有難うございました。

    キャンセル

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

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