แสดงแผนที่ประเทศไทยแบบ interactive ด้วย MapLibre GL JS และ publishable key หนึ่งตัว

สิ่งที่คุณจะทำได้

คุณจะได้แผนที่กรุงเทพฯ ที่เลื่อนและซูมได้

1. สร้าง trial key

สร้าง publishable key อายุสั้นสำหรับพัฒนาในเครื่อง และกำหนด allowedOrigin ให้ตรงกับ origin ที่เปิดหน้าเว็บ

แก้ไข input ส่ง request จริง และตรวจสอบ 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"

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. เพิ่มแผนที่

บันทึกเป็น index.html แทน YOUR_PUBLISHABLE_KEY แล้วเปิดผ่าน 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. ตรวจผลลัพธ์

ควรเห็นชื่อสถานที่ในกรุงเทพฯ และซูมได้ 401 หมายถึงไม่มี key ส่วน 403 มักเกิดจาก allowedOrigin ไม่ตรง

อ่านต่อขั้นตอนถัดไป →

สร้างแผนที่แรก

1. สร้าง trial key

เข้าสู่ระบบหรือสร้างบัญชี

2. เพิ่มแผนที่

3. ตรวจผลลัพธ์

On this page