Start here
Start here · 5 minutes
Render your first map
Put an interactive Thailand map on a page with MapLibre GL JS and one publishable key.
What you’ll achieve
You will finish with a pannable, zoomable street map centered on Bangkok.
1. Create a trial key
Create a short-lived publishable key for local development. Set allowedOrigin to the exact origin that serves your page.
2. Add the map
Save this as index.html, replace YOUR_PUBLISHABLE_KEY, then open the file through a local web server.
<link href="https://unpkg.com/maplibre-gl@6/dist/maplibre-gl.css" rel="stylesheet" />
<div id="map" style="height: 480px"></div>
<script type="module">
import * as maplibregl from "https://unpkg.com/maplibre-gl@6/dist/maplibre-gl.mjs";
const key = "YOUR_PUBLISHABLE_KEY";
new maplibregl.Map({
container: "map",
style: `https://api.mapscale.io/styles/v1/streets?key=${key}&lang=th`,
center: [100.5018, 13.7563],
zoom: 11
});
</script>3. Verify the result
You should see Bangkok labels and be able to zoom. A 401 means the key is missing; a 403 usually means allowedOrigin does not match.