How to overlay BLM map in leafletjs?

Question

I'm trying to show BLM land areas overlayed on a map.

I'm not sure how to define it though:

      const map = L.map("map", {
        center: [9.082, 8.6753],
        zoom: 8,
      });

      const osm = L.tileLayer(
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          attribution:
            '&copy; <a href="https://skatespot.com">SkateSpot, Inc.</a>',
        }
      ).addTo(map);

      const mqi = L.tileLayer(
        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        {
          id: "mapbox.streets",
          attribution:
            '&copy; <a href="https://skatespot.com">SkateSpot, Inc.</a>',
        }
      );

      const baseMaps = {
        Street: osm,
        Satellite: mqi,
      };

      const overlays = {
        BLM: L.tileLayer(
          "https://gis.blm.gov/arcgis/rest/services/lands/BLM_Natl_SMA_Cached_without_PriUnk/MapServer/tile/%7Bz%7D/%7By%7D/%7Bx%7D"
        ),
        //add any overlays here
      };

      L.control
        .layers(baseMaps, overlays, { position: "bottomleft" })
        .addTo(map);
      L.Control.geocoder().addTo(map);

The specific overlay is:

const overlays = {
        BLM: L.tileLayer(
          "https://gis.blm.gov/arcgis/rest/services/lands/BLM_Natl_SMA_Cached_without_PriUnk/MapServer/tile/%7Bz%7D/%7By%7D/%7Bx%7D"
        ),
        //add any overlays here
      };

Answer 1

If you look at the Leaflet docs for tile layers at https://leafletjs.com/reference.html#tilelayer, you'll see that syntax for specifying tile parameters z, y and x looks something like this:

'https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'

Not all parameters are needed, only z, y and x, and the order of those is not fixed, it depends on tile server.

In your case it should be like this:

L.tileLayer("https://gis.blm.gov/arcgis/rest/services/lands/BLM_Natl_SMA_Cached_without_PriUnk/MapServer/tile/{z}/{y}/{x}")