คู่มือการเชื่อมต่อ
เพิ่มแผนที่ MapScale ด้วย HTML และ JavaScript
ไม่ต้องใช้ framework: มี CSS หนึ่งไฟล์ JS หนึ่งไฟล์ และ div หนึ่งตัว
เริ่มต้น
สร้างไฟล์ HTML
โหลด MapLibre จาก CDN และกำหนดความสูงให้ div ของแผนที่ เปลี่ยน key ก่อน deploy จริง
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body { margin: 0; font-family: system-ui, sans-serif; }
#map { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="./map.js"></script>
</body>
</html>สร้างไฟล์ map.js
ใช้ publishable key สำหรับ browser หรือ mobile เท่านั้น อย่าใส่ secret key ใน client app
const key = "pk_test_your_key_here"
const map = new maplibregl.Map({
container: "map",
style: `https://api.mapscale.io/styles/v1/streets?key=${key}`,
center: [100.5018, 13.7563],
zoom: 11,
})
map.addControl(new maplibregl.NavigationControl(), "top-right")เปิดทดสอบในเครื่อง
ใช้ local server เล็ก ๆ เพื่อให้กฎของ browser และ network ใกล้เคียง production
npx serve .