Free, open-source map component for Hong Kong • 免費開源香港地圖組件

I created Hong Kong Open Map for the vibe coding community – developers who build for fun, for learning, or for side projects.

The problem: Google Maps is expensive. Sometimes you just want to show your company's location on a contact page. But when traffic grows, you hit API limits and face unexpected bills. This shouldn't happen for something as basic as displaying a map.

The solution: Hong Kong Open Map uses official government tiles from the Lands Department (地政總署).

• ✅ 100% Free – No API keys, no usage limits, no bills. Ever.
• ✅ Fast & Accurate – Data served directly from HK government servers.
• ✅ No Bandwidth Costs – You don't host the tiles, the government does.
• ✅ Universal – Works with React, HTML, Blogger, WordPress, etc.

我為 vibe coding 社群創建了香港開放地圖 – 那些為興趣、學習或 side project 而編程的開發者。

問題： Google Maps 太貴了。有時你只想在網頁顯示公司位置，但當流量增加，你就會遇到 API 限制，甚至收到預料之外的賬單。顯示地圖這麼基本的功能，不應該這麼煩人。

解決方案： 香港開放地圖使用地政總署官方圖磚。

• ✅ 完全免費 – 無需 API Key、無使用限制、無賬單。永遠。
• ✅ 快速準確 – 數據直接從香港政府伺服器提供。
• ✅ 無頻寬成本 – 你不需要託管圖磚，政府負責。
• ✅ 全平台支援 – React、HTML、Blogger、WordPress 等都用得。

# Using npm
npm install hong-kong-open-map

# Using bun (recommended)
bun add hong-kong-open-map

import { HKMap, HKMarker } from 'hong-kong-open-map';

function App() {
  return (
    <div style={{ height: '500px' }}>
      <HKMap
        center={[114.1694, 22.3193]}
        zoom={12}
        theme="light"
        language="zh"
      >
        <HKMarker
          position={[114.1694, 22.3193]}
          title="Victoria Harbour"
        />
      </HKMap>
    </div>
  );
}

<!-- Include MapLibre GL CSS -->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.css">

<!-- Use the UMD bundle -->
<script src="https://unpkg.com/hong-kong-open-map/dist/vanilla.umd.js"></script>

<div id="map" style="width: 100%; height: 500px;"></div>

<script>
  const map = new HKMap('map', {
    center: [114.1694, 22.3193],
    zoom: 12,
    theme: 'auto'
  });
</script>

Perfect for Blogger, WordPress, or simple sites.

<iframe
  src="https://wangwailok.com/hong-kong-open-map/embed?lat=22.3193&lng=114.1694&zoom=12"
  width="100%"
  height="450px"
  frameborder="0"
></iframe>

This library uses map tiles from the Lands Department of the HKSAR Government. According to the Terms of Use, the following attribution is automatically included in the component:

本庫使用香港特別行政區政府地政總署提供的地圖圖磚。根據使用條款，組件已自動包含以下版權聲明：

© Map information from Lands Department

Created with ❤️ by Lok Wang for the developer community.

MIT License. Free for personal and commercial use. Map data © Lands Department, HKSAR Government.