handygeospatial/file0.html

## file0.html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="http://handygeospatial.github.io/mapsites/js/leaflet-hash.js"></script>
    <script src="http://handygeospatial.github.io/mapsites/js/TileLayer.GeoJSON.js"></script>
    <style>
      body {padding: 0; margin: 0}
      html, body, #mapdiv {height: 100%; width: 100%;}
      .leaflet-container {background: #fff;}
    </style>
  </head>
  <body>
    <div id="mapdiv">
    <script>
      var std = L.tileLayer(
        'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        {maxZoom: 24, maxNativeZoom: 18,
         attribution: '地理院タイル（標準地図）'});
      var dem = new L.TileLayer.GeoJSON(
        './{z}/{x}/{y}.geojson',
        {minZoom: 18, maxNativeZoom: 18, maxZoom: 24,
         attribution: '基盤地図情報（数値標高モデル）（5mメッシュ（標高））'},
        {pointToLayer: function(feat, latlng) {
           return L.circleMarker(latlng, {radius: 4});
         },
         onEachFeature: function(feat, layer) {
           var popupString = '<div class="popup">';
           for (var k in feat.properties) {
             var v = feat.properties[k];
             popupString += k + ': ' + v + '<br />';
           }
           popupString += '</div>';
           layer.bindPopup(popupString);
         }
        });
      var map = L.map('mapdiv', {
        center: [35.68467, 139.65380], zoom: 18,
        layers: [std, dem]});

      var hash = L.hash(map);
      L.control.layers({'地理院タイル（標準地図）': std}).addTo(map);
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
	<script src="http://handygeospatial.github.io/mapsites/js/leaflet-hash.js"></script>
	<script src="http://handygeospatial.github.io/mapsites/js/TileLayer.GeoJSON.js"></script>
	<style>
	body {padding: 0; margin: 0}
	html, body, #mapdiv {height: 100%; width: 100%;}
	.leaflet-container {background: #fff;}
	</style>
	</head>
	<body>
	<div id="mapdiv">
	<script>
	var std = L.tileLayer(
	'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
	{maxZoom: 24, maxNativeZoom: 18,
	attribution: '地理院タイル（標準地図）'});
	var dem = new L.TileLayer.GeoJSON(
	'./{z}/{x}/{y}.geojson',
	{minZoom: 18, maxNativeZoom: 18, maxZoom: 24,
	attribution: '基盤地図情報（数値標高モデル）（5mメッシュ（標高））'},
	{pointToLayer: function(feat, latlng) {
	return L.circleMarker(latlng, {radius: 4});
	},
	onEachFeature: function(feat, layer) {
	var popupString = '<div class="popup">';
	for (var k in feat.properties) {
	var v = feat.properties[k];
	popupString += k + ': ' + v + '<br />';
	}
	popupString += '</div>';
	layer.bindPopup(popupString);
	}
	});
	var map = L.map('mapdiv', {
	center: [35.68467, 139.65380], zoom: 18,
	layers: [std, dem]});

	var hash = L.hash(map);
	L.control.layers({'地理院タイル（標準地図）': std}).addTo(map);
	</script>
	</body>
	</html>