質問編集履歴
3
解決入力
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -451,3 +451,183 @@
|
|
|
451
451
|
コード
|
|
452
452
|
|
|
453
453
|
```
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
|
|
459
|
+
keiさんに教えて頂くことで実現出来ました
|
|
460
|
+
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
```javascript
|
|
464
|
+
|
|
465
|
+
<!DOCTYPE html>
|
|
466
|
+
|
|
467
|
+
<html>
|
|
468
|
+
|
|
469
|
+
<head>
|
|
470
|
+
|
|
471
|
+
<title>GeoJSON tutorial - Leaflet</title>
|
|
472
|
+
|
|
473
|
+
<meta charset="utf-8" />
|
|
474
|
+
|
|
475
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
476
|
+
|
|
477
|
+
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
|
|
478
|
+
|
|
479
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
|
|
480
|
+
|
|
481
|
+
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
|
|
482
|
+
|
|
483
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
|
|
484
|
+
|
|
485
|
+
<style>
|
|
486
|
+
|
|
487
|
+
#map {
|
|
488
|
+
|
|
489
|
+
width: 600px;
|
|
490
|
+
|
|
491
|
+
height: 400px;
|
|
492
|
+
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
</style>
|
|
496
|
+
|
|
497
|
+
</head>
|
|
498
|
+
|
|
499
|
+
<body>
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
|
|
503
|
+
<div id='map'></div>
|
|
504
|
+
|
|
505
|
+
<div id='test_txt'></div>
|
|
506
|
+
|
|
507
|
+
<script src="sample-geojson.js" type="text/javascript"></script>
|
|
508
|
+
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
<script>
|
|
512
|
+
|
|
513
|
+
var map = L.map('map').setView([39.74739, -105], 13);
|
|
514
|
+
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
|
|
518
|
+
|
|
519
|
+
maxZoom: 18,
|
|
520
|
+
|
|
521
|
+
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
|
|
522
|
+
|
|
523
|
+
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
|
524
|
+
|
|
525
|
+
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
|
|
526
|
+
|
|
527
|
+
id: 'mapbox.light'
|
|
528
|
+
|
|
529
|
+
}).addTo(map);
|
|
530
|
+
|
|
531
|
+
|
|
532
|
+
|
|
533
|
+
var baseballIcon = L.icon({
|
|
534
|
+
|
|
535
|
+
iconUrl: 'baseball-marker.png',
|
|
536
|
+
|
|
537
|
+
iconSize: [32, 37],
|
|
538
|
+
|
|
539
|
+
iconAnchor: [16, 37],
|
|
540
|
+
|
|
541
|
+
popupAnchor: [0, -28]
|
|
542
|
+
|
|
543
|
+
});
|
|
544
|
+
|
|
545
|
+
|
|
546
|
+
|
|
547
|
+
function onEachFeature(feature, layer) {
|
|
548
|
+
|
|
549
|
+
var popupContent = "<p>test " +
|
|
550
|
+
|
|
551
|
+
feature.geometry.type + ", test--test</p>";
|
|
552
|
+
|
|
553
|
+
|
|
554
|
+
|
|
555
|
+
if (feature.properties && feature.properties.popupContent) {
|
|
556
|
+
|
|
557
|
+
popupContent += feature.properties.popupContent;
|
|
558
|
+
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
layer.bindPopup(popupContent);
|
|
562
|
+
|
|
563
|
+
|
|
564
|
+
|
|
565
|
+
|
|
566
|
+
|
|
567
|
+
var aaa = 'aaa';
|
|
568
|
+
|
|
569
|
+
layer.bindPopup( feature.properties.popupContent );
|
|
570
|
+
|
|
571
|
+
$('#test_txt').append('<div id=\"' + feature.id + '\">' + aaa + '</div>' );
|
|
572
|
+
|
|
573
|
+
$( '#' + feature.id ).click( function() {
|
|
574
|
+
|
|
575
|
+
layer.openPopup();
|
|
576
|
+
|
|
577
|
+
} );
|
|
578
|
+
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
|
|
582
|
+
|
|
583
|
+
L.geoJSON([bicycleRental], {
|
|
584
|
+
|
|
585
|
+
|
|
586
|
+
|
|
587
|
+
style: function (feature) {
|
|
588
|
+
|
|
589
|
+
return feature.properties && feature.properties.style;
|
|
590
|
+
|
|
591
|
+
},
|
|
592
|
+
|
|
593
|
+
|
|
594
|
+
|
|
595
|
+
onEachFeature: onEachFeature,
|
|
596
|
+
|
|
597
|
+
|
|
598
|
+
|
|
599
|
+
pointToLayer: function (feature, latlng) {
|
|
600
|
+
|
|
601
|
+
return L.circleMarker(latlng, {
|
|
602
|
+
|
|
603
|
+
radius: 8,
|
|
604
|
+
|
|
605
|
+
fillColor: "#ff7800",
|
|
606
|
+
|
|
607
|
+
color: "#000",
|
|
608
|
+
|
|
609
|
+
weight: 1,
|
|
610
|
+
|
|
611
|
+
opacity: 1,
|
|
612
|
+
|
|
613
|
+
fillOpacity: 0.8
|
|
614
|
+
|
|
615
|
+
});
|
|
616
|
+
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
}).addTo(map);
|
|
620
|
+
|
|
621
|
+
|
|
622
|
+
|
|
623
|
+
</script>
|
|
624
|
+
|
|
625
|
+
|
|
626
|
+
|
|
627
|
+
</body>
|
|
628
|
+
|
|
629
|
+
</html>
|
|
630
|
+
|
|
631
|
+
|
|
632
|
+
|
|
633
|
+
```
|
2
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
配列の名前の一覧を地図外に作り、吹き出しリンクを付けたいと考えたのですが、
|
|
4
4
|
|
|
5
|
+
前の質問のようなものを、geojsonのデータ読み込みで
|
|
6
|
+
|
|
7
|
+
外部テキストリンクを生成したいと考えています。
|
|
8
|
+
|
|
5
9
|
|
|
6
10
|
|
|
7
11
|
例えば、地図の横に
|
1
間違いを修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
``javascript
|
|
51
|
+
```javascript
|
|
52
52
|
|
|
53
53
|
<!DOCTYPE html>
|
|
54
54
|
|