Integration guides
Add a MapScale map to plain HTML and JavaScript
No framework required: one CSS file, one JS file, one div.
Beginner
Create the HTML file
Load MapLibre from a CDN and give the map a fixed height. Replace the key before deploying.
<!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>Create map.js
Use a publishable browser/mobile key for client apps. Keep secret keys on your server only.
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")Open it locally
Use a tiny local server so browser module and network rules behave like production.
npx serve .