D3 Examples - 明治日本の産業革命遺産

xxxxxxxxxx
 
<!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="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
​
<body>
<div id="map"></div>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.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(
        'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
        {
            attribution: "<a href='https://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>
​
    
明治日本の産業革命遺産

データ取得元

データ取得日
