shimizu/Japan_Industrial_Revolution.geojson

## README.md

      
    Raw
  

              README.md
            
          
    「明治日本の産業革命遺産」のGeoJSONデータ作りました。
自己責任の範囲でご自由にお使いください。
GeoJSON
データ取得元

明治日本の産業革命遺産　九州・山口と関連地域
データ取得日

2015/07/07

  
## index.html
<!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>

## Japan_Industrial_Revolution.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              Japan_Industrial_Revolution.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
No results found