Add a MapScale map to Next.js

Beginner

Install MapLibre GL

MapScale serves MapLibre-compatible styles and tiles. Install the browser map renderer first.

Install MapLibre GL

npm install maplibre-gl

Create a public environment variable

Use a publishable browser/mobile key for client apps. Keep secret keys on your server only. In Next.js, browser-readable variables must start with NEXT_PUBLIC_.

Create a public environment variable

NEXT_PUBLIC_MAPSCALE_KEY=pk_test_your_key_here

Create a client map component

The map touches the browser DOM, so it must be a client component. This example starts centered on Bangkok.

Create a client map component

"use client"

import "maplibre-gl/dist/maplibre-gl.css"
import maplibregl from "maplibre-gl"
import { useEffect, useRef } from "react"

export function MapScaleMap() {
	const container = useRef<HTMLDivElement>(null)

	useEffect(() => {
		if (!container.current) return

		const key = process.env.NEXT_PUBLIC_MAPSCALE_KEY
		const map = new maplibregl.Map({
			container: container.current,
			style: `https://api.mapscale.io/styles/v1/streets?key=${key}`,
			center: [100.5018, 13.7563],
			zoom: 11,
		})

		map.addControl(new maplibregl.NavigationControl(), "top-right")
		return () => map.remove()
	}, [])

	return <div style={{ width: "100%", height: 480 }} ref={container} />
}

Render it from a page

Import the client component into any App Router page. The page itself can stay a server component.

Render it from a page

import { MapScaleMap } from "@/components/mapscale-map"

export default function Page() {
	return <MapScaleMap />
}

Add a MapScale map to Next.js

Install MapLibre GL

Create a public environment variable

Create a client map component

Render it from a page

On this page