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

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

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

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

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

Q&A

0回答

874閲覧

Leaflet.jsを使って、ポップアップにクラス名を付けたい

yows

総合スコア11

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

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

0グッド

0クリップ

投稿2020/01/23 13:24

質問

Leaflet.jsを使ってweb上に地図を表示することはでき、json形式を用いて、複数のポイントをマークアップすることができたのですが、ここのポップアップに対して、用意した配列からクラス名を付けるところで、詰まってしまいました。
ご存知の方がおられましたら、教えてください。

JavaScript

1'use strict' 2 3{ 4 var map = L.map('map').setView([38.4316, 141.3094], 12); 5 6 var geojsonFeature = []; 7 var test_popupContents = ['sampleA', 'sampleB', 'sampleC', 'sampleD']; 8 var lat = [38.4316, 38.4306, 38.4299, 38.4327]; 9 var lon = [141.3094, 141.3076, 141.3070, 141.3087]; 10 11 var customClassName = ['.btn_SampleA', '.btn_SampleB', '.btn_SampleC', '.btn_SampleD']; 12 13 var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ 14 attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', 15 maxZoom: 21 16 }); 17tileLayer.addTo(map); 18 19for (var i = 0; i < test_popupContents.length; i++) { 20 geojsonFeature.push({ 21 "type": "Feature", 22 "properties": { 23 "popupContent": test_popupContents[i], 24 "className": customClassName[i] 25 }, 26 "geometry": { 27 "type": "Point", 28 "coordinates": [lon[i], lat[i]] 29 }, 30 }); 31 32} 33 L.geoJson(geojsonFeature, 34 { 35 onEachFeature: function(feature, layer){ 36 if(feature.properties && feature.properties.popupContent){ 37 layer.bindPopup(feature.properties.popupContent); 38 } 39 } 40 }).addTo(map) 41 42}

試したこと

L.DomUtil.addClassName(customClassName);

上記の式を参考にいろいろ試してみたのですね。クラス名が付けられずにおりました。

どこの要素についているのかも見つけられずにいました。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問