Xây dựng Store Locator tại Việt Nam bằng MapLibre và Geocoding API

Browser
  -> Next.js /api/locations/suggest
  -> GoGoDuk /v1/suggest
  -> user chọn một placeId
  -> Next.js /api/locations/resolve
  -> GoGoDuk /v1/place/resolve
  -> xếp hạng chi nhánh
  -> hiển thị marker bằng MapLibre

export type Branch = {
  id: string;
  name: string;
  address: string;
  lat: number;
  lon: number;
  phone?: string;
  openingHours?: string;
};
 
export const branches: Branch[] = [
  {
    id: "hcm-ben-thanh",
    name: "Chi nhánh Bến Thành",
    address: "26-28 Lê Thánh Tôn, Quận 1, Thành phố Hồ Chí Minh",
    lat: 10.7781,
    lon: 106.6994,
    openingHours: "08:00-21:00",
  },
  {
    id: "hcm-thao-dien",
    name: "Chi nhánh Thảo Điền",
    address: "Đường Xuân Thủy, Thảo Điền, Thành phố Hồ Chí Minh",
    lat: 10.8032,
    lon: 106.7341,
    openingHours: "08:00-21:00",
  },
];

import { NextResponse } from "next/server";
 
const API_URL = process.env.GOGODUK_API_URL ?? "https://api.gogoduk.com";
 
export async function GET(req: Request) {
  const input = new URL(req.url).searchParams.get("input")?.trim() ?? "";
  if (input.length < 2) {
    return NextResponse.json({ predictions: [] });
  }
 
  const upstream = new URL("/v1/suggest", API_URL);
  upstream.searchParams.set("input", input);
  upstream.searchParams.set("country", "VN");
  upstream.searchParams.set("lang", "vi");
 
  const response = await fetch(upstream, {
    cache: "no-store",
    headers: { "X-API-Key": process.env.GOGODUK_API_KEY! },
  });
 
  return NextResponse.json(await response.json(), {
    status: response.status,
  });
}

GOGODUK_API_URL=https://api.gogoduk.com
GOGODUK_API_KEY=gdk_live_your_key

import { NextResponse } from "next/server";
 
const API_URL = process.env.GOGODUK_API_URL ?? "https://api.gogoduk.com";
 
export async function GET(req: Request) {
  const id = new URL(req.url).searchParams.get("id")?.trim();
  if (!id) {
    return NextResponse.json({ error: "missing id" }, { status: 400 });
  }
 
  const upstream = new URL("/v1/place/resolve", API_URL);
  upstream.searchParams.set("id", id);
  upstream.searchParams.set("lang", "vi");
 
  const response = await fetch(upstream, {
    cache: "no-store",
    headers: { "X-API-Key": process.env.GOGODUK_API_KEY! },
  });
 
  return NextResponse.json(await response.json(), {
    status: response.status,
  });
}

type Point = { lat: number; lon: number };
 
function distanceKm(a: Point, b: Point) {
  const radiusKm = 6371;
  const toRad = (value: number) => (value * Math.PI) / 180;
  const dLat = toRad(b.lat - a.lat);
  const dLon = toRad(b.lon - a.lon);
  const lat1 = toRad(a.lat);
  const lat2 = toRad(b.lat);
 
  const h =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2;
 
  return 2 * radiusKm * Math.asin(Math.sqrt(h));
}
 
export function nearestBranches(origin: Point, branches: Branch[]) {
  return branches
    .map((branch) => ({
      ...branch,
      distanceKm: distanceKm(origin, branch),
    }))
    .sort((a, b) => a.distanceKm - b.distanceKm);
}

npm install maplibre-gl

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
 
const map = new maplibregl.Map({
  container: "store-map",
  style: process.env.NEXT_PUBLIC_MAP_STYLE_URL!,
  center: [106.7009, 10.7769],
  zoom: 12,
});
 
for (const branch of rankedBranches) {
  const popup = document.createElement("div");
  popup.textContent =
    `${branch.name} - ${branch.address} - ` +
    `Cách khoảng ${branch.distanceKm.toFixed(1)} km`;
 
  new maplibregl.Marker()
    .setLngLat([branch.lon, branch.lat])
    .setPopup(new maplibregl.Popup().setDOMContent(popup))
    .addTo(map);
}