▶︎ What's this?: Tokyo Dome Polygon generator on you are here area Satellite Map (Satellite ver.)
▶︎ How to get current place: using Geolocation API
▶︎ Reference: https://bl.ocks.org/andrewharvey/c1fdbebafe3fc46d743ba9514e4d64b2
▷ Why made this?: Japanese TV often expresses a large area compared with Tokyo Dome. However, many people can not imagine how big Tokyo Dome is. So I made this content. With this content, everyone can compare the you are here area with Tokyo Dome.
▷ Another version: 3D building ver. - https://bl.ocks.org/Hirosaji/ed4443946608237eaddcf1207b3776cb
[Gist] https://gist.github.com/Hirosaji/788653f2ce96f46c18d3ed5ca3daf82d
Built with blockbuilder.org
xxxxxxxxxx
<html>
<head>
<meta charset='utf-8' />
<title>How big is the Tokyo Dome?</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src='./generateDomefromLatLng.js'></script>
<style>
#map {
height: 600px;
width: 600px;
}
#button {
font-size: 1.4em;
font-weight: bold;
padding: 10px 30px;
background-color: #DC143C;
color: #fff;
border-style: none;
margin-bottom: 10px;
}
#button:hover {
background-color: pink;
}
#loading {
height: 50px;
}
</style>
</head>
<body>
<div id='input'>
<button id='button'>Draw Map</button>
</div>
<img id='dummy' src='./dummy.png'>
<div id='map'></div>
</body>
</html>
https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js
https://npmcdn.com/@turf/turf/turf.min.js