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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1430閲覧

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

jam912sh

総合スコア25

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/23 03:25

編集2018/11/23 03:28

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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

【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 04:17

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jam912sh

2018/11/23 05:45

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問