<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.eyJ1IjoieW9jaGkiLCJhIjoiY2xmd2k3MDFzMDB5bDNlcDZjazB1dHR1cSJ9.3bsAuOobDf15EVa4LfHmsQ";
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);
    });
  })();
});

External CSS

  1. https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css

External JavaScript

  1. https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js