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

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

ただいまの
回答率

90.52%

  • JavaScript

    19821questions

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

  • JSON

    1417questions

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

  • Leaflet

    6questions

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

受付中

回答 0

投稿 編集

flag 質問者が3日前に「まだ回答を求めています」と言っています。

  • 評価
  • クリップ 0
  • VIEW 272

やりたいこと

いくつかのa要素があって、そのa要素をクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。

現在、Leafletの仕様

外部のgeoJsonを読み込んでそこに緯度経度、popup、マーカー画像の名前等を保存しています。

現状のソースコード

<a href="#" id="hoge">東京</a>
<a href="#" id="fuga">京都</a>
$('#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);
        });
{
  "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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • JavaScript

    19821questions

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

  • JSON

    1417questions

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

  • Leaflet

    6questions