Leaflet
Add raster layers from TiTiles to a Leaflet map using TileJSON.
1. Fetch the TileJSON for your layer
const API = window.location.origin; // or "https://tileslibrary.greenjurisdictions.org"
const layerId = "pa_2024_agb95a"; // Pará AGB95A 2024
const res = await fetch(`${API}/layers/${layerId}/tilejson.json`);
const tilejson = await res.json();
2. Add the tile layer to your map
const layer = L.tileLayer(tilejson.tiles[0], {
minZoom: tilejson.minzoom,
maxZoom: tilejson.maxzoom,
tileSize: tilejson.tileSize || 256,
opacity: 0.8,
attribution: tilejson.name,
});
layer.addTo(map);
3. (Optional) Center the map on the layer bounds
if (tilejson.bounds) {
const [west, south, east, north] = tilejson.bounds;
map.fitBounds([[south, west], [north, east]]);
}