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

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

const map = new maplibregl.Map({
  container: "map",
  style:
    "https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/pale.json",
  center: [139.7765214, 35.7123457],
  zoom: 3,
  pitch: 0
});

map.on("load", () => {
  map.addSource("source_point", {
    type: "geojson",
    data: "https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/58732f3b6b3479d2f50b015fc1167dcfaeb238fe/merge.geojson"
  });

  map.addLayer({
    id: "point_sample",
    type: "circle",
    source: "source_point",
    layout: {},
    paint: {
      "circle-color": [
        "case",
        ["==", ["get", "school_type"], "05"],
        "olive",
        ["==", ["get", "school_type"], "16001"],
        "red",
        ["==", ["get", "school_type"], "16002"],
        "orange",
        ["==", ["get", "school_type"], "16003"],
        "purple",
        ["==", ["get", "school_type"], "16004"],
        "blue",
        ["==", ["get", "school_type"], "16005"],
        "salmon",
        ["==", ["get", "school_type"], "16011"],
        "cyan",
        "#F00000"
      ],
      "circle-radius": 10
    }
  });
});

map.on("click", "point_sample", (e) => {
  const coordinates = e.features[0].geometry.coordinates.slice();
  const name = e.features[0].properties.name;
  const address = e.features[0].properties.address;

  new maplibregl.Popup()
    .setLngLat(coordinates)
    .setHTML(name + ":" + address)
    .addTo(map);
});