leaflet@1.5.1 & d3@5.0.0 - ポイント表示 by shimizu

index.html

<!DOCTYPE html>
<html>

<head>
<title>Leafletv1.5.1 + D3v5 point</title>
<meta charset="utf-8" />
<!-- leafletのcssを読み込む -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin="" />
<!-- leafletのスクリプトを読み込む-->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>

<style>
    html,
    body,
    #map {
        width: 100%;
        height: 100%;
        margin: 0;
    }
</style>
</head>
<body>

    <div id="map"></div>



    <!-- D3.js ver.5 を読み込む-->
    <script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>
    <script> 
        //Leaflet初期設定
        var map = L.map('map').setView([36.3219088, 139.0032936], 12);
        var mapLink = '<a target="_blank" href="//portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>';

        //Leafletにsvgレイヤーを追加
        L.svg().addTo(map);

        //Tile Map Serviceの指定
        L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18
        }).addTo(map);

        // svg要素を選択
        var svg = d3.select('#map').select('svg');

        //ポイントデータを読み込む
        d3.json('landprice.geojson').then(function (point) {
            //元データにLeafletのLatLngobjを追加
            point.features.forEach(function (d) {
                d.LatLngObj = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]);
            });

            //サークル要素を追加
            var circle = svg
                .selectAll('circle')
                .data(point.features)
                .enter()
                .append('circle')
                .attr('stroke', 'black')
                .attr('stroke-width', 2)
                .attr('fill', 'red')
                .attr('fill-opacity', 0.7)
                .attr('r', 10);

            var update = function () {
                //サークル要素の位置をアップデートする
                console.log('update');
                circle.attr('transform', function (d) {
                    return (
                        'translate(' + map.latLngToLayerPoint(d.LatLngObj).x + ',' + map.latLngToLayerPoint(d.LatLngObj).y + ')'
                    );
                });
            };

            map.on('moveend', update);
            update();
        });
        
    </script>

</body>
</html>