Mapbox GL JS × Turf - How big is the Tokyo Dome? (Satellite ver.)

▶︎ 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

<!DOCTYPE html>
<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