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

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

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

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

JSON

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

JavaScript

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

解決済

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

southern_flavor
southern_flavor

総合スコア0

Leaflet

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

JSON

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

JavaScript

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

1回答

0評価

0クリップ

8閲覧

投稿2019/04/15 15:47

編集2022/01/12 10:58

やりたいこと

例えばaタグがあって、そのaタグをクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。

###現在、Leafletの仕様
外部のgeoJsonを読み込んでそこに緯度経度、popup、マーカー画像の名前等を保存しています。
デフォルトの地図表示は、wordpressのカスタムフィールドに保存した緯度経度、ズームレベルの値をもってきています。
下記ソースコードの東京、京都、大阪はgeojsonにもそれぞれ値(緯度経度、マーカー画像名、popup名前)が保存されています。

###現状のソースコード

html

<a href="#" id="hoge">東京</a> <a href="#" id="fuga">京都</a>

javascript

$('#map').each(function () { var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 20, attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }); var map = L.map('map') .addLayer(tiles); var markers = L.markerClusterGroup({ showCoverageOnHover: true, spiderfyOnMaxZoom: false, removeOutsideVisibleBounds: true, disableClusteringAtZoom: 8 }); httpObj = new XMLHttpRequest(); httpObj.open("GET", "./geojson/hoge.geojson", true); httpObj.addEventListener('load', function(res){ const data = JSON.parse(res.currentTarget.response); var geoJsonLayer = L.geoJson(data, { onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.popup); }, pointToLayer: function(feature, latlng) { var iconChange = L.icon({ iconUrl: './geojson/'+ feature.properties.iconName +'.png', iconRetinaUrl: './geojson/'+ feature.properties.iconName2x +'.png', iconSize: [25, 41] }); var iconDefalut = L.icon({ iconUrl: './geojson/marker-icon-blue.png', iconRetinaUrl: './geojson/marker-icon-blue-2x.png', iconSize: [25, 41] //popupAnchor: [0, 20], }); var m = L.marker(latlng, {icon: iconChange}); data.push(m); return m; if(feature.properties.iconName){ return L.marker(latlng, {icon: iconChange}); } else { return L.marker(latlng, {icon: iconDefalut}); } }, style: function (feature) { return { color: feature.properties['stroke'], weight: feature.properties['stroke-width'], opacity: feature.properties['stroke-opacity'] }; } }); markers.addLayer(geoJsonLayer); map.addLayer(markers); map.fitBounds(markers.getBounds()); function markerFunction(id){ for (var i in data){ var markerID = data[i].options.popup; if (markerID == id){ data[i].openPopup(); } } } $("a").click(function(){ markerFunction($(this)[0].id); }); map.addControl(new L.Control.Fullscreen({ title: { 'false': '最大化', 'true': '元に戻す' } })); }); httpObj.send(null); });

geojson

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "title": "hoge", "properties": { "name": "あああ", "popup": "<a href='' target='_blank'>hoge<br>fuga</a>", "iconName": "marker-icon", "iconName2x": "marker-icon-2x" }, "geometry": { "type": "Point", "coordinates": [ 138.922909, 37.135942 ] } }, { "type": "Feature", "title": "fuga", "properties": { "name": "いいい", "popup": "<a href='' target='_blank'>hoge<br>fuga</a>", "iconName": "marker-icon", "iconName2x": "marker-icon-2x" }, "geometry": { "type": "Point", "coordinates": [ 138.914036, 37.114555 ] } } ] }

###起きているエラー
現在は、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)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Leaflet

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

JSON

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

JavaScript

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