やりたいこと
いくつかのa要素があって、そのa要素をクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。
###現在、Leafletの仕様
外部のgeoJsonを読み込んでそこに緯度経度、popup、マーカー画像の名前等を保存しています。
###現状のソースコード
html
1<a href="#" id="hoge">東京</a> 2<a href="#" id="fuga">京都</a>
javascript
1 2$('#map').each(function () { 3 4 var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { 5 maxZoom: 20, 6 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 7 }); 8 9 var map = L.map('map') 10 .addLayer(tiles); 11 12 var markers = L.markerClusterGroup({ 13 showCoverageOnHover: true, 14 spiderfyOnMaxZoom: false, 15 removeOutsideVisibleBounds: true, 16 disableClusteringAtZoom: 8 17 }); 18 19 20 21httpObj = new XMLHttpRequest(); 22httpObj.open("GET", "./geojson/hoge.geojson", true); 23httpObj.addEventListener('load', function(res){ 24 const data = JSON.parse(res.currentTarget.response); 25 26 var geoJsonLayer = L.geoJson(data, { 27 onEachFeature: function (feature, layer) { 28 layer.bindPopup(feature.properties.popup); 29 }, 30 pointToLayer: function(feature, latlng) { 31 var iconChange = L.icon({ 32 iconUrl: './geojson/'+ feature.properties.iconName +'.png', 33 iconRetinaUrl: './geojson/'+ feature.properties.iconName2x +'.png', 34 iconSize: [25, 41] 35 }); 36 var iconDefalut = L.icon({ 37 iconUrl: './geojson/marker-icon-blue.png', 38 iconRetinaUrl: './geojson/marker-icon-blue-2x.png', 39 iconSize: [25, 41] 40 //popupAnchor: [0, 20], 41 }); 42 43 44 var m = L.marker(latlng, {icon: iconChange}); 45 data.push(m); 46 return m; 47 48 49 if(feature.properties.iconName){ 50 return L.marker(latlng, {icon: iconChange}); 51 } else { 52 return L.marker(latlng, {icon: iconDefalut}); 53 } 54 }, 55 style: function (feature) { 56 return { 57 color: feature.properties['stroke'], 58 weight: feature.properties['stroke-width'], 59 opacity: feature.properties['stroke-opacity'] 60 }; 61 } 62 }); 63 markers.addLayer(geoJsonLayer); 64 map.addLayer(markers); 65 map.fitBounds(markers.getBounds()); 66 67 function markerFunction(id){ 68 for (var i in data){ 69 var markerID = data[i].options.popup; 70 if (markerID == id){ 71 data[i].openPopup(); 72 } 73 } 74 } 75 76 $("a").click(function(){ 77 markerFunction($(this)[0].id); 78 }); 79 80 map.addControl(new L.Control.Fullscreen({ 81 title: { 82 'false': '最大化', 83 'true': '元に戻す' 84 } 85 })); 86 87 }); 88 89 httpObj.send(null); 90 });
geojson
1{ 2 "type": "FeatureCollection", 3 "features": [ 4 { 5 "type": "Feature", 6 "title": "hoge", 7 "properties": { 8 "name": "あああ", 9 "popup": "<a href='' target='_blank'>hoge<br>fuga</a>", 10 "iconName": "marker-icon", 11 "iconName2x": "marker-icon-2x" 12 }, 13 "geometry": { 14 "type": "Point", 15 "coordinates": [ 16 138.922909, 17 37.135942 18 ] 19 } 20 }, 21 { 22 "type": "Feature", 23 "title": "fuga", 24 "properties": { 25 "name": "いいい", 26 "popup": "<a href='' target='_blank'>hoge<br>fuga</a>", 27 "iconName": "marker-icon", 28 "iconName2x": "marker-icon-2x" 29 }, 30 "geometry": { 31 "type": "Point", 32 "coordinates": [ 33 138.914036, 34 37.114555 35 ] 36 } 37 } 38 ] 39}
###起きているエラー
現在は、aタグをクリックしても反応しない状態です。
コンソールエラーは、こんな感じででました。
Uncaught TypeError: Cannot read property 'popup' of undefined
at markerFunction ((index):974)
at HTMLAnchorElement.<anonymous> ((index):982)
at HTMLAnchorElement.dispatch (jquery-2.2.4.min.js:3)
at HTMLAnchorElement.r.handle (jquery-2.2.4.min.js:3)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。