Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
明治日本の産業革命遺産
<!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>
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