Leaflet クリックしたマーカーの情報を表示したい

Question

前提・実現したいこと

Leafetを用いて、円を描画し、円をクリックした時に、各円の情報をアラートとして表示させたいです。

geojson形式の中に緯度経度や今回表示させたい情報(id)が格納されています。
pythonにてgeojsonデータを作成し、ajax通信を用い、javascript内にて扱っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

クリックイベントの中にどのようにコードを書けばよいかわからない状況です。

       function clickEvt(e){
         alert('この部分が該当します');
       }

該当のソースコード

if (typeof C === 'undefined'){
    var C = {};
}
/**
 * 全ノードを取得する．
 */
C.getAllNodeList = function() {
    $.ajax({
        url: 'get_all_node_list/',
        method: 'GET',
        data: {
        },
        timeout: 10000,
        dataType: "json",
    }).done(function(response) {
        var nodeListGeojson = response;
        V.showNodesLayer(nodeListGeojson);
    }).fail(function(response) {
        alert('Error!');
    });
}

if (typeof V === 'undefined'){
    var V = {};
}
 $('#index_page').ready(function() {
     C.getAllNodeList();
 });
 if (typeof V === 'undefined'){
     var V = {};
 }
  var map = L.map('map').setView([35.016689, 135.674900], 16); 

  var tileLayer = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
         attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
         maxZoom: 19
       });
  tileLayer.addTo(map);
 V.showNodesLayer = function(geojson) {//←'geojson'がpythonから受け取ったデータです。
       var hidingMarker = function(feature, latlng) {
         if(feature.properties.hide == 'true'){
           return new L.CircleMarker(latlng, {
             radius: 30,
             color: "#00ff00",
             fillColor: '#00ff00',
             fillOpacity: 0.2,
           })
         }
       };
       L.geoJson(geojson, {pointToLayer: hidingMarker},).addTo(map).on( 'click', function(e) {  clickEvt(e); });
       function onEachFeature(feature, layer) {
           if (feature.properties && feature.properties.popupContent) {
               layer.bindPopup(feature.properties.popupContent);
           }
       }
       L.geoJson(geojson, {
           onEachFeature: onEachFeature
       }).addTo(map);
       function clickEvt(e){
         alert();
       }

 }

from math import cos, sqrt
import numpy as np
class NodeLatlngMapper:
    """ノードマッパー"""
    def as_dict(self, node1, node2):
        return {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        'node': {
                            'node_id': node1.node_id,
                        },
                        'hide': 'true',
                        'popupContent': 'これは'+ str(node1.node_id) + '番目です。',
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [node1.latlng.x,node1.latlng.y],
                    },
                },
            ]}

from django.shortcuts import render, get_object_or_404
from django.views.generic import View
from .models import Mareas_Nodes_Latlng
from .models import Mareas_Links_Nodes
from .view_models import NodeLatlngMapper
from .view_models import LinkNode
from django.utils.decorators import method_decorator
from django.http.response import HttpResponse
import json
class GetAllNodeListView(View):
    ##@method_decorator(login_required())
    def get(self, request, *args, **kwargs):
        # オブジェクトの取得
        node_list = Mareas_Nodes_Latlng.objects.all().order_by('node_id')
        # レスポンスの生成
        features = []
        #features = [NodeLatlngMapper(node).as_dict() for node in node_list]
        for node1, node2 in zip(node_list, node_list[1:]):
            features.append(NodeLatlngMapper().as_dict(node1, node2))
        response = {
            'features': features,
        }
        # レスポンス
        response_json = json.dumps(response)
        return HttpResponse(response_json, content_type='application/json')
get_all_node_list = GetAllNodeListView.as_view()

from django.urls import path
from . import views

app_name = 'rsl_road'
urlpatterns = [
    path('', views.index, name='index'),						
    path('get_all_node_list/', views.get_all_node_list, name='get_all_node_list'),
]

index.html
{% extends "base.html" %}
{% load static %}
{% block extra_css %}{% endblock %}
{% block content %}
{% endblock %}

{% block extra_js %}
{% endblock %}

base.html
<!doctype html>
{% load static %}
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ page_title }}</title>
    {# --- css --- #}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="{% static 'rsl_road/css/main.css' %}">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <div class="container">
    <div id="map"></div>
    </div>
    {% block content %}{% endblock %}
    <script type="text/javascript" src="{% static 'rsl_road/js/canvas.js' %}"></script>
    <script type="text/javascript" src="{% static 'rsl_road/js/connection.js' %}"></script>
</body>
</html>

試したこと

以下のコードを打つことで、クリックではありませんが、idの表示をすることはできました。
console.log(geojson.features[0].features[0].properties.node.node_id);

補足情報（FW/ツールのバージョンなど）

leaflet1.7.1を使用しています。(このversionではないといけない理由は特にありません)
python3.8,
LinuxMint,にて実行しています
必要な情報が抜けている可能性があります。教えていただけましたら幸いです。

Comments

[sfdust]

+ pythonのバージョンや実行しているOSの情報を書いてください。
＋ pythonコードにおいて、NodeLatlngMappeクラスだけが示されており、
肝心のインスタンス生成部分のコードが記載されていません。
また、一部のjavascrypt部分だけ記載されており、肝心の、pythonからgeojsonを受け取る部分等やその外のhtmlコードが抹消されているように思えます。

どこに改善点やバグがあるかもわかりませんので、可能な限り、すべてのコードを記載してください。

[okiron9619]

返答ありがとうございます。
記述していただいた必要事項を質問文に記載いたしました。
不足部分があるかもしれません、申し訳ありません。

[sfdust]

回答を修正しました。

Answer 1

下記のコードは以下の点を修正点として反映しています。

• グローバル配列circlesに、各地点データcircleを格納。
• L.geoJson()関数の実行時、onEachFeature引数は使用せず、pointToLayer引数を指定するだけでクリックイベントの登録とpopupContentの紐づけまで完了させています。
• L.CircleMarker -> L.circleMarker が正しいです。

（略）
var circles = []  //circleを格納するためのグローバル配列

V.showNodesLayer = function (geojson) {
  var hidingMarker = function (feature, latlng) {
    if (feature.properties.hide == 'true') {
      // 地点データの作成とクリックイベントの登録
      circle = L.circleMarker(
        latlng,
        {
          radius: 30,
          color: "#00ff00",
          fillColor: '#00ff00',
          fillOpacity: 0.2,
        }
      ).bindPopup(feature.properties.popupContent)
      .addTo(map)
      .on( 'click', function(e) { clickEvt(e); });

      // 作成した地点をグローバル配列に格納する。
      circles.push(circle)
      return circle
    }
  }
  
  // 地点データを紐付ける
  L.geoJson(geojson, {pointToLayer: hidingMarker})

  function clickEvt(e) {
    // カスタマイズしたpropertyは、e.target.feature.properties経由でアクセスできます。
    p = e.target.feature.properties
    // geometry.coordinateは、e.latlng経由でアクセスできます。
    alert('node_id:' + p.node.node_id + '\n緯度：' + e.latlng.lat + '\n経度：' + e.latlng.lng);
  }

}

参考：
https://leafletjs.com/reference-1.7.1.html#geojson
https://leafletjs.com/examples/geojson/

Comments

[okiron9619]

返信遅くなりすみません。回答、誤字の指摘、参考URLの添付、ありがとうございます。

2点質問があります。
地点を格納するための配列を用意し、戻り値としてその配列を指定した点(回答して頂いた1つ目の+)
L.geojsonメソッドではなく、geoJson()関数の処理の段階でクリックイベントを紐づけした点(回答して頂いた2つ目の+)
勉強不足で申し訳ありませんが、教えていただけましたら幸いです。

[sfdust]

１つ目
>点を格納するための配列用意し、戻り値としてその配列を指定した点：
コードをよく見ていただきたいのですが、hidingMarker()関数内で戻り値に指定しているのは、ローカル変数circleであって、グローバル変数配列circles[]ではありません。

circleをグローバル変数配列であるcirclesに格納することによって、関数を抜けてもローカル変数circleが保持されるようにしています。

２つめ
> L.geojsonメソッドではなく、geoJson()関数の処理の段階でクリックイベントを紐づけした点

コメントを書き直しましたが、正しくは、「 L.geojsonメソッドで、pointToLayerを指定してhidingMarkerを紐づける処理をする段階で、一気にマウスイベントの登録とpopupContentの紐づけを行っている」ということになります。

このようにした理由は、元コードのように
L.geoJson(geojson, {pointToLayer: hidingMarker})
の後ろに
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
L.geoJson(geojson, {
onEachFeature: onEachFeature
}).addTo(map);
も書いてしまうと、サークルと、マーカーが同時に表示されてしまうからです。
この場合、サークルをクリックしたときだけでなく、マーカーをクリックしたときにも、ポップアップラベルがそれぞれ異なる位置に表示されます。
（もちろん同時に表示されてもよいというのであれば、残しても構いませんが）

L.geoJson()関数は、少々わかりにくいものとなっています。
かみ砕いて書くと

L.geoJson(GEOJSON, {pointToLayer: FUNCTION})

と書くことによって
+ GEOJSONに含まれている各地点データが、L（Leafletオブジェクト＝アプリの親玉）に順次取り込まれる。
+ その取り込みの際、pointToLayer引数に指定された関数FUNCTIONに、GEOJSON内の各地点データが渡される
+ Leafletオブジェクトは、FUNCTION関数内で戻り値に指定されたオブジェクトを、表示用レイヤーデータとして取り込む（マーカーやサークル、ポリゴンなど）
という仕組みになっているようです。

公式チュートリアルでは、onEachFeaturey引数を使ってポップアップを追加する例が記載されていましたが、私自身は、onEachFeature引数を使ってマーカーではなく「サークル」に対してポップアップとマウスイベント登録を個別に紐づけるやり方を見つけることができませんでした。
なので苦肉の策？としてpointToLayer引数を使っています。

[okiron9619]

丁寧な説明ありがとうございます。
1つ目に関してです。
オブジェクト指向言語であるため、以前の私のコードではなく、ローカル変数として扱えるようにしておいたほうが良い。

2つ目に関してです。
以前のコードでは、仰っているようにポップアップラベルが異なる位置に同時に表示されていました。(理想としては、sfdust様に回答して頂いたようなものを考えていました。)
2つ目の後半部分に関しては、勉強不足が故に理解にもうすこし時間かかると思います。すみません。
pointToLayerを使用し、異なる位置に同時にポップアップラベルが表示されないようにする(1つにする?)
というように現在では解釈しています。

認識間違いがあれば申し訳ありません。
重ね重ねになりますが、丁寧な説明をしていただきありがとうございます。