質問
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);
上記の式を参考にいろいろ試してみたのですね。クラス名が付けられずにおりました。
どこの要素についているのかも見つけられずにいました。
あなたの回答
tips
プレビュー