shimizu/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    leaflet@1.5.1とd3@5.0.0を用いて、地図上にsvg circleを表示するサンプル

  
## 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="http://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>';

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

        //Tile Map Serviceの指定
        L.tileLayer('http://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>

## landprice.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              landprice.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://portal.cyberjapan.jp/help/termsofuse.html">国土地理院地理院地図標準地図</a>';

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

	//Tile Map Serviceの指定
	L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	attribution: '© ' + 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>