Mastodon instances Map

data source

DNS でIPが取得できなかったものと、GeoIPで位置情報が取得できなかったインスタンスは省いてある。

IPジオロケーションは無料枠の範囲で使用しているので、国の判別には問題がないが、都市に関してはあまり精度が良くない。

<!DOCTYPE html>
<html>
<head>
	<title>Mastodon instances  Map</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

#progress {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 480px;
    top: 250px;
    width: 280px;
    height: 20px;
    margin-top: -20px;
    margin-left: -100px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 2px;
}

#progress-bar {
    width: 0;
    height: 100%;
    background-color: #76A6FC;
    border-radius: 4px;
}

#info {
	font-size: 12px; 
	padding: 4px;
	margin: auto;
	position: absolute;
	top:0px;
	right: 0px;
	width: 150px;
	height: 20px;
	background-color:white;
	z-index: 999999;
}

</style>

</head>
<body>
<div id="map">
<div id="info">update</div>	
</div>

d3.json("https://shimizu-mastodon-instances.s3-ap-northeast-1.amazonaws.com/mastodon/Latest.json", function(geoJsonData){
	
	d3.select("#info").text("Update: "+geoJsonData.update);
	
	var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
	});
	
	var map = L.map('map')
			.addLayer(tiles);
	
	var markers = L.markerClusterGroup();
	
	var geoJsonLayer = L.geoJson(geoJsonData, {
		onEachFeature: function (feature, layer) {
			var p = feature.properties
			var html = ['<strong><a target="_blank" href="https://', p.Instance, '">',p.Instance,"</a>", "</strong>" , "<br>", "Users:", p.Users].join("");
			layer.bindPopup(html);
		}
	});
	markers.addLayer(geoJsonLayer);
	
	map.addLayer(markers);
	map.fitBounds(markers.getBounds());

});

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js