Longdo Map React Example

This is an example project demonstrating how to use Longdo Map with React and Next.js.

Getting Started

1. Clone the repository

git clone https://github.com/your-username/longdomap-react-example.git
cd longdomap-react-example

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Set up Longdo Map API Key

To use Longdo Map, you need to have an API Key. You can get one for free at https://map.longdo.com/console.

Once you have the key, create a .env.local file in the root of the project and add your API key as follows:

LONGDO_MAP_KEY=YOUR_API_KEY

4. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

• app/page.tsx: The main page of the application, where the Longdo Map component is rendered.
• app/components/Map.tsx: The component that initializes and displays the Longdo Map.
• app/components/MapCtrl.tsx: A component that demonstrates how to control the map, such as adding markers and shapes.
• next.config.ts: The Next.js configuration file, where the Longdo Map API key is passed to the application.

Learn More

• longdomap-react: The React wrapper for the Longdo Map API.
• Longdo Map API Documentation: The official documentation for the Longdo Map API.
• Next.js Documentation: Learn more about Next.js.