examples/add-your-data.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map {
        min-height: 500px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Don't forget to replace <YOUR_ACCESS_TOKEN> by your own access token
      const accessToken = "<YOUR_ACCESS_TOKEN>";
      const map = new maplibregl.Map({
        container: "map",
        style: `https://api.jawg.io/styles/jawg-sunny.json?access-token=${accessToken}`,
        zoom: 11,
        center: [2.3488, 48.8534],
        hash: true,
      }).addControl(new maplibregl.NavigationControl(), "top-right");
      // This plugin is used for right to left languages
      maplibregl.setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js");

      map.on("load", async () => {
        // Add an image to use as a custom marker
        const image = await map.loadImage("https://media.jawg.io/add-your-data/shop.png");
        // Add image to map
        map.addImage("custom-marker", image.data);

        // Add layer to map, using your geojson as source
        map.addLayer({
          id: "shops",
          type: "symbol",
          source: {
            type: "geojson",
            data: "https://media.jawg.io/add-your-data/marketplaces.geojson",
          },
          layout: {
            "icon-image": "custom-marker",
            "icon-anchor": "bottom",
            "icon-overlap": "always",
            "icon-ignore-placement": true,
          },
        });
      });
    </script>
  </body>
</html>