Leaflet.jsで、すべてのマーカーのポップアップを最初からopenPopup()にしたい。

Leaflet.jsを使って、webに地図を表示させて、複数の地点をマーキングすることができました。
それで、ここからポップアップを最初から表示されるようにしたいのですが、うまく行きません。

#実際のコード

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
    <link rel="stylesheet" href="main.css">
  </head>
  <body class="container">
    <header></header>
    <main>
        <div id="app">
            <div id="map"></div>
        </div>
     
    </main>
    <footer></footer>
   
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="main.js"></script>
  </body>
</html>

javaScripot
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, {className: feature.properties.className});
38                }
39            }
40        }).addTo(map).openPopup();
41
42}

##現状と質問
これで試してみますと、test_popupContentsのsampleAのみが、webページが読み込まれた時に最初からポップアップが表示されています。

これを、すべてのtest_popupContentsの配列のすべてをopenPopup()にするためにはどうしたらよいでしょうか？

##２／３　追記
いただいたコメントを参考に次のコードを書いてみました。

'use strict'

{
    var map = L.map('map').setView([38.4316, 141.3094], 12);

    var geojsonFeature = [];
    var test_popupContents = ['sampleA', 'sampleB', 'sampleC', 'sampleD'];
    var lat = [38.4316, 38.4306, 38.4299, 38.4327];
    var lon = [141.3094, 141.3076, 141.3070, 141.3087];

    var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
        attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 20,
        autoClose:false
        });
        tileLayer.addTo(map);

for (var i = 0; i < test_popupContents.length; i++) {
    geojsonFeature.push({
        "type": "Feature",
        "properties": {
        "popupContent": test_popupContents[i],
    },
    "geometry": {
      "type": "Point",
      "coordinates": [lon[i], lat[i]] 
    },
    });
}
    
    L.geoJson(geojsonFeature,
        {
            onEachFeature: function(feature, layer){
                if(feature.properties && feature.properties.popupContent){
                    // layer.bindPopup(feature.properties.popupContent, {className: feature.properties.className});
                    layer.bindPopup(feature.properties.popupContent);
                    geojsonFeature.push(layer);
                }
            },
            pointToLayer: function (feature, latlng) {
                var m = L.marker( latlng, { title : feature.properties.popupContent } );
                geojsonFeature.push( m );
                return m;
            }
        }).addTo(map);

        function markerFunction( id ) {
            for ( var i in geojsonFeature ) {
                var geoJsonFeatureID = geojsonFeature[i].options.title;
                if ( geoJsonFeatureID == id ) {
                    geojsonFeature[i].openPopup();
                }
            }
        }

        markerFunction();
        
}

これでも、うまく行きません。
consoleには
main.js:52 Uncaught TypeError: Cannot read property 'title' of undefinedとでています。

###追記２
単純に開かせる方法で、試してみたのですがうまく行きませんでした。

'use strict'

{
    var map = L.map('map').setView([38.4316, 141.3094], 12);

    var geojsonFeature = [];
    var test_popupContents = ['sampleA', 'sampleB', 'sampleC', 'sampleD'];
    var lat = [38.4316, 38.4306, 38.4299, 38.4327];
    var lon = [141.3094, 141.3076, 141.3070, 141.3087];

    var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
        attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 20,
        autoClose:false
        });
        tileLayer.addTo(map);

for (var i = 0; i < test_popupContents.length; i++) {
    geojsonFeature.push({
        "type": "Feature",
        "properties": {
        "popupContent": test_popupContents[i],
    },
    "geometry": {
      "type": "Point",
      "coordinates": [lon[i], lat[i]] 
    },
    });
}
    
    L.geoJson(geojsonFeature,
        {
            onEachFeature: function(feature, layer){
                if(feature.properties && feature.properties.popupContent){
                    // layer.bindPopup(feature.properties.popupContent, {className: feature.properties.className});
                    layer.bindPopup(feature.properties.popupContent);
                    geojsonFeature.push(layer);
                }
            },
            pointToLayer: function (feature, latlng) {
                var m = L.marker( latlng, { title : feature.properties.popupContent } );
                geojsonFeature.push( m );
                return m;
            }
        }).addTo(map);

        function markerFunction() {
            for (var i in geojsonFeature) {
                geojsonFeature[i].openPopup();
            }
        }

        markerFunction();
        
}

これをしますと、consoleが
Uncaught TypeError: geojsonFeature[i].openPopup is not a functionになります。

行動規範の内容に同意します

回答1件

ベストアンサー

bindPopup(/*略*/).openPopup();とかは試されていますか？

【Documentation - Leaflet - a JavaScript library for interactive maps】
https://leafletjs.com/reference-1.6.0.html#popup

js
1marker.bindPopup(popupContent).openPopup();

過去に似た質問に回答していました。（過去質問の要件に沿って）個別にポップアップしていますが、そこを書き換えれば全ポップアップも可能だと思います。

【JavaScript - Leaflet.jsでマーカーをaタグで呼び出しポップアップしたい｜teratail】
https://teratail.com/questions/59625

追記：

単純に全部開くならこうでは？

js
1function markerFunction(id) {
2	for (var i in geojsonFeature) {
3		geojsonFeature[i].openPopup();
4	}
5}

投稿2020/02/02 12:59

編集2020/02/03 03:00

kei344

総合スコア69398

yows

2020/02/02 14:46 編集

コメントありがとうございます。 ``` layer.bindPopup(popupContent).openPopup(); ``` これも試してみましたが、できませんでした。教えていただいた、別な記事を参照にコードを書いてみましたが、こちらもうまく行きませんでした。自分で書き換えた、コードを書きますので、もう一度見ていただけないでしょうか ``` 'use strict' { var map = L.map('map').setView([38.4316, 141.3094], 12); var geojsonFeature = []; var test_popupContents = ['sampleA', 'sampleB', 'sampleC', 'sampleD']; var lat = [38.4316, 38.4306, 38.4299, 38.4327]; var lon = [141.3094, 141.3076, 141.3070, 141.3087]; var customClassName = ['.btn_SampleA', '.btn_SampleB', '.btn_SampleC', '.btn_SampleD']; var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', maxZoom: 21 }); tileLayer.addTo(map); for (var i = 0; i < test_popupContents.length; i++) { geojsonFeature.push({ "type": "Feature", "properties": { "popupContent": test_popupContents[i], "className": customClassName[i] }, "geometry": { "type": "Point", "coordinates": [lon[i], lat[i]] }, }); } L.geoJson(geojsonFeature, { onEachFeature: function(feature, layer){ if(feature.properties && feature.properties.popupContent){ // layer.bindPopup(feature.properties.popupContent, {className: feature.properties.className}); layer.bindPopup(feature.properties.popupContent); } }, pointToLayer: function (feature, latlng) { var m = L.marker( latlng, { title : feature.properties.popupContent } ); geoJson.push( m ); return m; } }).addTo(map); function markerFunction( id ) { for ( var i in markers ) { var markerID = markers[i].options.title; if ( markerID == id ) { markers[i].openPopup(); } } } markerFunction(); }``

kei344

2020/02/02 14:54

コメントエリアではマークダウンが使えないため、コードはここではなく質問文にコードブロックで追記してください。（決して元のコードを消さないでください）また、関数markerFunctionが書き換えられていませんが、そこは修正すべき箇所です。

yows

2020/02/02 15:16

すいませんでした。引き続きやってみます

yows

2020/02/03 02:49

kei344様コードを書き直してみましたが、うまく行きませんでした。もう少し詳しく教えていただけないでしょうか？

yows

2020/02/03 04:41

何度も申し訳ありません。

kei344

2020/02/03 07:50

geoJsonが非同期処理を前提に作られている場合、マーカーの登録がmarkerFunctionの実行より後になっているかもしれませんね。 setTimeout(markerFunction,100); とかにしてみても同じでしょうか？（レイヤー自体のイベントを拾うほうが確実だとは思いますが）

kei344

2020/02/03 08:09

あ、geojsonFeature.push( m );とgeojsonFeature.push(layer);で同じ変数使ってるじゃないですか。そりゃopenPopupなんて無いですよ。あと、bindPopupにオプションを指定する必要がありました。 layer.bindPopup(feature.properties.popupContent,{autoClose:false}); 【Documentation - Leaflet - a JavaScript library for interactive maps】 https://leafletjs.com/reference-1.6.0.html#popup-autoclose 【動くサンプル】 https://jsfiddle.net/dw1tznx3/

yows

2020/02/03 13:09

kei344様問題解決しました。サンプルコード、ありがとうございます。setTimeoutの件、autoCloseの件勉強になりました。深く感謝いたします。

行動規範の内容に同意します