質問編集履歴

2

更新

2017/01/02 05:45

投稿

oyatsu8
oyatsu8

スコア97

test CHANGED
File without changes
test CHANGED
@@ -92,19 +92,19 @@
92
92
 
93
93
 
94
94
 
95
-
96
-
97
-
98
-
99
95
  アドバイス頂けたら助かります。
100
96
 
101
97
 
102
98
 
103
99
 
104
100
 
105
-
101
+ その後、下記のようにしてみましたが、contrilパネルのinfo,legendが表示出来ていません。
106
-
102
+
103
+
104
+
105
+
106
+
107
- ```jaavscript,leaflet
107
+ ```javascript
108
108
 
109
109
  <!DOCTYPE html>
110
110
 
@@ -292,160 +292,192 @@
292
292
 
293
293
  var info = L.control();
294
294
 
295
+ // info.onAdd = function (map) {
296
+
297
+ // this._div = L.DomUtil.create('div', 'info');
298
+
299
+ // this.update();
300
+
301
+ // return this._div;
302
+
303
+ // };
304
+
305
+ // info.update = function (props) {
306
+
307
+ // this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
308
+
309
+ // '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
310
+
311
+ // : 'Hover over a state');
312
+
313
+ // };
314
+
315
+
316
+
317
+ var title="test-title";
318
+
319
+ var property = "test-property";
320
+
321
+
322
+
295
323
  info.onAdd = function (map) {
296
324
 
297
- this._div = L.DomUtil.create('div', 'info');
325
+ this._div = L.DomUtil.create('div', 'info');
298
-
326
+
299
- this.update();
327
+ this.update();
300
-
328
+
301
- return this._div;
329
+ return this._div;
330
+
331
+ };
332
+
333
+ info.update = function (props) {
334
+
335
+ this._div.innerHTML = '<h4>'+ title +'</h4>' + (props ?
336
+
337
+ '<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
338
+
339
+ : 'Hover over a state');
340
+
341
+ };
342
+
343
+
344
+
345
+
346
+
347
+ // info.addTo(map);
348
+
349
+ //info end
350
+
351
+
352
+
353
+ //legend start
354
+
355
+ var legend = L.control({position: 'bottomright'});
356
+
357
+
358
+
359
+ legend.onAdd = function (map) {
360
+
361
+
362
+
363
+ var div = L.DomUtil.create('div', 'info legend'),
364
+
365
+ grades = [0, 10, 20, 50, 100, 200, 500, 1000],
366
+
367
+ labels = [],
368
+
369
+ from, to;
370
+
371
+
372
+
373
+ for (var i = 0; i < grades.length; i++) {
374
+
375
+ from = grades[i];
376
+
377
+ to = grades[i + 1];
378
+
379
+
380
+
381
+ labels.push(
382
+
383
+ '<i style="background:' + getColor(from + 1) + '"></i> ' +
384
+
385
+ from + (to ? '&ndash;' + to : '+'));
386
+
387
+ }
388
+
389
+
390
+
391
+ div.innerHTML = labels.join('<br>');
392
+
393
+ return div;
302
394
 
303
395
  };
304
396
 
305
- info.update = function (props) {
397
+
306
-
307
- this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
398
+
308
-
309
- '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
310
-
311
- : 'Hover over a state');
312
-
313
- };
314
-
315
- // info.addTo(map);
399
+ //legend.addTo(map);
316
-
317
- //info end
400
+
318
-
319
-
320
-
321
- //legend start
401
+ //legend end
322
-
323
- var legend = L.control({position: 'bottomright'});
402
+
324
-
325
-
326
-
403
+
404
+
405
+
406
+
407
+
408
+
327
- legend.onAdd = function (map) {
409
+ function highlightFeature(e) {
328
-
329
-
330
-
331
- var div = L.DomUtil.create('div', 'info legend'),
410
+
332
-
333
- grades = [0, 10, 20, 50, 100, 200, 500, 1000],
334
-
335
- labels = [],
336
-
337
- from, to;
338
-
339
-
340
-
341
- for (var i = 0; i < grades.length; i++) {
342
-
343
- from = grades[i];
411
+ var layer = e.target;
344
-
345
- to = grades[i + 1];
412
+
346
-
347
-
348
-
413
+
414
+
349
- labels.push(
415
+ layer.setStyle({
416
+
350
-
417
+ weight: 5,
418
+
351
- '<i style="background:' + getColor(from + 1) + '"></i> ' +
419
+ color: '#666',
420
+
352
-
421
+ dashArray: '',
422
+
423
+ fillOpacity: 0.4
424
+
425
+ });
426
+
427
+
428
+
353
- from + (to ? '&ndash;' + to : '+'));
429
+ if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
430
+
431
+ layer.bringToFront();
354
432
 
355
433
  }
356
434
 
357
435
 
358
436
 
359
- div.innerHTML = labels.join('<br>');
437
+ info.update(layer.feature.properties);
360
-
361
- return div;
438
+
362
-
363
- };
439
+ }
440
+
441
+
442
+
364
-
443
+ var geojson;
444
+
445
+
446
+
365
-
447
+ function resetHighlight(e) {
366
-
448
+
367
- //legend.addTo(map);
449
+ geojson.resetStyle(e.target);
368
-
450
+
369
- //legend end
451
+ info.update();
452
+
370
-
453
+ }
371
-
372
-
373
-
374
-
375
-
376
-
454
+
455
+
456
+
377
- function highlightFeature(e) {
457
+ function zoomToFeature(e) {
378
-
458
+
379
- var layer = e.target;
459
+ map.fitBounds(e.target.getBounds());
460
+
380
-
461
+ }
462
+
463
+
464
+
381
-
465
+ function onEachFeature(feature, layer) {
382
-
466
+
383
- layer.setStyle({
467
+ layer.on({
384
-
385
- weight: 5,
468
+
386
-
387
- color: '#666',
469
+ mouseover: highlightFeature,
388
-
470
+
389
- dashArray: '',
471
+ mouseout: resetHighlight,
390
-
472
+
391
- fillOpacity: 0.4
473
+ click: zoomToFeature
392
474
 
393
475
  });
394
476
 
395
-
396
-
397
- if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
398
-
399
- layer.bringToFront();
400
-
401
- }
402
-
403
-
404
-
405
- info.update(layer.feature.properties);
406
-
407
477
  }
408
478
 
409
479
 
410
480
 
411
- var geojson;
412
-
413
-
414
-
415
- function resetHighlight(e) {
416
-
417
- geojson.resetStyle(e.target);
418
-
419
- info.update();
420
-
421
- }
422
-
423
-
424
-
425
- function zoomToFeature(e) {
426
-
427
- map.fitBounds(e.target.getBounds());
428
-
429
- }
430
-
431
-
432
-
433
- function onEachFeature(feature, layer) {
434
-
435
- layer.on({
436
-
437
- mouseover: highlightFeature,
438
-
439
- mouseout: resetHighlight,
440
-
441
- click: zoomToFeature
442
-
443
- });
444
-
445
- }
446
-
447
-
448
-
449
481
  geojson = L.geoJson(statesData, {
450
482
 
451
483
  style: style,
@@ -454,35 +486,81 @@
454
486
 
455
487
  }).addTo(choropleth01);
456
488
 
489
+
490
+
491
+ geojson = L.geoJson(statesData, {
492
+
493
+ style: style,
494
+
495
+ onEachFeature: onEachFeature
496
+
497
+ }).addTo(choropleth02);
498
+
499
+
500
+
501
+
502
+
503
+ var overlay_name = "name_test";
504
+
505
+ var overlay_type = "type_test";
506
+
507
+
508
+
509
+ map.on('overlayadd overlayremove baseLayerchange', function(a) {
510
+
511
+ overlay_name = a.name;
512
+
513
+ overlay_type = a.type;
514
+
515
+
516
+
517
+ console.log("overlay_type :");
518
+
519
+ console.log(overlay_type);
520
+
521
+ });
522
+
523
+
524
+
525
+ if(overlay_name==choropleth01 || overlay_type == overlayadd){
526
+
527
+ title="title01";
528
+
529
+ property = feature.properties.density;
530
+
531
+
532
+
457
533
  info.addTo(choropleth01);
458
534
 
459
535
  legend.addTo(choropleth01);
460
536
 
461
537
 
462
538
 
463
-
539
+ }else if(overlay_name==choropleth02 || overlay_type == overlayadd){
540
+
464
-
541
+ title="title02";
465
-
466
-
542
+
467
- geojson = L.geoJson(statesData, {
543
+ property = feature.properties.density02;
468
-
469
- style: style,
544
+
470
-
471
- onEachFeature: onEachFeature
545
+
472
-
473
- }).addTo(choropleth02);
474
546
 
475
547
  info.addTo(choropleth02);
476
548
 
477
549
  legend.addTo(choropleth02);
478
550
 
479
-
551
+ }
552
+
553
+
554
+
480
-
555
+ console.log("title: ");
556
+
481
-
557
+ console.log(title);
558
+
559
+
560
+
482
-
561
+ console.log("property: ");
562
+
483
-
563
+ console.log(property);
484
-
485
-
486
564
 
487
565
 
488
566
 
@@ -504,4 +582,6 @@
504
582
 
505
583
  </html>
506
584
 
585
+
586
+
507
587
  ```

1

質問に追記しました

2017/01/02 05:45

投稿

oyatsu8
oyatsu8

スコア97

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,82 @@
20
20
 
21
21
  どうにかしたいとしています、引数等の使い分けがまだ理解し切れていないのもあるのですが、、
22
22
 
23
+
24
+
25
+ 特に知りたい事は例えば下記の用な場合に、
26
+
27
+ ```javascript
28
+
29
+ info.onAdd = function (map) {
30
+
31
+ this._div = L.DomUtil.create('div', 'info');
32
+
33
+ this.update();
34
+
35
+ return this._div;
36
+
37
+ };
38
+
39
+ info.update = function (props) {
40
+
41
+ this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
42
+
43
+ '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
44
+
45
+ : 'Hover over a state');
46
+
47
+ };
48
+
49
+
50
+
51
+ ```
52
+
53
+ '<h4>US Population Density</h4>'(タイトル)と、
54
+
55
+ props.density(プロパティ)を
56
+
57
+ 場合によってかき分けたいときの書き方です。
58
+
59
+
60
+
61
+ function (map,title,name,property)
62
+
63
+ などとして
64
+
65
+
66
+
67
+ var title="test-title";
68
+
69
+ var property = "test-property";
70
+
71
+
72
+
73
+ info.onAdd = function (map) {
74
+
75
+ this._div = L.DomUtil.create('div', 'info');
76
+
77
+ this.update();
78
+
79
+ return this._div;
80
+
81
+ };
82
+
83
+ info.update = function (props) {
84
+
85
+ this._div.innerHTML = '<h4>'+ title +'</h4>' + (props ?
86
+
87
+ '<b>' + props.name + '</b><br />' + property + ' people / mi<sup>2</sup>'
88
+
89
+ : 'Hover over a state');
90
+
91
+ };
92
+
93
+
94
+
95
+
96
+
97
+
98
+
23
99
  アドバイス頂けたら助かります。
24
100
 
25
101