「明治日本の産業革命遺産」のGeoJSONデータ作りました。
自己責任の範囲でご自由にお使いください。
2015/07/07
「明治日本の産業革命遺産」のGeoJSONデータ作りました。
自己責任の範囲でご自由にお使いください。
2015/07/07
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
html, body , #map { | |
margin: 0px; | |
padding: 0px; | |
width: 100%; | |
height: 100%; | |
} | |
.popup { | |
width: 200px; | |
} | |
</style> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<body> | |
<div id="map"></div> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script> | |
d3.json('./Japan_Industrial_Revolution.geojson', function(geodata){ | |
draw(geodata); | |
}); | |
function draw(geodata) { | |
map = L.map('map').setView([36.3265281, 139.00918460000003], 6); | |
//地理院地図レイヤー追加 | |
L.tileLayer( | |
'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', | |
{ | |
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" | |
} | |
).addTo(map); | |
var onEachFeature = function(feature, layer) { | |
if (!feature.properties) return ; | |
var p = feature.properties; | |
var properties = '<div class="popup">'; | |
if (p.name) properties += '<center>'+ p.name + '<center>'; | |
if (p.img) properties += '<center><img src="'+ p.img + '" /></center>'; | |
if (p.link) properties += '<p><a href="'+ p.link + '">link</a>'; | |
properties += '</div>'; | |
layer.bindPopup(properties); | |
} | |
var geojsonLayer = L.geoJson(null, {onEachFeature:onEachFeature}).addTo(map); | |
geojsonLayer.addData(geodata); | |
} | |
</script> | |
</body> | |
</html> |