teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Leafletのマーカーをポップアップで表示したい

編集履歴

質問編集履歴

3

再度、誤りがある箇所を修正

2019/04/18 13:18

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,8 @@
1
1
  ### やりたいこと
2
- 例えばaタグがあって、そのaタグをクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。
2
+ いくつかのa要素があって、そのa要素をクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。
3
3
 
4
-
5
4
  ###現在、Leafletの仕様
6
5
  外部のgeoJsonを読み込んでそこに緯度経度、popup、マーカー画像の名前等を保存しています。
7
- デフォルトの地図表示は、wordpressのカスタムフィールドに保存した緯度経度、ズームレベルの値をもってきています。
8
- 下記ソースコードの東京、京都、大阪はgeojsonにもそれぞれ値（緯度経度、マーカー画像名、popup名前）が保存されています。
9
6
 
10
7
  ###現状のソースコード
11
8
  ```html

2

ソースコードに誤りがある箇所を修正

2019/04/18 13:18

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
File without changes
body CHANGED
@@ -9,8 +9,8 @@
9
9
 
10
10
  ###現状のソースコード
11
11
  ```html
12
- <a href="#" id="hoge1">東京</button>
12
+ <a href="#" id="hoge">東京</a>
13
- <a href="#" id="hoge2">京都</button>
13
+ <a href="#" id="fuga">京都</a>
14
14
  ```
15
15
 
16
16
  ```javascript
@@ -45,7 +45,7 @@
45
45
  },
46
46
  pointToLayer: function(feature, latlng) {
47
47
  var iconChange = L.icon({
48
- iconUrl: '<?php echo ./geojson/'+ feature.properties.iconName +'.png',
48
+ iconUrl: './geojson/'+ feature.properties.iconName +'.png',
49
49
  iconRetinaUrl: './geojson/'+ feature.properties.iconName2x +'.png',
50
50
  iconSize: [25, 41]
51
51
  });
@@ -89,12 +89,10 @@
89
89
  }
90
90
  }
91
91
 
92
- $("#hoge1,#hoge2").click(function(){
92
+ $("a").click(function(){
93
93
  markerFunction($(this)[0].id);
94
94
  });
95
95
 
96
- map.setView([<?php echo $lat; ?>,<?php echo $lon; ?>], <?php echo $zoom_lavel; ?>);
97
-
98
96
  map.addControl(new L.Control.Fullscreen({
99
97
  title: {
100
98
  'false': '最大化',
@@ -114,6 +112,7 @@
114
112
  "features": [
115
113
  {
116
114
  "type": "Feature",
115
+ "title": "hoge",
117
116
  "properties": {
118
117
  "name": "あああ",
119
118
  "popup": "<a href='' target='_blank'>hoge<br>fuga</a>",
@@ -130,6 +129,7 @@
130
129
  },
131
130
  {
132
131
  "type": "Feature",
132
+ "title": "fuga",
133
133
  "properties": {
134
134
  "name": "いいい",
135
135
  "popup": "<a href='' target='_blank'>hoge<br>fuga</a>",
@@ -144,7 +144,8 @@
144
144
  ]
145
145
  }
146
146
  }
147
- ・・・・
147
+ ]
148
+ }
148
149
  ```
149
150
 
150
151
  ###起きているエラー

1

ソースコードや質問文を変えました。

2019/04/18 13:16

投稿

southern_flavor
southern_flavor

スコア70

title CHANGED
@@ -1,1 +1,1 @@
1
- 要素をクリックした時でもLeaflet地図内のマーカーをポップアップの選択状態にしたい
1
+ Leafletのマーカーをポップアップで表示したい
body CHANGED
@@ -1,35 +1,22 @@
1
1
  ### やりたいこと
2
+ 例えばaタグがあって、そのaタグをクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。
2
3
 
3
- イメージとしてはこんな感じです。
4
- https://river.longseller.org/
5
- 上記のサイトでは地図内にある河川のラインをクリックすると下に
6
- 「川の名前」とポップアップで「水系、区分」
7
- が出てきて選択状態になります。
8
- 下に出てきた河川名をクリックしてもポップアップで選択状態になります。
9
4
 
10
- 私が具体的にやりたいことは、
11
- 例えば河川の名前は最初から表示され、クリックすると該当の河川へポップアップで選択状態にし、地図内の該当箇所をクリックしてもポップアップの選択状態にしたいです。
12
- 上記のサイトとは仕様が違いますが、<a>タグもしくは<button>タグにonclick属性を付与して、そこに緯度経度の値を入れて、地図内をクリックしても要素をクリックしても選択状態（openPopup()）になるようにしたいです。
13
- 他に効率のよいやり方があればご教授いただきたいです。
14
-
15
5
  ###現在、Leafletの仕様
16
- 'https://unpkg.com/leaflet@1.4.0/dist/leaflet.js',
17
- 'https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js',
18
- 'https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js',
19
- を使い、クラスターと地図のフルスクリーン機能を入れています。
20
6
  外部のgeoJsonを読み込んでそこに緯度経度、popup、マーカー画像の名前等を保存しています。
21
7
  デフォルトの地図表示は、wordpressのカスタムフィールドに保存した緯度経度、ズームレベルの値をもってきています。
22
8
  下記ソースコードの東京、京都、大阪はgeojsonにもそれぞれ値（緯度経度、マーカー画像名、popup名前）が保存されています。
23
9
 
24
10
  ###現状のソースコード
25
11
  ```html
26
- <button class="hoge1" onclick="L.marker([35.6679191,139.4606805]).openPopup();">東京</button>
12
+ <a href="#" id="hoge1">東京</button>
27
- <button class="hoge2" onclick="L.marker([35.0978739,135.4386888]).openPopup();">京都</button>
13
+ <a href="#" id="hoge2">京都</button>
28
- <button class="hoge3" onclick="L.marker([34.6775781,135.4156461]).openPopup();">大阪</button>
29
14
  ```
30
15
 
31
16
  ```javascript
17
+
32
- <?php $lat = get_field('lat'); $lon = get_field('lon'); $zoom_lavel = get_field('zoom_lavel'); ?>
18
+ $('#map').each(function () {
19
+
33
20
  var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
34
21
  maxZoom: 20,
35
22
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -44,8 +31,11 @@
44
31
  removeOutsideVisibleBounds: true,
45
32
  disableClusteringAtZoom: 8
46
33
  });
34
+
35
+
36
+
47
37
  httpObj = new XMLHttpRequest();
48
- httpObj.open("GET", "./geojson/location.geojson", true);
38
+ httpObj.open("GET", "./geojson/hoge.geojson", true);
49
39
  httpObj.addEventListener('load', function(res){
50
40
  const data = JSON.parse(res.currentTarget.response);
51
41
 
@@ -55,21 +45,28 @@
55
45
  },
56
46
  pointToLayer: function(feature, latlng) {
57
47
  var iconChange = L.icon({
58
- iconUrl: './geojson/'+ feature.properties.iconName +'.png',
48
+ iconUrl: '<?php echo ./geojson/'+ feature.properties.iconName +'.png',
59
49
  iconRetinaUrl: './geojson/'+ feature.properties.iconName2x +'.png',
60
50
  iconSize: [25, 41]
61
51
  });
62
52
  var iconDefalut = L.icon({
63
- iconUrl: '<?php echo get_stylesheet_directory_uri(); ?>/geojson/red.png',
53
+ iconUrl: './geojson/marker-icon-blue.png',
64
- iconRetinaUrl: '<?php echo get_stylesheet_directory_uri(); ?>/geojson/red-2x.png',
54
+ iconRetinaUrl: './geojson/marker-icon-blue-2x.png',
65
55
  iconSize: [25, 41]
56
+ //popupAnchor: [0, 20],
66
57
  });
58
+
59
+
60
+ var m = L.marker(latlng, {icon: iconChange});
61
+ data.push(m);
62
+ return m;
63
+
64
+
67
65
  if(feature.properties.iconName){
68
66
  return L.marker(latlng, {icon: iconChange});
69
67
  } else {
70
68
  return L.marker(latlng, {icon: iconDefalut});
71
69
  }
72
- return L.polyline(latlng);
73
70
  },
74
71
  style: function (feature) {
75
72
  return {
@@ -82,6 +79,20 @@
82
79
  markers.addLayer(geoJsonLayer);
83
80
  map.addLayer(markers);
84
81
  map.fitBounds(markers.getBounds());
82
+
83
+ function markerFunction(id){
84
+ for (var i in data){
85
+ var markerID = data[i].options.popup;
86
+ if (markerID == id){
87
+ data[i].openPopup();
88
+ }
89
+ }
90
+ }
91
+
92
+ $("#hoge1,#hoge2").click(function(){
93
+ markerFunction($(this)[0].id);
94
+ });
95
+
85
96
  map.setView([<?php echo $lat; ?>,<?php echo $lon; ?>], <?php echo $zoom_lavel; ?>);
86
97
 
87
98
  map.addControl(new L.Control.Fullscreen({
@@ -90,9 +101,57 @@
90
101
  'true': '元に戻す'
91
102
  }
92
103
  }));
104
+
93
105
  });
106
+
94
107
  httpObj.send(null);
108
+ });
95
109
  ```
96
110
 
111
+ ```geojson
112
+ {
113
+ "type": "FeatureCollection",
114
+ "features": [
115
+ {
116
+ "type": "Feature",
117
+ "properties": {
118
+ "name": "あああ",
119
+ "popup": "<a href='' target='_blank'>hoge<br>fuga</a>",
120
+ "iconName": "marker-icon",
121
+ "iconName2x": "marker-icon-2x"
122
+ },
123
+ "geometry": {
124
+ "type": "Point",
125
+ "coordinates": [
126
+ 138.922909,
127
+ 37.135942
128
+ ]
129
+ }
130
+ },
131
+ {
132
+ "type": "Feature",
133
+ "properties": {
134
+ "name": "いいい",
135
+ "popup": "<a href='' target='_blank'>hoge<br>fuga</a>",
136
+ "iconName": "marker-icon",
137
+ "iconName2x": "marker-icon-2x"
138
+ },
139
+ "geometry": {
140
+ "type": "Point",
141
+ "coordinates": [
142
+ 138.914036,
143
+ 37.114555
144
+ ]
145
+ }
146
+ }
147
+ ・・・・
148
+ ```
149
+
97
150
  ###起きているエラー
98
- 現状のbutton要素をクリックしても特にエラーが起きているわけでもなく、何も反応しない状態です。
151
+ 現在は、aタグをクリックしても反応しない状態です。
152
+ コンソールエラーは、こんな感じででました。
153
+ Uncaught TypeError: Cannot read property 'popup' of undefined
154
+ at markerFunction ((index):974)
155
+ at HTMLAnchorElement.<anonymous> ((index):982)
156
+ at HTMLAnchorElement.dispatch (jquery-2.2.4.min.js:3)
157
+ at HTMLAnchorElement.r.handle (jquery-2.2.4.min.js:3)