KMR-zoar · March 13, 2018 02:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>地理院タイル目録タイル</title>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
   <div id="map"></div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-tilelayer-geojson/1.0.4/TileLayer.GeoJSON.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
   <script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
 function getColor(d) {
   return d > 1520000000   ? '#800026' :
          d > 1480000000   ? '#BD0026' :
          d > 1470000000   ? '#E31A1C' :
          d > 1466000000   ? '#FC4E2A' :
          d > 1464000000   ? '#FD8D3C' :
          d > 1462000000   ? '#FEB24C' :
          d > 1460059730   ? '#FED976' :
                             '#FFEDA0';
 }

 function getNowUnixTime() {
   var date = Date();
   var nowUnixTime = Math.floor(date.getTime() / 1000);
   return nowUnixTime;
 }

 function style(feature) {
   return {
      fillcolor: getColor(feature.properties.unixtime),
      fillOpacity: 0.5,
      weight: 4,
      color: getColor(feature.properties.unixtime)
   };
 }

 var mokuroku = new L.TileLayer.GeoJSON(
   'http://mokuroku.pgw.jp:3000/{z}/{x}/{y}.json',
   {
      clipTiles: false,
      attribution: "地理院タイル目録",
      maxZoom: 18
   },{
      style: style,
      onEachFeature: function(feature, layer) {
         var lat = feature.geometry.coordinates[0][0][1];
         var lng = feature.geometry.coordinates[0][0][0];
         var zoom = map.getZoom();
         var icon= L.divIcon({
            className: "info",
            html: "<div class='infoicon zoomlevel" + zoom +"'>" +
               feature.properties.date + "<br>" +
               feature.properties.time + "<br>" +
               feature.properties.unixtime +
               "</div>"
         });
         var marker = L.marker(new L.LatLng(lat, lng), {icon:icon});
         marker.addTo(map);
      }
 });

 var std = L.tileLayer(
   'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
   {
      attribution: "地理院タイル（標準地図）",
      maxZoom: 18
   });

 var map = L.map('map',{
   center: [35.685175, 139.7527995],
   zoom: 5,
   maxZoom: 18,
   layers: [std]
 });

 L.control.layers({
   "地理院タイル(標準地図)": std
 },{
   "地理院タイル目録タイル": mokuroku
 },{
   position: 'topright',
   collapsed: false
 }).addTo(map);

 function removeIcon() {
   var zoom = map.getZoom();
   var elementArray = document.getElementsByClassName('infoicon');
   for (var i = 0; i < elementArray.length; i++) {
      var element = elementArray[i];
      element.remove();
   };
 };

 map.on("zoomstart", removeIcon);
 map.on("unload", removeIcon);

 var hash = new L.Hash(map);
diff --git a/style.css b/style.css
 html, body, #map {
   margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
 }

 .infoicon {
   width: 6em;
   margin: 1em;
   background-color:rgba(255, 255, 255, 0.7);
 }
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>地理院タイル目録タイル</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<div id="map"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-tilelayer-geojson/1.0.4/TileLayer.GeoJSON.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	function getColor(d) {
	return d > 1520000000 ? '#800026' :
	d > 1480000000 ? '#BD0026' :
	d > 1470000000 ? '#E31A1C' :
	d > 1466000000 ? '#FC4E2A' :
	d > 1464000000 ? '#FD8D3C' :
	d > 1462000000 ? '#FEB24C' :
	d > 1460059730 ? '#FED976' :
	'#FFEDA0';
	}

	function getNowUnixTime() {
	var date = Date();
	var nowUnixTime = Math.floor(date.getTime() / 1000);
	return nowUnixTime;
	}

	function style(feature) {
	return {
	fillcolor: getColor(feature.properties.unixtime),
	fillOpacity: 0.5,
	weight: 4,
	color: getColor(feature.properties.unixtime)
	};
	}

	var mokuroku = new L.TileLayer.GeoJSON(
	'http://mokuroku.pgw.jp:3000/{z}/{x}/{y}.json',
	{
	clipTiles: false,
	attribution: "地理院タイル目録",
	maxZoom: 18
	},{
	style: style,
	onEachFeature: function(feature, layer) {
	var lat = feature.geometry.coordinates[0][0][1];
	var lng = feature.geometry.coordinates[0][0][0];
	var zoom = map.getZoom();
	var icon= L.divIcon({
	className: "info",
	html: "<div class='infoicon zoomlevel" + zoom +"'>" +
	feature.properties.date + "<br>" +
	feature.properties.time + "<br>" +
	feature.properties.unixtime +
	"</div>"
	});
	var marker = L.marker(new L.LatLng(lat, lng), {icon:icon});
	marker.addTo(map);
	}
	});

	var std = L.tileLayer(
	'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
	{
	attribution: "地理院タイル（標準地図）",
	maxZoom: 18
	});

	var map = L.map('map',{
	center: [35.685175, 139.7527995],
	zoom: 5,
	maxZoom: 18,
	layers: [std]
	});

	L.control.layers({
	"地理院タイル(標準地図)": std
	},{
	"地理院タイル目録タイル": mokuroku
	},{
	position: 'topright',
	collapsed: false
	}).addTo(map);

	function removeIcon() {
	var zoom = map.getZoom();
	var elementArray = document.getElementsByClassName('infoicon');
	for (var i = 0; i < elementArray.length; i++) {
	var element = elementArray[i];
	element.remove();
	};
	};

	map.on("zoomstart", removeIcon);
	map.on("unload", removeIcon);

	var hash = new L.Hash(map);
	html, body, #map {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	}

	.infoicon {
	width: 6em;
	margin: 1em;
	background-color:rgba(255, 255, 255, 0.7);
	}