質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

819閲覧

Leafletのマーカーをポップアップで表示したい

southern_flavor

総合スコア70

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/15 15:47

編集2019/04/18 13:18

やりたいこと

いくつかの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: '&copy; <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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
そもそも仕様が間違っており、公式でよく確認したら問題なく動きました。

投稿2019/04/22 10:57

southern_flavor

総合スコア70

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問