### Start Metro Server for Example App

Source: https://github.com/mym0404/react-native-naver-map/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. Navigate to the example directory first.

```sh
cd example && pnpm run start
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/mym0404/react-native-naver-map/blob/main/CONTRIBUTING.md

Installs pods and runs the example application on an iOS simulator or device. This command should be run from the project root.

```sh
pnpm run pod
cd example && pnpm run ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/mym0404/react-native-naver-map/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. Ensure you are in the example directory.

```sh
cd example && pnpm run android
```

--------------------------------

### Install React Native Naver Map

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/index.mdx

Install the library using npm. Ensure you have the correct project setup and prerequisites before installation.

```bash
npm install @mj-studio/react-native-naver-map
```

--------------------------------

### Install CocoaPods for iOS

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/ios/index.mdx

Navigate to the ios directory and run `pod install` to manage iOS dependencies.

```bash
cd ios && pod install
```

--------------------------------

### Programmatic Camera Control Example

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/camera-control.mdx

Demonstrates programmatic camera manipulation using a ref to access map methods like 'animateCameraTo'. Includes examples for moving to specific locations with and without animation options.

```tsx
import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { NaverMapView, NaverMapViewRef, Camera } from '@mj-studio/react-native-naver-map';

const CameraControlExample = () => {
  const mapRef = useRef<NaverMapViewRef>(null);

  const moveToSeoul = () => {
    const seoulCamera: Camera = {
      latitude: 37.5665,
      longitude: 126.9780,
      zoom: 14,
    };

    mapRef.current?.animateCameraTo(seoulCamera);
  };

  const moveToBusan = () => {
    const busanCamera: Camera = {
      latitude: 35.1796,
      longitude: 129.0756,
      zoom: 12,
      tilt: 45,
      bearing: 30,
    };

    // Include animation options
    mapRef.current?.animateCameraTo({
      ...busanCamera,
      duration: 2000,  // Animate for 2 seconds
      easing: 'EaseInOut',
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <NaverMapView
        ref={mapRef}
        style={{ flex: 1 }}
        initialCamera={{
          latitude: 37.5665,
          longitude: 126.9780,
          zoom: 10,
        }}
      />
      <View style={{ position: 'absolute', top: 50, left: 20 }}>
        <Button title="Move to Seoul" onPress={moveToSeoul} />
        <Button title="Move to Busan" onPress={moveToBusan} />
      </View>
    </View>
  );
};

```

--------------------------------

### Start Development Server with Dev Client

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/index.mdx

Start the Expo development server with the `--dev-client` flag. This is required when using development builds to connect to the running application.

```bash
npx expo start --dev-client
```

--------------------------------

### Install react-native-permissions

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/android/permissions.mdx

Install the react-native-permissions library to handle native permissions in your React Native project.

```bash
pnpm add react-native-permissions
```

--------------------------------

### Complete Location Overlay Example

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/location-overlay.mdx

A comprehensive example demonstrating dynamic control over location overlay visibility and properties, including custom icons and accuracy circle. Includes UI elements for toggling visibility.

```tsx
import React, { useState } from 'react';
import { View, Switch, Text } from 'react-native';
import { NaverMapView } from '@mj-studio/react-native-naver-map';

function LocationOverlayExample() {
  const [showLocation, setShowLocation] = useState(true);
  const [currentPosition, setCurrentPosition] = useState({
    latitude: 37.5665,
    longitude: 126.9780
  });

  return (
    <View style={{ flex: 1 }}>
      <NaverMapView
        style={{ flex: 1 }}
        locationOverlay={{
          isVisible: showLocation,
          position: currentPosition,
          bearing: 0,
          // Main icon
          image: { symbol: 'blue' },
          imageWidth: 36,
          imageHeight: 36,
          anchor: { x: 0.5, y: 0.5 },
          // Sub icon
          subImage: { symbol: 'green' },
          subImageWidth: 60,
          subImageHeight: 60,
          subAnchor: { x: 0.5, y: 0.5 },
          // Accuracy circle
          circleRadius: 100,
          circleColor: '#4285F433',
          circleOutlineWidth: 2,
          circleOutlineColor: '#4285F4AA'
        }}
      />
      <View style={{ padding: 16 }}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Text>Show Location</Text>
          <Switch
            value={showLocation}
            onValueChange={setShowLocation}
          />
        </View>
      </View>
    </View>
  );
}
```

--------------------------------

### Camera vs Region: Camera Example

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/camera-control.mdx

Sets the map's position using precise zoom level and angle control via the 'camera' prop. This can be used for initial setup or controlled updates.

```tsx
import { NaverMapView, Camera } from '@mj-studio/react-native-naver-map';

const camera: Camera = {
  latitude: 37.5665,
  longitude: 126.9780,
  zoom: 14,
  tilt: 30,     // Tilt (0-60 degrees)
  bearing: 45,  // Rotation (0-360 degrees)
};

<NaverMapView
  style={{ flex: 1 }}
  camera={camera}
  // Or set initial value only
  // initialCamera={camera}
/>

```

--------------------------------

### Naver Cloud Services API Integration Example

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/milestone.mdx

Demonstrates how to use the Naver Cloud Services package for Directions and Geocoding APIs with async/await patterns.

```typescript
import { NaverCloudServices } from '@react-native-naver-map/cloud-services';

// Directions API
const route = await NaverCloudServices.directions({
  start: { lat: 37.5665, lng: 126.9780 },
  goal: { lat: 37.5651, lng: 126.9895 },
  option: 'trafast'
});

// Geocoding API
const coordinates = await NaverCloudServices.geocoding({
  query: 'Seoul Jung-gu Sejong-daero 110'
});
```

--------------------------------

### Install expo-build-properties

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/index.mdx

Install the `expo-build-properties` package to enable injecting the Naver Maven repository. This is a prerequisite for native module support in Expo.

```bash
npx expo install expo-build-properties
```

--------------------------------

### Configure Sidebar Structure with meta.json

Source: https://github.com/mym0404/react-native-naver-map/blob/main/CONTRIBUTING.md

Example of a meta.json file used to control the sidebar structure and page ordering within documentation folders.

```json
{
  "title": "Folder Name",
  "pages": ["index", "setup", "---", "advanced"]
}
```

--------------------------------

### Camera vs Region: Region Example

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/camera-control.mdx

Sets the map's position by defining the display area range using the 'region' prop. This can be used for initial setup or controlled updates.

```tsx
import { NaverMapView, Region } from '@mj-studio/react-native-naver-map';

const region: Region = {
  latitude: 37.5665,
  longitude: 126.9780,
  latitudeDelta: 0.05,  // Latitude range
  longitudeDelta: 0.05, // Longitude range
};

<NaverMapView
  style={{ flex: 1 }}
  region={region}
  // Or set initial value only
  // initialRegion={region}
/>

```

--------------------------------

### NaverMapView with Ground Overlay

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/naver-map-view.mdx

Example of rendering a NaverMapView with a ground overlay. Ensure you have the necessary props for NaverMapView and the GroundOverlay component.

```javascript
import React from 'react';
import { StyleSheet, View } from 'react-native';
import NaverMapView, { GroundOverlay, Marker, Path, Polygon, Polyline } from 'react-native-naver-map';

export default function App() {
  return (
    <NaverMapView
      style={{ width: '100%', height: '100%' }}
      showsIndoorLevelPicker={true}
      initialRegion={{ latitude: 37.5666102, longitude: 126.9783881, latitudeDelta: 0.1, longitudeDelta: 0.1 }}
    >
      <Marker coordinate={{ latitude: 37.5666102, longitude: 126.9783881 }} />
      <GroundOverlay
        coordinate={{ latitude: 37.5666102, longitude: 126.9783881 }}
        image={{ url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Naver_Map_logo.svg/1200px-Naver_Map_logo.svg.png' }}
        bounds={{
          southWest: { latitude: 37.5566102, longitude: 126.9683881 },
          northEast: { latitude: 37.5766102, longitude: 126.9883881 },
        }}
        alpha={0.7}
        coordinateBoundary={{ // [!code highlight]
          latitudeDelta: 0.1, // [!code highlight]
          longitudeDelta: 0.1, // [!code highlight] 
        }} // [!code highlight]
        onTap={() => console.log('Ground overlay tapped')} // [!code highlight]
      /> // [!code highlight]
    </NaverMapView>
  );
}
```

--------------------------------

### Implement Marker Clustering

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/optimization.mdx

This example demonstrates how to group numerous markers into clusters to improve map performance. It uses a `groupMarkersByRegion` helper function to manage marker aggregation.

```tsx
import { useMemo } from 'react';
import { NaverMapView, ClusterMarkerProp } from '@mj-studio/react-native-naver-map';

const ClusteredMap = ({ markers }) => {
  const clusters = useMemo(() => {
    // Group markers by region
    const groupedMarkers = groupMarkersByRegion(markers);

    return groupedMarkers.map(group => ({
      width: 40,
      height: 40,
      screenDistance: 100, // Clustering distance (pixels)
      minZoom: 0,
      maxZoom: 16,
      animate: true,
      markers: group.markers.map(marker => ({
        identifier: marker.id,
        latitude: marker.latitude,
        longitude: marker.longitude,
        image: { symbol: 'blue' },
        width: 24,
        height: 24,
      })),
    }));
  }, [markers]);

  return (
    <NaverMapView
      style={{ flex: 1 }}
      clusters={clusters}
      onTapClusterLeaf={({ markerIdentifier }) => {
        console.log('Marker tapped:', markerIdentifier);
      }}
    />
  );
};

const groupMarkersByRegion = (markers) => {
  // Region-based marker grouping logic
  const groups = [];
  const groupSize = 50; // Maximum markers per group

  for (let i = 0; i < markers.length; i += groupSize) {
    groups.push({
      id: `group-${i}`,
      markers: markers.slice(i, i + groupSize),
    });
  }

  return groups;
};

```

--------------------------------

### Batch State Updates with startTransition

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/optimization.mdx

This example utilizes React's `startTransition` API to batch non-urgent state updates, such as filtering visible markers based on camera region. This helps maintain UI responsiveness by deferring less critical updates.

```tsx
import { startTransition } from 'react';

const BatchUpdatedMap = () => {
  const [markers, setMarkers] = useState([]);

  const handleCameraChanged = ({ region }) => {
    // Process non-urgent state updates in batches
    startTransition(() => {
      const visibleMarkers = filterVisibleMarkers(allMarkers, region);
      setMarkers(visibleMarkers);
    });
  };

  return (
    <NaverMapView
      onCameraChanged={handleCameraChanged}
    >
      {markers.map(marker => (
        <NaverMapMarkerOverlay key={marker.id} {...marker} />
      ))}
    </NaverMapView>
  );
};

```

--------------------------------

### Install expo-location

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/permissions.mdx

Install the expo-location package to manage location permissions and access device location within your Expo project.

```bash
npx expo install expo-location
```

--------------------------------

### Controlled Camera Example

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/camera-control.mdx

Demonstrates two-way data binding for camera control using React state and callbacks. The map moves when the state changes, and user interactions update the state.

```tsx
import React, { useState } from 'react';
import { NaverMapView, Camera } from '@mj-studio/react-native-naver-map';

const ControlledCameraExample = () => {
  const [camera, setCamera] = useState<Camera>({
    latitude: 37.5665,
    longitude: 126.9780,
    zoom: 14,
  });

  return (
    <NaverMapView
      style={{ flex: 1 }}
      camera={camera}  // Controlled property: map moves when state changes
      onCameraChanged={({ latitude, longitude, zoom, bearing, tilt }) => {
        // Update state when user manipulates the map
        setCamera({ latitude, longitude, zoom, bearing, tilt });
      }}
    />
  );
};

```

--------------------------------

### Run Local Development Build

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/index.mdx

Start a local development build for iOS or Android using `npx expo run:ios` or `npx expo run:android`. This command builds and launches the app on a connected device or simulator.

```bash
# iOS
npx expo run:ios

# Android
npx expo run:android
```

--------------------------------

### Basic NaverMapPolylineOverlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-polyline-overlay.mdx

Demonstrates how to use the NaverMapPolylineOverlay component to draw a polyline on the map. Ensure you import the necessary components from '@mj-studio/react-native-naver-map'. This example shows how to set coordinates, width, and color for the polyline.

```tsx
import { NaverMapView, NaverMapPolylineOverlay } from '@mj-studio/react-native-naver-map';

function MapWithPolyline() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapPolylineOverlay // [!code highlight:9]
        coords={[
          { latitude: 37.5, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.91 },
          { latitude: 37.52, longitude: 126.92 },
        ]}
        width={5}
        color={'#ff0000'}
        onTap={() => console.log('Polyline tapped')}
      />
    </NaverMapView>
  );
}
```

--------------------------------

### Debounce Camera Change Events

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/camera-control.mdx

Optimize camera change callbacks by using debouncing to limit the frequency of event processing. This example uses lodash's debounce function with a 300ms delay.

```tsx
import { useMemo } from 'react';
import { debounce } from 'lodash';

const MapWithDebouncedCamera = () => {
  const debouncedCameraChange = useMemo(
    () => debounce((cameraData) => {
      // Actual logic to process
      console.log('Debounced camera change:', cameraData);
    }, 300),
    []
  );

  return (
    <NaverMapView
      onCameraChanged={debouncedCameraChange}
      // ... other props
    />
  );
};
```

--------------------------------

### Basic Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-polyline-overlay.mdx

Demonstrates how to use the NaverMapPolylineOverlay component to draw a polyline on the map with basic configurations.

```APIDOC
## Basic Usage

```tsx
import { NaverMapView, NaverMapPolylineOverlay } from '@mj-studio/react-native-naver-map';

function MapWithPolyline() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapPolylineOverlay 
        coords={[
          { latitude: 37.5, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.91 },
          { latitude: 37.52, longitude: 126.92 },
        ]}
        width={5}
        color={'#ff0000'}
        onTap={() => console.log('Polyline tapped')}
      />
    </NaverMapView>
  );
}
```
```

--------------------------------

### Prebuild Native Project Files

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/index.mdx

Run the `npx expo prebuild` command for both Android and iOS to generate the necessary native project files. This step is crucial after modifying `app.json`.

```bash
npx expo prebuild -p android
npx expo prebuild -p ios
```

--------------------------------

### Basic Clustering Implementation

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/marker-clustering.mdx

Demonstrates how to set up basic marker clustering in a Naver Map component. It involves defining marker data and configuring the `clusters` prop with properties like screen distance and zoom levels.

```tsx
import React, { useState, useMemo } from 'react';
import { View } from 'react-native';
import { NaverMapView, type ClusterMarkerProp } from '@mj-studio/react-native-naver-map';

const ClusteredMapExample = () => {
  // Generate marker data
  const clusterMarkers = useMemo<ClusterMarkerProp[]>(() => {
    return generateMarkerData().map((marker, index) => ({
      identifier: `marker-${index}`,
      latitude: marker.latitude,
      longitude: marker.longitude,
      image: { httpUri: `https://picsum.photos/32/32?random=${index}` },
      width: 32,
      height: 32,
    }));
  }, []);

  // Cluster configuration
  const clusters = useMemo(() => [
    {
      width: 50,          // Width of cluster marker
      height: 50,         // Height of cluster marker
      markers: clusterMarkers,
      screenDistance: 40, // Screen distance criteria for clustering (pixels)
      minZoom: 5,         // Minimum zoom level for clustering
      maxZoom: 18,        // Maximum zoom level for clustering
      animate: true,      // Cluster expand/collapse animation
    }
  ], [clusterMarkers]);

  return (
    <NaverMapView
      style={{ flex: 1 }}
      initialCamera={{
        latitude: 37.5665,
        longitude: 126.9780,
        zoom: 10,
      }}
      clusters={clusters}
      onTapClusterLeaf={({ markerIdentifier }) => {
        console.log('Marker clicked:', markerIdentifier);
      }}
    />
  );
};

```

--------------------------------

### Directions API Interface Definition

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/milestone.mdx

Defines the TypeScript interfaces for the Directions API, including options for start, goal, waypoints, and route preferences.

```typescript
interface DirectionsOptions {
  start: Coordinate;
  goal: Coordinate;
  waypoints?: Coordinate[];
  option?: 'trafast' | 'tracomfort' | 'traoptimal';
  avoid?: ('toll' | 'ferry')[];
}

interface DirectionsResult {
  route: {
    trafast: RouteInfo[];
    tracomfort: RouteInfo[];
    traoptimal: RouteInfo[];
  };
}
```

--------------------------------

### Basic NaverMapCircleOverlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-circle-overlay.mdx

Demonstrates how to render a basic circle overlay on a Naver map. Ensure NaverMapView is set up correctly. Imports NaverMapView and NaverMapCircleOverlay.

```tsx
import { NaverMapView, NaverMapCircleOverlay } from '@mj-studio/react-native-naver-map';

function MapWithCircle() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapCircleOverlay // [!code highlight:7]
        latitude={37.5665}
        longitude={126.9780}
        radius={1000}
        color={'#ff00ff33'}
        outlineColor={'#ff00ff'}
        outlineWidth={2}
      />
    </NaverMapView>
  );
}
```

--------------------------------

### NaverMapPathOverlay Basic Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-path-overlay.mdx

Demonstrates the basic usage of the NaverMapPathOverlay component, including setting coordinates, width, color, progress, passed color, outline width, and an onTap handler.

```APIDOC
## NaverMapPathOverlay

### Description

Component for displaying path overlays on the map. You can display paths using coordinate arrays and configure path color, thickness, patterns, and more.

### Usage

```tsx
import { NaverMapView, NaverMapPathOverlay } from '@mj-studio/react-native-naver-map';

function MapWithPath() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapPathOverlay 
        coords={[
          { latitude: 37.5, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.91 },
          { latitude: 37.52, longitude: 126.92 },
        ]}
        width={8}
        color={'white'}
        progress={0.5}
        passedColor={'black'}
        outlineWidth={1}
        onTap={() => console.log('Path tapped')}
      />
    </NaverMapView>
  );
}
```

### Props

`NaverMapPathOverlayProps` are available for configuration. Key props include:

- **coords** (Array<{ latitude: number, longitude: number }>): An array of coordinates defining the path.
- **width** (number): The thickness of the path line.
- **color** (string): The color of the path line.
- **progress** (number): Represents the progress along the path (0 to 1).
- **passedColor** (string): The color of the path that has been 'passed' based on the progress.
- **outlineWidth** (number): The width of the outline around the path line.
- **onTap** (function): A callback function executed when the path is tapped.
```

--------------------------------

### NaverMapArrowheadPathOverlay Basic Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-arrowhead-path-overlay.mdx

Demonstrates the basic usage of the NaverMapArrowheadPathOverlay component, including its essential props for defining the path and its appearance.

```APIDOC
## NaverMapArrowheadPathOverlay

### Description
Component for displaying arrow path overlays on the map.

### Props
- **coords** (Array<object>) - Required - An array of coordinate objects defining the path.
- **headSizeRatio** (number) - Optional - Controls the size ratio of the arrow head.
- **width** (number) - Optional - The width of the path line.
- **color** (string) - Optional - The color of the path line.
- **outlineColor** (string) - Optional - The color of the path outline.
- **outlineWidth** (number) - Optional - The width of the path outline.
- **onTap** (function) - Optional - Callback function when the path is tapped.

### Usage Example
```tsx
import { NaverMapView, NaverMapArrowheadPathOverlay } from '@mj-studio/react-native-naver-map';

function MapWithArrowPath() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapArrowheadPathOverlay 
        coords={[
          { latitude: 37.5, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.91 },
          { latitude: 37.52, longitude: 126.92 },
        ]}
        headSizeRatio={2.5}
        width={8}
        color={'red'}
        outlineColor={'blue'}
        outlineWidth={2}
        onTap={() => console.log('Arrow path tapped')}
      />
    </NaverMapView>
  );
}
```
```

--------------------------------

### Basic Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-polygon-overlay.mdx

Demonstrates how to use the NaverMapPolygonOverlay component to draw a polygon on the map with specified coordinates, fill color, and outline.

```APIDOC
## Basic Usage

```tsx
import { NaverMapView, NaverMapPolygonOverlay } from '@mj-studio/react-native-naver-map';

function MapWithPolygon() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapPolygonOverlay 
        coords={[
          { latitude: 37.5, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.91 },
          { latitude: 37.52, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.89 },
        ]}
        color={'#00ff0033'}
        outlineColor={'#00ff00'}
        outlineWidth={2}
        onTap={() => console.log('Polygon tapped')}
      />
    </NaverMapView>
  );
}
```
```

--------------------------------

### Basic NaverMapMarkerOverlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-marker-overlay.mdx

Demonstrates how to render a basic marker on the map with coordinates, a caption, and an onTap event handler. Ensure NaverMapView is set up correctly.

```tsx
import { NaverMapView, NaverMapMarkerOverlay } from '@mj-studio/react-native-naver-map';

function MapWithMarker() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapMarkerOverlay // [!code highlight:6]
        latitude={37.5665}
        longitude={126.9780}
        caption={{ text: 'Seoul City Hall' }}
        onTap={() => console.log('Marker tapped')}
      />
    </NaverMapView>
  );
}
```

--------------------------------

### Package Structure Plan

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/milestone.mdx

Defines the modular structure for separating core map components, cloud services, and utilities into distinct packages.

```txt
@react-native-naver-map/
├── core/                 # Basic map components (current package)
├── cloud-services/       # Naver Cloud API integration
└── utils/               # Common utilities
```

--------------------------------

### Configure Naver SDK Key in Info.plist

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/ios/index.mdx

Add your Naver Cloud Platform Client ID to the Info.plist file for map functionality. Ensure you replace the placeholder with your actual Client ID.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>NMFNcpKeyId</key>
  <string>YOUR_CLIENT_ID_HERE</string>
  <!-- (legacy) For map API customers who used AI NAVER API before April 17, 2024 -->
  <!-- https://www.ncloud.com/support/notice/all/1930?searchKeyword=map&page=1 -->
  <key>NMFClientId</key>
  <string>YOUR_CLIENT_ID_HERE</string>
</dict>
</plist>
```

--------------------------------

### Basic NaverMapGroundOverlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-ground-overlay.mdx

Demonstrates how to add a ground overlay to a Naver map. Ensure you have the 'thumbnail' asset available. The overlay is interactive and logs a message when tapped.

```tsx
import { NaverMapView, NaverMapGroundOverlay } from '@mj-studio/react-native-naver-map';

function MapWithGroundOverlay() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapGroundOverlay // [!code highlight:9]
        image={{ assetName: 'thumbnail' }}
        region={{
          latitude: 37.5,
          longitude: 126.9,
          latitudeDelta: 0.1,
          longitudeDelta: 0.1,
        }}
        onTap={() => console.log('Ground overlay tapped')}
      />
    </NaverMapView>
  );
}
```

--------------------------------

### Configure app.json for Naver Map

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/index.mdx

Configure the `app.json` file to include the Naver Map config plugin and the `expo-build-properties` plugin. Ensure you replace `YOUR_CLIENT_ID_HERE` with your actual Naver Cloud Platform Client ID.

```json
{
  "expo": {
    "name": "your-app-name",
    "plugins": [
      [
        "@mj-studio/react-native-naver-map",
        {
          "client_id": "YOUR_CLIENT_ID_HERE"
        }
      ],
      [
        "expo-build-properties",
        {
          "android": {
            "extraMavenRepos": ["https://repository.map.naver.com/archive/maven"]
          }
        }
      ]
    ]
  }
}
```

--------------------------------

### Basic NaverMapMultiPathOverlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-multi-path-overlay.mdx

Demonstrates how to use the NaverMapMultiPathOverlay component to display two separate paths with different colors. Ensure you have imported NaverMapView and NaverMapMultiPathOverlay. The component takes an array of pathParts, where each part defines its own coordinates and color.

```tsx
import { NaverMapView, NaverMapMultiPathOverlay } from '@mj-studio/react-native-naver-map';

function MapWithMultiPath() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapMultiPathOverlay 
        width={40}
        patternInterval={120}
        progress={0.5}
        outlineWidth={10}
        patternImage={{ symbol: 'blue' }}
        pathParts={[
          {
            coords: [
              { latitude: 37.5, longitude: 126.9 },
              { latitude: 37.51, longitude: 126.91 },
              { latitude: 37.52, longitude: 126.92 },
            ],
            color: '#ff0000',
          },
          {
            coords: [
              { latitude: 37.52, longitude: 126.92 },
              { latitude: 37.53, longitude: 126.93 },
              { latitude: 37.54, longitude: 126.94 },
            ],
            color: '#00ff00',
          },
        ]}
        onTap={() => console.log('Multi path tapped')}
      />
    </NaverMapView>
  );
}
```

--------------------------------

### Zoom Level Control for Overlays

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/common-overlay-usage.mdx

Demonstrates how to control overlay visibility based on zoom levels using minZoom, maxZoom, and inclusive flags. This allows for dynamic display of overlays at specific zoom ranges.

```tsx
<NaverMapMarkerOverlay
  // Display only between zoom levels 10-15
  minZoom={10}
  maxZoom={15}
  isMinZoomInclusive={true}
  isMaxZoomInclusive={false}
/>

<NaverMapPolygonOverlay
  // Display only at zoom level 8 and above
  minZoom={8}
  // Include zoom level 8
  isMinZoomInclusive={true}
/>
```

--------------------------------

### NaverMapMarkerOverlay Basic Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-marker-overlay.mdx

Demonstrates the basic implementation of the NaverMapMarkerOverlay component, showing how to set latitude, longitude, caption, and an onTap event handler.

```APIDOC
## NaverMapMarkerOverlay

### Description

Displays a marker on the Naver map at a specified latitude and longitude. Supports customizable captions and tap event handling.

### Props

- **latitude** (number) - Required - The latitude coordinate for the marker.
- **longitude** (number) - Required - The longitude coordinate for the marker.
- **caption** (CaptionType) - Optional - Configuration for the marker's caption.
- **subCaption** (SubCaptionType) - Optional - Configuration for the marker's sub-caption.
- **onTap** (function) - Optional - Callback function executed when the marker is tapped.

### Example

```tsx
import { NaverMapView, NaverMapMarkerOverlay } from '@mj-studio/react-native-naver-map';

function MapWithMarker() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapMarkerOverlay 
        latitude={37.5665}
        longitude={126.9780}
        caption={{ text: 'Seoul City Hall' }}
        onTap={() => console.log('Marker tapped')}
      />
    </NaverMapView>
  );
}
```
```

--------------------------------

### Configure EAS Build

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/index.mdx

Configure EAS Build for your project by running `npx eas build:configure`. This command sets up the necessary configuration files for cloud builds.

```bash
npx eas build:configure
```

--------------------------------

### Configure Info.plist for Location Permissions

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/ios/permissions.mdx

Add descriptions for location usage to your Info.plist file. This is required for iOS to understand why your app needs location access.

```xml
<plist version="1.0">
<dict>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>{{usage description}}</string>
  <key>NSLocationTemporaryUsageDescriptionDictionary</key>
  <dict>
    <key>{{your purpose key}}</key>
    <string>{{usage description}}</string>
  </dict>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>{{usage description}}</string>
</dict>
</plist>
```

--------------------------------

### Add Naver SDK Key to AndroidManifest.xml

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/android/index.mdx

Add your issued Client ID to `AndroidManifest.xml` for map API authentication. Replace `YOUR_CLIENT_ID_HERE` with your actual Client ID.

```xml
<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.NCP_KEY_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
        <!-- (legacy) For map API customers who used AI NAVER API before April 17, 2024 -->
        <!-- https://www.ncloud.com/support/notice/all/1930?searchKeyword=map&page=1 -->
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>
```

--------------------------------

### NaverMapGroundOverlay Component

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-ground-overlay.mdx

This snippet demonstrates the basic usage of the NaverMapGroundOverlay component, showing how to import and render it within a NaverMapView with essential props like `image` and `region`.

```APIDOC
## NaverMapGroundOverlay Component

### Description

Displays ground overlays on the map, allowing images to be overlaid on specific geographical areas.

### Props

- **image** (ImageSource | ImageURISource) - Required - The image to display as the ground overlay. Can be an asset name or a URI.
- **region** (LatLngBounds) - Required - The geographical region where the ground overlay will be displayed. This is an object with `latitude`, `longitude`, `latitudeDelta`, and `longitudeDelta`.
- **onTap** (function) - Optional - A callback function that is invoked when the ground overlay is tapped.
```

--------------------------------

### Event Handling for Overlays

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/common-overlay-usage.mdx

Shows how to handle the onTap event for overlays, allowing for interactive responses when an overlay is tapped. This is useful for displaying details or changing application state.

```tsx
<NaverMapCircleOverlay
  onTap={() => {
    console.log('Circle overlay tapped');
    // Show details, change state, etc.
  }}
/>
```

--------------------------------

### Lint and Type Check Code

Source: https://github.com/mym0404/react-native-naver-map/blob/main/CONTRIBUTING.md

Verifies code quality by running TypeScript type checking and ESLint for linting. This command should be run from the project root.

```sh
pnpm run lint
```

--------------------------------

### Basic NaverMapPathOverlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-path-overlay.mdx

Displays a path overlay on the map using an array of coordinates. Configure properties like width, color, progress, passed color, outline width, and tap events.

```tsx
import { NaverMapView, NaverMapPathOverlay } from '@mj-studio/react-native-naver-map';

function MapWithPath() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapPathOverlay // [!code highlight:12]
        coords={[
          { latitude: 37.5, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.91 },
          { latitude: 37.52, longitude: 126.92 },
        ]}
        width={8}
        color={'white'}
        progress={0.5}
        passedColor={'black'}
        outlineWidth={1}
        onTap={() => console.log('Path tapped')}
      />
    </NaverMapView>
  );
}
```

--------------------------------

### Marker with Local Image Resource

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/common-overlay-usage.mdx

Uses a local image file from the project's assets as the marker image. It's recommended to specify width and height for consistent sizing across different build environments.

```tsx
<NaverMapMarkerOverlay
  latitude={37.5665}
  longitude={126.9780}
  image={require('./assets/marker.png')}
  width={40}
  height={40}
/>
```

--------------------------------

### Create EAS Development Build

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/expo/index.mdx

Create a development build using EAS Build for either iOS or Android. This command initiates a cloud build process for testing purposes.

```bash
# Create Development Build
npx eas build --profile development --platform ios
npx eas build --profile development --platform android
```

--------------------------------

### Basic Location Overlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/location-overlay.mdx

Displays a location overlay with basic visibility and a fixed position. Ensure location permissions are configured.

```tsx
import { NaverMapView } from '@mj-studio/react-native-naver-map';

function MapWithLocation() {
  return (
    <NaverMapView
      locationOverlay={{
        isVisible: true,
        position: {
          latitude: 37.5665,
          longitude: 126.9780
        }
      }}
    />
  );
}
```

--------------------------------

### Handling Individual Marker Clicks in Clusters

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/marker-clustering.mdx

Illustrates how to capture tap events for individual markers that have been part of a cluster. The `onTapClusterLeaf` prop provides the `markerIdentifier` to identify which specific marker was clicked.

```tsx
<NaverMapView
  clusters={clusters}
  onTapClusterLeaf={({ markerIdentifier }) => {
    // Use markerIdentifier to display detailed information about the marker
    const markerData = findMarkerById(markerIdentifier);
    showMarkerDetail(markerData);
  }}
/>
```

--------------------------------

### Configure Podfile for react-native-permissions

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/ios/permissions.mdx

When using the react-native-permissions library, specify the required location permissions in your Podfile to ensure they are correctly linked.

```ruby
setup_permissions([
  'LocationAccuracy',
  'LocationAlways',
  'LocationWhenInUse',
  ...
])
```

--------------------------------

### Add Maven Repository to build.gradle

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/installation/android/index.mdx

Add the Naver Maven repository to your `android/build.gradle` file to enable dependency resolution.

```groovy
allprojects {
    repositories {
        maven {
            url "https://repository.map.naver.com/archive/maven"
        }
    }
}
```

--------------------------------

### Multiple Cluster Groups Configuration

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/marker-clustering.mdx

Shows how to configure multiple, distinct cluster groups simultaneously within a single map view. Each group can have its own marker set, dimensions, and clustering parameters.

```tsx
const multiClusters = useMemo(() => [
  {
    // First cluster group - regular markers
    width: 40,
    height: 40,
    markers: regularMarkers,
    screenDistance: 50,
    minZoom: 5,
    maxZoom: 15,
    animate: true,
  },
  {
    // Second cluster group - special markers
    width: 60,
    height: 60,
    markers: specialMarkers,
    screenDistance: 80,
    minZoom: 8,
    maxZoom: 20,
    animate: false,
  }
], [regularMarkers, specialMarkers]);
```

--------------------------------

### Basic NaverMapView Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/naver-map-view.mdx

Renders a Naver Map with initial camera position and layer group settings. Import NaverMapView from '@mj-studio/react-native-naver-map'.

```tsx
import { NaverMapView } from '@mj-studio/react-native-naver-map';

function MyMap() {
  return (
    <NaverMapView
      style={{ flex: 1 }}
      initialCamera={{
        latitude: 37.50497126,
        longitude: 127.04905021,
        zoom: 14,
      }}
      mapType="Basic"
      layerGroups={{
        BUILDING: true,
        TRAFFIC: false,
      }}
    />
  );
}
```

--------------------------------

### NaverMapMultiPathOverlay

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-multi-path-overlay.mdx

Displays multiple paths as a single overlay on the map. You can define individual path segments with their own coordinates and colors.

```APIDOC
## NaverMapMultiPathOverlay

### Description

This component renders multiple path segments on the map, each defined by an array of coordinates and a specific color. It allows for simultaneous visualization of several paths as one overlay.

### Props

- **width** (number) - Optional - The width of the path lines.
- **patternInterval** (number) - Optional - The interval for repeating patterns on the path.
- **progress** (number) - Optional - Indicates the progress along the path, often used for animations.
- **outlineWidth** (number) - Optional - The width of the outline around the path.
- **patternImage** (object) - Optional - Defines the image or symbol to be used as a pattern on the path. Example: `{ symbol: 'blue' }`.
- **pathParts** (array) - Required - An array of objects, where each object defines a path segment.
  - **coords** (array) - Required - An array of coordinate objects (`{ latitude: number, longitude: number }`) defining the path segment.
  - **color** (string) - Required - The color of the path segment (e.g., '#ff0000').
- **onTap** (function) - Optional - A callback function that is invoked when the multi-path overlay is tapped.
```

--------------------------------

### NaverMapView with Various Marker Types

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/naver-map-view.mdx

Demonstrates adding different types of markers to the Naver Map, including symbol, local asset, native asset, HTTP image, and custom view markers.

```tsx
import { NaverMapView, NaverMapMarkerOverlay } from '@mj-studio/react-native-naver-map';
import { View, Text } from 'react-native';

function MapWithAllMarkerTypes() {
  return (
    <NaverMapView
      style={{ flex: 1 }}
      initialCamera={{
        latitude: 33.39530773,
        longitude: 126.54656715029,
        zoom: 8,
      }}
    >
      {/* 1. Symbol Marker */}
      <NaverMapMarkerOverlay
        latitude={33.39530773}
        longitude={126.54656715029}
        image={{ symbol: 'green' }}
        anchor={{ x: 0.5, y: 1 }}
        caption={{ text: 'Symbol Marker' }}
      />

      {/* 2. Local Asset Marker */}
      <NaverMapMarkerOverlay
        latitude={33.41}
        longitude={126.55}
        image={require('./logo.png')}
        width={50}
        height={50}
        caption={{ text: 'Local Asset' }}
      />

      {/* 3. Native Asset Marker */}
      <NaverMapMarkerOverlay
        latitude={33.35}
        longitude={126.53}
        image={{ assetName: 'thumbnail' }}
        width={40}
        height={40}
        caption={{ text: 'Native Asset' }}
      />

      {/* 4. HTTP Image Marker */}
      <NaverMapMarkerOverlay
        latitude={33.32}
        longitude={126.58}
        image={{ httpUri: 'https://picsum.photos/100/100' }}
        width={50}
        height={50}
        caption={{ text: 'HTTP Image' }}
      />

      {/* 5. Custom View Marker */}
      <NaverMapMarkerOverlay
        latitude={33.38}
        longitude={126.51}
        width={80}
        height={80}
      >
        <View
          collapsable={false}
          style={{
            backgroundColor: 'white',
            padding: 10,
            borderRadius: 8,
            shadowColor: '#000',
            shadowOpacity: 0.2,
          }}
        >
          <Text>Custom View</Text>
        </View>
      </NaverMapMarkerOverlay>
    </NaverMapView>
  );
}
```

--------------------------------

### Basic NaverMapPolygonOverlay Usage

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/naver-map-polygon-overlay.mdx

Renders a simple polygon overlay on the Naver map. Ensure you have imported NaverMapView and NaverMapPolygonOverlay. The polygon is defined by an array of latitude and longitude coordinates.

```tsx
import { NaverMapView, NaverMapPolygonOverlay } from '@mj-studio/react-native-naver-map';

function MapWithPolygon() {
  return (
    <NaverMapView style={{ flex: 1 }}>
      <NaverMapPolygonOverlay // [!code highlight:11]
        coords={[
          { latitude: 37.5, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.91 },
          { latitude: 37.52, longitude: 126.9 },
          { latitude: 37.51, longitude: 126.89 },
        ]}
        color={'#00ff0033'}
        outlineColor={'#00ff00'}
        outlineWidth={2}
        onTap={() => console.log('Polygon tapped')}
      />
    </NaverMapView>
  );
}
```

--------------------------------

### Marker with Network Image

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/components/overlays/common-overlay-usage.mdx

Uses an image from a network URL as the marker image. The `httpUri` property should point to a valid image URL. Specify width and height for consistent sizing.

```tsx
<NaverMapMarkerOverlay
  latitude={37.5665}
  longitude={126.9780}
  image={{ httpUri: 'https://example.com/marker.png' }}
  width={40}
  height={40}
/>
```

--------------------------------

### Fit Map to All Markers

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/camera-control.mdx

This function dynamically adjusts the camera to fit all provided markers on the map. It handles cases with one marker (moves to it), two markers (uses `animateCameraWithTwoCoords`), or multiple markers (calculates the bounding region).

```tsx
const fitToMarkers = (markers: Array<{ latitude: number; longitude: number }>) => {
  if (markers.length === 0) return;

  if (markers.length === 1) {
    // If one marker, move to that location
    mapRef.current?.animateCameraTo({
      latitude: markers[0].latitude,
      longitude: markers[0].longitude,
      zoom: 15,
    });
  } else if (markers.length === 2) {
    // If two markers, move to area including both points
    mapRef.current?.animateCameraWithTwoCoords({
      coord1: markers[0],
      coord2: markers[1],
      paddingTop: 100,
      paddingBottom: 100,
      paddingLeft: 100,
      paddingRight: 100,
    });
  } else {
    // If multiple markers, calculate area including all markers
    const latitudes = markers.map(m => m.latitude);
    const longitudes = markers.map(m => m.longitude);

    const minLat = Math.min(...latitudes);
    const maxLat = Math.max(...latitudes);
    const minLng = Math.min(...longitudes);
    const maxLng = Math.max(...longitudes);

    const center = {
      latitude: (minLat + maxLat) / 2,
      longitude: (minLng + maxLng) / 2,
    };

    const delta = {
      latitudeDelta: (maxLat - minLat) * 1.2, // Add extra space
      longitudeDelta: (maxLng - minLng) * 1.2,
    };

    mapRef.current?.animateRegionTo({
      ...center,
      ...delta,
    });
  }
};
```

--------------------------------

### Location Overlay with Position and Bearing

Source: https://github.com/mym0404/react-native-naver-map/blob/main/docs/content/docs/location-overlay.mdx

Configures the location overlay's position and rotation. The bearing is set in degrees.

```tsx
<NaverMapView
  locationOverlay={{
    isVisible: true,
    position: {
      latitude: 37.5665,
      longitude: 126.9780
    },
    bearing: 45 // Rotation angle in degrees
  }}
/>
```