Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/Readme.md

Last active Nov 1, 2019
Embed
What would you like to do?
leaflet@1.5.1 & d3@5.0.0 - ポイント表示

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

<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment