leafletjs choroplethサンプルの改造について02

Leaflet.jsのサンプルで、
http://leafletjs.com/examples/choropleth/
を改造しようとしているのですが、overlayの切り替えをする時に、一緒に
var info = L.control();
var legend = L.control({position: 'bottomright'});
もスタイルを変えて切り替えたいのですが、各overlay（下記のコードの場合、choropleth01,choropleth02）に
info.addTo(choropleth01);
legend.addTo(choropleth01);
としても、なぜか出来ません。
チェックボックスの場合分けをしてしたらなんとか出来るのですが、コードが多くなりすぎるので
どうにかしたいとしています、引数等の使い分けがまだ理解し切れていないのもあるのですが、、

特に知りたい事は例えば下記の用な場合に、

javascript
1info.onAdd = function (map) {
2        this._div = L.DomUtil.create('div', 'info');
3        this.update();
4        return this._div;
5    };
6    info.update = function (props) {
7        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
8            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
9            : 'Hover over a state');
10    };
11

'<h4>US Population Density</h4>'（タイトル）と、
props.density（プロパティ）を
場合によってかき分けたいときの書き方です。

function (map,title,name,property)
などとして

var title="test-title";
var property = "test-property";

info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>'+ title +'</h4>' + (props ?
'<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};

アドバイス頂けたら助かります。

その後、下記のようにしてみましたが、contrilパネルのinfo,legendが表示出来ていません。

javascript
1<!DOCTYPE html>
2<html>
3<head>
4
5    <title>Choropleth Tutorial - Leaflet</title>
6
7    <meta charset="utf-8" />
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
11
12    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
13    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
14
15
16    <style>
17        #map {
18            width: 600px;
19            height: 400px;
20        }
21    </style>
22
23    <style>#map { width: 800px; height: 500px; }
24.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
25.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style>
26</head>
27<body>
28
29<div id='map'></div>
30
31<script type="text/javascript" src="us-states.js"></script>
32
33<script type="text/javascript">
34
35    var choropleth01 = new L.LayerGroup();
36    var choropleth02 = new L.LayerGroup();
37
38    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
39            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
40+
41            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
42        mbUrl ='https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw',
43        osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
44    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">' + 'OpenStreetMap</a> contributors';
45
46        var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light',attribution: mbAttr}),
47        streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',attribution: mbAttr});
48
49        var map = L.map('map', {
50            center: [37.8, -96],
51            zoom: 4,
52            layers: [grayscale, choropleth01]
53        });
54        var baseLayers = {
55            "Grayscale": grayscale,
56            "Streets": streets,
57        };
58        var overlays = {
59           "Choropleth01" : choropleth01,
60           "Choropleth02" : choropleth02
61        };
62        L.control.layers(baseLayers, overlays).addTo(map);
63
64
65
66
67
68    // get color depending on population density value
69    function getColor(d) {
70        return d > 1000 ? '#800026' :
71                d > 500  ? '#BD0026' :
72                d > 200  ? '#E31A1C' :
73                d > 100  ? '#FC4E2A' :
74                d > 50   ? '#FD8D3C' :
75                d > 20   ? '#FEB24C' :
76                d > 10   ? '#FED976' :
77                            '#FFEDA0';
78    }
79
80    function style(feature) {
81        return {
82            weight: 2,
83            opacity: 1,
84            color: 'white',
85            dashArray: '3',
86            fillOpacity: 0.7,
87            fillColor: getColor(feature.properties.density)
88        };
89    }
90
91
92    //info start
93    var info = L.control();
94    // info.onAdd = function (map) {
95    //     this._div = L.DomUtil.create('div', 'info');
96    //     this.update();
97    //     return this._div;
98    // };
99    // info.update = function (props) {
100    //     this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
101    //         '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
102    //         : 'Hover over a state');
103    // };
104
105    var title="test-title";
106    var property = "test-property";
107
108    info.onAdd = function (map) {
109            this._div = L.DomUtil.create('div', 'info');
110            this.update();
111            return this._div;
112        };
113        info.update = function (props) {
114            this._div.innerHTML = '<h4>'+ title +'</h4>' +  (props ?
115                '<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
116                : 'Hover over a state');
117        };
118
119
120    // info.addTo(map);
121    //info end
122
123    //legend start
124    var legend = L.control({position: 'bottomright'});
125
126    legend.onAdd = function (map) {
127
128        var div = L.DomUtil.create('div', 'info legend'),
129            grades = [0, 10, 20, 50, 100, 200, 500, 1000],
130            labels = [],
131            from, to;
132
133        for (var i = 0; i < grades.length; i++) {
134            from = grades[i];
135            to = grades[i + 1];
136
137            labels.push(
138                '<i style="background:' + getColor(from + 1) + '"></i> ' +
139                from + (to ? '&ndash;' + to : '+'));
140        }
141
142        div.innerHTML = labels.join('<br>');
143        return div;
144    };
145
146    //legend.addTo(map);
147    //legend end
148
149
150
151    function highlightFeature(e) {
152        var layer = e.target;
153
154        layer.setStyle({
155            weight: 5,
156            color: '#666',
157            dashArray: '',
158            fillOpacity: 0.4
159        });
160
161        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
162            layer.bringToFront();
163        }
164
165        info.update(layer.feature.properties);
166    }
167
168    var geojson;
169
170    function resetHighlight(e) {
171        geojson.resetStyle(e.target);
172        info.update();
173    }
174
175    function zoomToFeature(e) {
176        map.fitBounds(e.target.getBounds());
177    }
178
179    function onEachFeature(feature, layer) {
180        layer.on({
181            mouseover: highlightFeature,
182            mouseout: resetHighlight,
183            click: zoomToFeature
184        });
185    }
186
187    geojson = L.geoJson(statesData, {
188        style: style,
189        onEachFeature: onEachFeature
190    }).addTo(choropleth01);
191
192    geojson = L.geoJson(statesData, {
193        style: style,
194        onEachFeature: onEachFeature
195    }).addTo(choropleth02);
196
197
198var overlay_name = "name_test";
199var overlay_type = "type_test";
200
201map.on('overlayadd overlayremove baseLayerchange', function(a) {
202    overlay_name = a.name;
203    overlay_type = a.type;
204
205    console.log("overlay_type :");
206    console.log(overlay_type);
207});
208
209if(overlay_name==choropleth01 || overlay_type == overlayadd){
210    title="title01";
211    property = feature.properties.density;
212
213    info.addTo(choropleth01);
214    legend.addTo(choropleth01);
215
216}else if(overlay_name==choropleth02 || overlay_type == overlayadd){
217    title="title02";
218    property = feature.properties.density02;
219
220    info.addTo(choropleth02);
221    legend.addTo(choropleth02);
222}
223
224console.log("title: ");
225console.log(title);
226
227console.log("property: ");
228console.log(property);
229
230
231    map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
232
233</script>
234
235
236
237</body>
238</html>
239

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

回答1件

ベストアンサー

infoやlegendなどのControlはmapにしか追加できないみたいですね...(詳しくはわかりませんが)
なので、overlayaddイベントとoverlayremoveイベントを使ってmap.addControl()とmap.removeControl()すればいいようです。参考

以下動作確認をしたコードです。

html
1<html>
2<head>
3
4</head>
5<body>
6<form>
7<input type='text' name='id'>
8</form>
9</body>
10icchii@ubuntu:~/src/html$ cat l.php
11<!DOCTYPE html>
12<html>
13<head>
14
15    <title>Choropleth Tutorial - Leaflet</title>
16
17    <meta charset="utf-8" />
18    <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
20    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
21
22    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
23    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
24
25
26    <style>
27        #map {
28            width: 600px;
29            height: 400px;
30        }
31    </style>
32
33    <style>#map { width: 800px; height: 500px; }
34.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
35.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style>
36</head>
37<body>
38
39<div id='map'></div>
40
41<script type="text/javascript" src="us-states.js"></script>
42
43<script type="text/javascript">
44
45    var choropleth01 = new L.LayerGroup();
46    var choropleth02 = new L.LayerGroup();
47
48    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
49            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, '
50+
51            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
52        mbUrl ='https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw',
53        osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
54    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">' + 'OpenStreetMap</a> contributors';
55
56        var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light',attribution: mbAttr}),
57        streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',attribution: mbAttr});
58
59        var map = L.map('map', {
60            center: [37.8, -96],
61            zoom: 4,
62            layers: [grayscale, choropleth01]
63        });
64        var baseLayers = {
65            "Grayscale": grayscale,
66            "Streets": streets,
67        };
68        var overlays = {
69           "Choropleth01" : choropleth01,
70           "Choropleth02" : choropleth02
71        };
72        L.control.layers(baseLayers, overlays).addTo(map);
73
74
75
76
77
78    // get color depending on population density value
79    function getColor(d) {
80        return d > 1000 ? '#800026' :
81                d > 500  ? '#BD0026' :
82                d > 200  ? '#E31A1C' :
83                d > 100  ? '#FC4E2A' :
84                d > 50   ? '#FD8D3C' :
85                d > 20   ? '#FEB24C' :
86                d > 10   ? '#FED976' :
87                            '#FFEDA0';
88    }
89
90    function style(feature) {
91        return {
92            weight: 2,
93            opacity: 1,
94            color: 'white',
95            dashArray: '3',
96            fillOpacity: 0.7,
97            fillColor: getColor(feature.properties.density)
98        };
99    }
100
101
102    //info start
103    var info1 = L.control();
104    info1.onAdd = function (map) {
105        this._div = L.DomUtil.create('div', 'info');
106        this.update();
107        return this._div;
108    };
109    info1.update = function (props) {
110        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
111            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
112            : 'Hover over a state');
113    };
114    info1.addTo(map);
115    var info2 = L.control();
116    info2.onAdd = function (map) {
117        this._div = L.DomUtil.create('div', 'info');
118        this.update();
119        return this._div;
120    };
121    info2.update = function (props) {
122        this._div.innerHTML = '<h4>test02</h4>' +  (props ?
123            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
124            : 'Hover over a state');
125    };
126    var infos = {
127        "Choropleth01": info1,
128        "Choropleth02": info2
129    }
130    //info end
131
132    //legend start
133    var legend1 = L.control({position: 'bottomright'});
134
135    legend1.onAdd = function (map) {
136
137        var div = L.DomUtil.create('div', 'info legend'),
138            grades = [0, 20, 50, 200, 500, 2000],
139            labels = [],
140            from, to;
141
142        for (var i = 0; i < grades.length; i++) {
143            from = grades[i];
144            to = grades[i + 1];
145
146            labels.push(
147                '<i style="background:' + getColor(from + 1) + '"></i> ' +
148                from + (to ? '&ndash;' + to : '+'));
149        }
150
151        div.innerHTML = labels.join('<br>');
152        return div;
153    };
154
155    legend1.addTo(map);
156
157    var legend2 = L.control({position: 'bottomright'});
158
159    legend2.onAdd = function (map) {
160
161        var div = L.DomUtil.create('div', 'info legend'),
162            grades = [0, 10, 50, 100, 500, 1000],
163            labels = [],
164            from, to;
165
166        for (var i = 0; i < grades.length; i++) {
167            from = grades[i];
168            to = grades[i + 1];
169
170            labels.push(
171                '<i style="background:' + getColor(from + 1) + '"></i> ' +
172                from + (to ? '&ndash;' + to : '+'));
173        }
174
175        div.innerHTML = labels.join('<br>');
176        return div;
177    };
178    var legends = {
179        "Choropleth01": legend1,
180        "Choropleth02": legend2
181    }
182    //legend end
183
184    function legendAdd(event) {
185        var layername = event.name;
186        map.addControl(legends[layername]);
187        map.addControl(infos[layername]);
188    }
189    function legendRemove(event) {
190        var layername = event.name;
191        map.removeControl(legends[layername]);
192        map.removeControl(infos[layername]);
193    }
194    map.on('overlayadd',legendAdd);
195    map.on('overlayremove',legendRemove);
196
197    function highlightFeature(e) {
198        var layer = e.target;
199
200        layer.setStyle({
201            weight: 5,
202            color: '#666',
203            dashArray: '',
204            fillOpacity: 0.4
205        });
206
207        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
208            layer.bringToFront();
209        }
210
211        info.update(layer.feature.properties);
212    }
213
214    var geojson;
215
216    function resetHighlight(e) {
217        geojson.resetStyle(e.target);
218        info.update();
219    }
220
221    function zoomToFeature(e) {
222        map.fitBounds(e.target.getBounds());
223    }
224
225    function onEachFeature(feature, layer) {
226        layer.on({
227            mouseover: highlightFeature,
228            mouseout: resetHighlight,
229            click: zoomToFeature
230        });
231    }
232
233    geojson = L.geoJson(statesData, {
234        style: style,
235        onEachFeature: onEachFeature
236    }).addTo(choropleth01);
237
238    geojson = L.geoJson(statesData, {
239        style: style,
240        onEachFeature: onEachFeature
241    }).addTo(choropleth02);
242
243    map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
244
245</script>
246</body>
247</html>

投稿2017/01/02 07:41

編集2017/01/02 07:46

popobot

総合スコア6586

oyatsu8

2017/01/02 13:22

大変ありがとうございます！！ var legend1 = L.control({position: 'bottomright'}); や、 var legends = { "Choropleth01": legend1, "Choropleth02": legend2 } //legend end function legendAdd(event) { var layername = event.name; map.addControl(legends[layername]); map.addControl(infos[layername]); } function legendRemove(event) { var layername = event.name; map.removeControl(legends[layername]); map.removeControl(infos[layername]); } map.on('overlayadd',legendAdd); map.on('overlayremove',legendRemove); の辺の書き方が全く思いつかないというか、分かりませんでした。この辺りはJSの基本的な書き方なのでしょうか？

oyatsu8

2017/01/02 17:19

あと、もう一つ質問なのですが、今の場合は、チェックボックスにチェックしたものが全て複数のレイヤが表示されているときは、上記のinfo,legendに関しては一番下にあるレイヤーだけを表示したい場合にどうしたらいいか試してみたのですが、うまくいきませんでした。。 var keep_info_name = "test"; function legendAdd(event) { var layername = event.name; map.addControl(legends[layername]); map.addControl(infos[layername]); if(keep_info_name!=layername){ control.log("info01.hasLayer"); map.removeControl(info01); map.removeControl(legend01); } keep_info_name = layername; } function legendRemove(event) { var layername = event.name; map.removeControl(legends[layername]); map.removeControl(infos[layername]); if(keep_info_name!=layername){ control.log("info01.hasLayer"); map.addControl(info01); map.addControl(legend01); } } map.on('overlayadd',legendAdd); map.on('overlayremove',legendRemove);

oyatsu8

2017/01/02 17:44

いつもありがとうございます、また別スレッドで質問させて頂きます！

popobot

2017/01/02 22:11 編集

> この辺りはJSの基本的な書き方なのでしょうか？文法はもちろんJSですが、overlayaddやoverlayremoveというイベントはleafletのものです。オーバーレイが追加されたり、削除されたときに指定の関数が実行されるというものです。 > あと、もう一つ質問なのですが、今の場合は、チェックボックスにチェックしたものが全て複数のレイヤが表示されているときは、上記のinfo,legendに関しては一番下にあるレイヤーだけを表示したい場合にどうしたらいいか試してみたのですが、うまくいきませんでした。。そういう機能は提供していないと思うので、ある程度leafletに詳しい人じゃないと難しいかもしれませんね

oyatsu8

2017/01/03 01:40

色々答えて頂き、大変ありがとうございます！ leafletの仕様をまだわかりきっていないので、ちゃんと読もうと思います。とても助かりました！！

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