クリックイベントでサイドバーにJSONデータを渡したい

###前提・実現したいこと
立て続けの質問失礼いたします。
現在OPEN STREET MAPに、Leaflet.jsとそのプラグインであるL.Control.Sidebar.jsを利用して、サイドバーを設置しています。

マーカーをクリックするとイベントが発生して、場所の名前と住所がポップアップするというところまでは実装済みです。しかし、それをポップアップではなくサイドバーに表示するところで壁にぶつかってしまいまいした。

Javascript
1$.getJSON("geojson.php", function (data) {
2
3     var geojson = L.geoJson(data, {
4
5         pointToLayer: function (feature, latlng) {
6              var customIcon = L.icon({
7                  iconSize: [32, 37],
8                  iconAnchor: [16, 37],
9                  popupAnchor: [1, -24],
10                  iconUrl: 'icon/' + feature.properties.category + '.png'
11              });
12
13              return L.marker(latlng, {
14                  icon: customIcon
15              });
16        },
17
18         onEachFeature: function (feature, layer) {
19               layer.bindPopup('<b>' + feature.properties.name + '</b><br />' + feature.properties.address);
20         }
21
22     });
23
24     geojson.addTo(map);
25
26});

kei344様アドバイスありがとうございました。
アイコンは連番で保存していたため、効率が良さそうなこのやり方で対応しました。

###発生している問題

下記のコードを実行すると、サイドバーはきちんと動作するのですが、どのマーカーをクリックしても、Javascriptからサイドバーに渡されるGeojsonのデータが、常に配列の一番最初のものになってしまいます。
ここでいうと、どのマーカーをクリックしても、サイドバーに表示されるのは「鈴木商店」「宮城県仙台市青葉区」という意味です。

###該当のソースコード

Javascript
1// -- サイドバー設置のため追記 ここから -- //
2var sidebar = L.control.sidebar('sidebar', {
3    closeButton: true,
4    position: 'left'
5});
6
7map.addControl(sidebar);
8// -- サイドバー設置のため追記 ここまで -- //
9
10$.getJSON("geojson.php", function (data) {
11
12    var geojson = L.geoJson(data, {
13
14        pointToLayer: function (feature, latlng) {
15            var customIcon = L.icon({
16                iconSize: [32, 37],
17                iconAnchor: [16, 37],
18                popupAnchor: [1, -24],
19                iconUrl: 'icon/' + feature.properties.category + '.png'
20            });
21
22            return L.marker(latlng, {
23                icon: customIcon
24            });
25        },
26
27        onEachFeature: function (feature, layer) {
28            
29            // ①layer.bindPopupからsidebar.setContentに変更
30            sidebar.setContent('<b>' + feature.properties.name + '</b><br />' + feature.properties.address);
31
32            //layer.bindPopup('<b>' + feature.properties.name + '</b><br />' + feature.properties.address);
33        }
34
35    });
36
37    // ②geojson.addTo(map)に.on以下を追記
38    geojson.addTo(map).on('click', function () {
39        sidebar.toggle();
40    });
41
42    // -- サイドバー設置のため追記 ここから -- //
43    map.on('click', function () {
44        sidebar.hide();
45    })
46
47    sidebar.on('show', function () {
48        console.log('Sidebar will be visible.');
49    });
50
51    sidebar.on('shown', function () {
52        console.log('Sidebar is visible.');
53    });
54
55    sidebar.on('hide', function () {
56        console.log('Sidebar will be hidden.');
57    });
58
59    sidebar.on('hidden', function () {
60        console.log('Sidebar is hidden.');
61    });
62
63    L.DomEvent.on(sidebar.getCloseButton(), 'click', function () {
64        console.log('Close button clicked.');
65    });
66    // -- サイドバー設置のため追記 ここまで -- //
67
68});

Json
1{
2    "type": "FeatureCollection",
3    "features": [{
4        "type": "Feature",
5        "geometry": {
6            "type": "Point",
7            "coordinates": ["140.10", "39.60"]
8        },
9        "properties": {
10            "name": "鈴木商店",
11            "address": "宮城県仙台市青葉区",
12            "category": "1"
13        }
14    }, {
15        "type": "Feature",
16        "geometry": {
17            "type": "Point",
18            "coordinates": ["140.00", "39.40"]
19        },
20        "properties": {
21            "name": "佐藤水産",
22            "address": "宮城県名取市",
23            "category": "2"
24        }
25    }

###試したこと
GitHub の説明を見ると、

Javascript
1sidebar.setContent('test <b>test</b> test');

とすれば、サイドバーの内容を動的に変更できるとあります。
ですからこの記述をした①の箇所か、クリックイベントを発生させる②の箇所のいずれかに問題があると思っています。配列の取扱いの間違い？①の後に②の.on以下を付けてみたり、②の差し込み箇所を変えたりもしたのですが、結果が同じであったり地図が表示されなくなったりで、なかなか先に進めません。アドバイスのほどよろしくお願いいたします。

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

回答1件

ベストアンサー

イベントはマーカーに設定すればいけるとおもいます。

JavaScript
1return L.marker( latlng, {
2	icon: customIcon
3} ).on( 'click', function() {
4	sidebar.setContent( '<b>' + feature.properties.name + '</b><br />' + feature.properties.address );
5	// ここでサイドバーを開けるコードを入れる
6} );
7```開ける動作はマーカーのクリックイベントにしたほうがいい気がします。
8
9```JavaScript
10/* // 開ける動作はマーカーのクリックイベントにしたほうが。
11geojson.addTo( map ).on( 'click', function () {
12	sidebar.toggle();
13} );
14// ↓ */
15geojson.addTo( map );

投稿2016/04/30 07:03

kei344

総合スコア69407

capella

2016/04/30 07:46

ご指導いただいたやり方を試してみましたが、サイドバーが開かなくなりました。 return L.marker(latlng, { icon: customIcon }).on('click', function () { sidebar.setContent('' + feature.properties.name + ' ' + feature.properties.address); // ここでサイドバーを開けるコードを入れる }); }, //onEachFeature: function (feature, layer) { // sidebar.setContent('' + feature.properties.shop_name + ' ' + feature.properties.shop_address); //layer.bindPopup('' + feature.properties.shop_name + ' ' + feature.properties.shop_address); //} }); geojson.addTo(map);

capella

2016/04/30 07:51

すみません。これはこちらの転記ミスです。 feature.properties.shop_name ↓ feature.properties.name

capella

2016/04/30 07:56 編集

解決しました！ geojson.addTo( map ).on( 'click', function () { sidebar.toggle(); } ); のままだと、サイドバーにデータが入ってくるようです。本当にありがとうございました！

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