Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active February 19, 2020 02:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/5640cb9123673372da2b8ed826cb5c37 to your computer and use it in GitHub Desktop.
Save Hirosaji/5640cb9123673372da2b8ed826cb5c37 to your computer and use it in GitHub Desktop.
leaflet - Map with D3.js outline
# leaflet - Map with D3.js outline
license: mit
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
#mapid { height: 500px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script>
d3.json("ken.geojson", function(json) {
mapdraw(json);
});
function mapdraw(json){
//地形データ取得
if (json.type === "Topology"){
//読み込みファイルがtopojsonの場合(json.objects.△△) 「△△」は変換時のgeojsonファイル名に合わせる
var geojson = topojson.feature(json, json.objects.ken)
} else {
var geojson = json;
}
//Leaflet初期設定
var map = L.map('mapid').setView([38.2, 137.2], 5);
var mapLink = '<span class="removed_link" title="http://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</span>';
//Tile Map Serviceの指定
L.tileLayer(
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
//Leafletに用意されたsvgを使う
map._initPathRoot();
// svg要素を選択
var svg = d3.select("#mapid").select("svg");
var g = svg.append("g");
//緯度経度->パスジェネレーター関数作成
var transform = d3.geo.transform({point: projectPoint});
var path = d3.geo.path().projection(transform);
featureElement = g.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr({
"stroke": "red",
"fill": "green",
"fill-opacity": 0.4
});
map.on("viewreset", update);
update();
//pathのd属性を更新
function update() {
featureElement.attr("d", path);
}
//位置→座標変換
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
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