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.

Edit the inputs, send a real request, and inspect the live response.

Request body

curl \
  -X POST \
  -H "Content-Type: application/json" \
  -d '{"email":"[email protected]","companyName":"Your Company","allowedOrigin":"https://example.com"}' \
  "https://api.mapscale.io/v1/trial-key"

Default response

{
  "accountId": "acct_trial_123",
  "key": "pk_test_••••••••",
  "keyPrefix": "pk_test_ab12cd34",
  "enabledProducts": [
    "tiles",
    "autocomplete",
    "static"
  ],
  "limits": {
    "rateLimitTier": "trial",
    "note": "Evaluation limits apply."
  },
  "examples": {
    "styleUrl": "https://api.mapscale.io/styles/v1/streets?key=pk_test_••••••••",
    "autocompleteUrl": "https://api.mapscale.io/v1/autocomplete?q=Siam&session_token=demo&key=pk_test_••••••••"
  }
}

2. Add the map

Save this as index.html, replace YOUR_PUBLISHABLE_KEY, then open the file through a local web server.

index.html

<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.

Next stepContinue with React & Next.js →

Render your first map

1. Create a trial key

Sign in or create an account

2. Add the map

3. Verify the result

On this page