<div id="map"></div>

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
 .marker {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #000088;
 }

mapboxgl.accessToken =
  "pk.eyJ1Ijoib3R0eWxhYiIsImEiOiJjbTNsYmhxdWwwaWJtMnFxenIzNmJuaGJmIn0.QEnCKZZKJQBAbK8GFBzAcw";
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [139.7586677640881, 35.67369269880291],
  zoom: 9
});

map.on("load", () => {
  (async () => {
    const data = await (
      await fetch(
        "https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/55644456285a0112cab7fc40506078e9867afbfa/random.geojson"
      )
    ).json();

    console.log(data);
    data.features.forEach((feature) => {
      const el = document.createElement("div");
      el.className = "marker";

      new mapboxgl.Marker(el)
        .setLngLat(feature.geometry.coordinates)
        .addTo(map);
    });
  })();
});