質問編集履歴
2
更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -45,13 +45,13 @@
|
|
|
45
45
|
: 'Hover over a state');
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
+
アドバイス頂けたら助かります。
|
|
48
49
|
|
|
49
50
|
|
|
50
|
-
|
|
51
|
+
その後、下記のようにしてみましたが、contrilパネルのinfo,legendが表示出来ていません。
|
|
51
52
|
|
|
52
53
|
|
|
53
|
-
|
|
54
|
-
```
|
|
54
|
+
```javascript
|
|
55
55
|
<!DOCTYPE html>
|
|
56
56
|
<html>
|
|
57
57
|
<head>
|
|
@@ -145,16 +145,32 @@
|
|
|
145
145
|
|
|
146
146
|
//info start
|
|
147
147
|
var info = L.control();
|
|
148
|
+
// info.onAdd = function (map) {
|
|
149
|
+
// this._div = L.DomUtil.create('div', 'info');
|
|
150
|
+
// this.update();
|
|
151
|
+
// return this._div;
|
|
152
|
+
// };
|
|
153
|
+
// info.update = function (props) {
|
|
154
|
+
// this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
|
|
155
|
+
// '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
|
|
156
|
+
// : 'Hover over a state');
|
|
157
|
+
// };
|
|
158
|
+
|
|
159
|
+
var title="test-title";
|
|
160
|
+
var property = "test-property";
|
|
161
|
+
|
|
148
162
|
info.onAdd = function (map) {
|
|
149
|
-
|
|
163
|
+
this._div = L.DomUtil.create('div', 'info');
|
|
150
|
-
|
|
164
|
+
this.update();
|
|
151
|
-
|
|
165
|
+
return this._div;
|
|
152
|
-
|
|
166
|
+
};
|
|
153
|
-
|
|
167
|
+
info.update = function (props) {
|
|
154
|
-
|
|
168
|
+
this._div.innerHTML = '<h4>'+ title +'</h4>' + (props ?
|
|
155
|
-
|
|
169
|
+
'<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
|
|
156
|
-
|
|
170
|
+
: 'Hover over a state');
|
|
157
|
-
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
|
|
158
174
|
// info.addTo(map);
|
|
159
175
|
//info end
|
|
160
176
|
|
|
@@ -226,23 +242,46 @@
|
|
|
226
242
|
style: style,
|
|
227
243
|
onEachFeature: onEachFeature
|
|
228
244
|
}).addTo(choropleth01);
|
|
229
|
-
info.addTo(choropleth01);
|
|
230
|
-
legend.addTo(choropleth01);
|
|
231
245
|
|
|
232
|
-
|
|
233
|
-
|
|
234
246
|
geojson = L.geoJson(statesData, {
|
|
235
247
|
style: style,
|
|
236
248
|
onEachFeature: onEachFeature
|
|
237
249
|
}).addTo(choropleth02);
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
var overlay_name = "name_test";
|
|
253
|
+
var overlay_type = "type_test";
|
|
254
|
+
|
|
255
|
+
map.on('overlayadd overlayremove baseLayerchange', function(a) {
|
|
256
|
+
overlay_name = a.name;
|
|
257
|
+
overlay_type = a.type;
|
|
258
|
+
|
|
259
|
+
console.log("overlay_type :");
|
|
260
|
+
console.log(overlay_type);
|
|
261
|
+
});
|
|
262
|
+
|
|
263
|
+
if(overlay_name==choropleth01 || overlay_type == overlayadd){
|
|
264
|
+
title="title01";
|
|
265
|
+
property = feature.properties.density;
|
|
266
|
+
|
|
267
|
+
info.addTo(choropleth01);
|
|
268
|
+
legend.addTo(choropleth01);
|
|
269
|
+
|
|
270
|
+
}else if(overlay_name==choropleth02 || overlay_type == overlayadd){
|
|
271
|
+
title="title02";
|
|
272
|
+
property = feature.properties.density02;
|
|
273
|
+
|
|
238
274
|
info.addTo(choropleth02);
|
|
239
275
|
legend.addTo(choropleth02);
|
|
276
|
+
}
|
|
240
277
|
|
|
278
|
+
console.log("title: ");
|
|
279
|
+
console.log(title);
|
|
241
280
|
|
|
281
|
+
console.log("property: ");
|
|
282
|
+
console.log(property);
|
|
242
283
|
|
|
243
284
|
|
|
244
|
-
|
|
245
|
-
|
|
246
285
|
map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>');
|
|
247
286
|
|
|
248
287
|
</script>
|
|
@@ -251,4 +290,5 @@
|
|
|
251
290
|
|
|
252
291
|
</body>
|
|
253
292
|
</html>
|
|
293
|
+
|
|
254
294
|
```
|
1
質問に追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,6 +9,44 @@
|
|
|
9
9
|
としても、なぜか出来ません。
|
|
10
10
|
チェックボックスの場合分けをしてしたらなんとか出来るのですが、コードが多くなりすぎるので
|
|
11
11
|
どうにかしたいとしています、引数等の使い分けがまだ理解し切れていないのもあるのですが、、
|
|
12
|
+
|
|
13
|
+
特に知りたい事は例えば下記の用な場合に、
|
|
14
|
+
```javascript
|
|
15
|
+
info.onAdd = function (map) {
|
|
16
|
+
this._div = L.DomUtil.create('div', 'info');
|
|
17
|
+
this.update();
|
|
18
|
+
return this._div;
|
|
19
|
+
};
|
|
20
|
+
info.update = function (props) {
|
|
21
|
+
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
|
|
22
|
+
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
|
|
23
|
+
: 'Hover over a state');
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
'<h4>US Population Density</h4>'（タイトル）と、
|
|
28
|
+
props.density（プロパティ）を
|
|
29
|
+
場合によってかき分けたいときの書き方です。
|
|
30
|
+
|
|
31
|
+
function (map,title,name,property)
|
|
32
|
+
などとして
|
|
33
|
+
|
|
34
|
+
var title="test-title";
|
|
35
|
+
var property = "test-property";
|
|
36
|
+
|
|
37
|
+
info.onAdd = function (map) {
|
|
38
|
+
this._div = L.DomUtil.create('div', 'info');
|
|
39
|
+
this.update();
|
|
40
|
+
return this._div;
|
|
41
|
+
};
|
|
42
|
+
info.update = function (props) {
|
|
43
|
+
this._div.innerHTML = '<h4>'+ title +'</h4>' + (props ?
|
|
44
|
+
'<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
|
|
45
|
+
: 'Hover over a state');
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
12
50
|
アドバイス頂けたら助かります。
|
|
13
51
|
|
|
14
52
|
|