If you want the rawest path to maps.guru, use maplibre-gl directly. One import, one new maplibregl.Map({...}) call, and the same style URL works.
pnpm add maplibre-glimport maplibregl, { Map as MapLibreMap } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
const MAP_STYLE = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';
const map: MapLibreMap = new maplibregl.Map({
container: 'map-canvas', // id of a <div> in your HTML
style: MAP_STYLE,
center: [77.209, 28.6139],
zoom: 11,
hash: true,
});
map.addControl(new maplibregl.NavigationControl());
new maplibregl.Marker()
.setLngLat([77.209, 28.6139])
.setPopup(new maplibregl.Popup().setText('New Delhi'))
.addTo(map);
Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.
Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.