### Install angular-yandex-maps-v3 and Types

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/angular-yandex-maps-v3/README.md

Install the library and its development types using npm. Ensure compatibility with your Angular version.

```bash
npm install angular-yandex-maps-v3
npm install @yandex/ymaps3-types --save-dev
```

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

### Install angular-yandex-maps-v3 and Types

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Install the library and its development types. The types package requires `skipLibCheck` and `types` configuration in tsconfig.json.

```bash
npm install angular-yandex-maps-v3
npm install @yandex/ymaps3-types --save-dev
```

```jsonc
// tsconfig.json — required for @yandex/ymaps3-types (uses React/Vue typings internally)
{
  "compilerOptions": {
    "skipLibCheck": true,
    "types": ["@yandex/ymaps3-types"]
  }
}
```

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

### SCAM Module Setup with API Key

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/angular-yandex-maps-v3/README.md

Configure Yandex Maps with an API key within an Angular module using the SCAM (Single Component Angular Module) pattern.

```typescript
import { NgModule } from '@angular/core';
import {
  YConfig,
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  provideYConfig,
} from 'angular-yandex-maps-v3';

const config: YConfig = {
  apikey: 'API_KEY',
};

@NgModule({
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective],
  providers: [provideYConfig(config)],
})
export class AppModule {}
```

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

### Access Map Instance and API via `ready` Event

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/docsifier/assets/v3/faq.md

Listen to the `ready` output event on the `y-map` component to get access to the created map instance and the global Yandex Maps API object. The event payload conforms to the `YReadyEvent` interface.

```html
<y-map (ready)="onMapReady($event)"></y-map>
```

```typescript
export class AppComponent {
  onMapReady(event: YReadyEvent<YMap>): void {
    const { ymaps3, entity } = event;
  }
}
```

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

### Configure YMap Component Properties

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/docsifier/assets/v3/faq.md

Use the `props` input to pass configuration options to the `y-map` component, mirroring the Yandex.Maps JavaScript API class arguments. This example sets the initial location and theme.

```html
<y-map
  [props]="{
    location: { center: [-0.127696, 51.507351],
    zoom: 10,
    },
    theme: 'dark',
  }">
  <y-map-default-scheme-layer />
</y-map>
```

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

### Standalone Component Setup

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/angular-yandex-maps-v3/README.md

Import and use YMapComponent and YMapDefaultSchemeLayerDirective in a standalone Angular component.

```typescript
import { Component } from '@angular/core';
import { YMapComponent, YMapDefaultSchemeLayerDirective } from 'angular-yandex-maps-v3';

@Component({
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective],
})
export class AppComponent {}
```

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

### Build Library Version

Source: https://github.com/ddubrava/angular-yandex-maps/wiki/Major-Release-Checklist

Execute this script to build the library for version 2.

```sh
npm run build:lib:v2
```

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

### Run Major Release Command

Source: https://github.com/ddubrava/angular-yandex-maps/wiki/Major-Release-Checklist

This command initiates the major release process, requiring a GITHUB_TOKEN environment variable.

```sh
npm run release -- --specifier major
```

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

### Configure Yandex Maps API with provideYConfig (Standalone)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Configure the Yandex.Maps API key and language using `provideYConfig` in the application's configuration file for standalone applications.

```typescript
// app.config.ts — standalone application
import { ApplicationConfig } from '@angular/core';
import { provideYConfig, YConfig } from 'angular-yandex-maps-v3';

const config: YConfig = {
  apikey: 'YOUR_API_KEY',
  lang: 'en_US', // optional, defaults to 'ru_RU'
};

export const appConfig: ApplicationConfig = {
  providers: [provideYConfig(config)],
};

```

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

### Root Map Component (<y-map>)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

The entry point for any map. Requires a 'location' prop with 'center' and 'zoom'. Emits a 'ready' event with the YMap instance.

```typescript
import { Component } from '@angular/core';
import {
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  YReadyEvent,
} from 'angular-yandex-maps-v3';
import type { YMap } from '@yandex/ymaps3-types';

@Component({
  selector: 'app-root',
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective],
  template: `
    <div style="width: 800px; height: 500px;">
      <y-map
        [props]="{
          location: { center: [-0.127696, 51.507351], zoom: 10 },
          theme: 'dark',
        }"
        (ready)="onMapReady($event)"
      >
        <y-map-default-scheme-layer />
      </y-map>
    </div>
  `,
})
export class AppComponent {
  onMapReady(event: YReadyEvent<YMap>) {
    // event.entity — the ymaps3.YMap instance
    // event.ymaps3 — the global ymaps3 object
    console.log('Map ready:', event.entity);
  }
}
```

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

### Standalone App Configuration with API Key

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/angular-yandex-maps-v3/README.md

Provide Yandex Maps configuration, including the API key, in the application's configuration file for standalone applications.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideYConfig, YConfig } from 'angular-yandex-maps-v3';

const config: YConfig = {
  apikey: 'API_KEY',
};

export const appConfig: ApplicationConfig = {
  providers: [provideYConfig(config)],
};
```

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

### Configure Map Component State and Options

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/docsifier/assets/v2/faq.md

Set the initial state and options for the map component using input properties. Ensure the state and options objects conform to the ymaps API types.

```html
<ya-map [state]="state" [options]="options"></ya-map>
```

```typescript
export class AppComponent {
  state: ymaps.IMapState = {
    center: [55.751952, 37.600739],
    zoom: 3,
  };

  options: ymaps.IMapOptions = {
    maxZoom: 5,
  };
}
```

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

### Configure Yandex Maps API with provideYConfig (NgModule)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Configure the Yandex.Maps API key using `provideYConfig` within an NgModule. This approach is suitable for NgModule-based applications or SCAMs.

```typescript
// app.module.ts — NgModule / SCAM approach
import { NgModule } from '@angular/core';
import { YMapComponent, YMapDefaultSchemeLayerDirective, provideYConfig } from 'angular-yandex-maps-v3';

@NgModule({
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective],
  providers: [provideYConfig({ apikey: 'YOUR_API_KEY' })],
})
export class AppModule {}

```

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

### Access Map Instance and API on Ready

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/docsifier/assets/v2/faq.md

Retrieve the map instance and the global Yandex Maps API object when the map component is ready. This is useful for interacting with the map programmatically.

```html
<ya-map (ready)="onMapReady($event)"></ya-map>
```

```typescript
export class AppComponent {
  onMapReady(event: YaReadyEvent<ymaps.Map>): void {
    const { ymaps, target } = event;
  }
}
```

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

### Set Map Center and Zoom Directly

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/docsifier/assets/v2/faq.md

Configure the map's center coordinates and zoom level directly via input properties for simpler use cases.

```html
<ya-map [center]="[55.751952, 37.600739]" [zoom]="5"></ya-map>
```

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

### Handling Map and Layer Ready Events (`YReadyEvent`)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

The `(ready)` event emits a `YReadyEvent` object, providing access to the underlying Yandex.Maps entity and the `ymaps3` namespace for imperative operations. This is useful for tasks like programmatically changing the map's location or accessing layer details.

```typescript
import { Component } from '@angular/core';
import { YMapComponent, YMapDefaultSchemeLayerDirective, YReadyEvent } from 'angular-yandex-maps-v3';
import type { YMap } from '@yandex/ymaps3-types';

@Component({
  selector: 'app-root',
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective],
  template: ફો>
    <div style="width:800px; height:500px;">
      <y-map
        [props]="{ location: { center: [37.617617, 55.755819], zoom: 12 } }"
        (ready)="onMapReady($event)"
      >
        <y-map-default-scheme-layer (ready)="onLayerReady($event)" />
      </y-map>
    </div>
  `,
})
export class AppComponent {
  onMapReady(event: YReadyEvent<YMap>) {
    // Imperative access: pan the map programmatically
    event.entity.setLocation({ center: [0, 51.5], zoom: 8, duration: 500 });
  }

  onLayerReady(event: YReadyEvent) {
    console.log('Layer entity:', event.entity);
    console.log('ymaps3 version:', event.ymaps3.version);
  }
}
```

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

### Update Packages to Latest Versions

Source: https://github.com/ddubrava/angular-yandex-maps/wiki/Major-Release-Checklist

Use this command to update all project packages to their latest versions before proceeding with the release.

```sh
npx npm-check-updates -u
```

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

### Dynamic Yandex Maps API Configuration with Observable

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Provide dynamic Yandex.Maps API configuration using an RxJS Observable. This allows for runtime changes to settings like language or API key, triggering map reinitialization.

```typescript
// Static config
import { provideYConfig, YConfig } from 'angular-yandex-maps-v3';

export const appConfig: ApplicationConfig = {
  providers: [
    provideYConfig({ apikey: 'YOUR_API_KEY', lang: 'en_US' }),
  ],
};

// Dynamic (Observable) config — e.g. language toggle
import { BehaviorSubject } from 'rxjs';

const config$ = new BehaviorSubject<YConfig>({ apikey: 'YOUR_API_KEY', lang: 'ru_RU' });

export const appConfig: ApplicationConfig = {
  providers: [provideYConfig(config$)],
};

// Toggle language at runtime:
config$.next({ apikey: 'YOUR_API_KEY', lang: 'en_US' });
// The map is automatically reinitialized with the new language.

```

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

### Map Container CSS Styling

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/angular-yandex-maps-v3/README.md

Define the dimensions for the map container using CSS. Ensure the container has a defined width and height.

```css
.container {
  width: 1000px;
  height: 500px;
}
```

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

### Custom Map Layer (<y-map-layer>)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Wraps `ymaps3.YMapLayer` for custom tile or marker layers. Allows explicit z-index control.

```html
<y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 10 } }">
  <y-map-default-scheme-layer />

  <!-- Add a custom markers layer above the default tiles -->
  <y-map-layer [props]="{ type: 'markers', zIndex: 1800 }" />
</y-map>
```

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

### Map Controls Container

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Use `<y-map-controls>` to group UI controls on the map. It must be nested within `<y-map>` and accepts a `position` prop for placement.

```html
<y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 10 } }">
  <y-map-default-scheme-layer />

  <!-- Top-left: zoom buttons -->
  <y-map-controls [props]="{ position: 'top left' }">
    <y-map-zoom-control-button />
  </y-map-controls>

  <!-- Top-right: geolocation -->
  <y-map-controls [props]="{ position: 'top right' }">
    <y-map-geolocation-control />
  </y-map-controls>

  <!-- Bottom-left: scale bar -->
  <y-map-controls [props]="{ position: 'bottom left' }">
    <y-map-scale-control />
  </y-map-controls>

  <!-- Bottom-right: open in Yandex Maps button -->
  <y-map-controls [props]="{ position: 'bottom right' }">
    <y-map-open-maps-button />
  </y-map-controls>
</y-map>
```

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

### Standard Tile Layer (<y-map-default-scheme-layer>)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Adds the default Yandex vector tile layer. Usually the first child of `<y-map>`. Essential for tiles to render.

```html
<div style="width: 800px; height: 500px;">
  <y-map [props]="{ location: { center: [37.617617, 55.755819], zoom: 12 } }">
    <!-- Required for tiles to render -->
    <y-map-default-scheme-layer />
  </y-map>
</div>
```

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

### Custom Text Control Button

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Create a custom labeled button with `<y-map-control-button>` for map interactions. It requires a `text` prop and an `onClick` handler, and must be inside `<y-map-controls>`.

```html
<y-map-controls [props]="{ position: 'top' }">
  <y-map-control-button
    [props]="{ text: 'Reset View', onClick: resetView }"
  />
</y-map-controls>
```

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

### Default Features Layer (<y-map-default-features-layer>)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Adds the default layer for rendering geo-objects and markers. Must be present with `<y-map-default-scheme-layer>` when using these objects.

```html
<y-map [props]="{ location: { center: [37.617617, 55.755819], zoom: 10 } }">
  <y-map-default-scheme-layer />
  <!-- Required for features and markers to appear -->
  <y-map-default-features-layer />
</y-map>
```

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

### Programmatic Yandex Maps API Loading with YApiLoaderService

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Use `YApiLoaderService` to programmatically load the Yandex.Maps JS API script. This is useful for interacting with the raw `ymaps3` global or reacting directly to API load events without using a `<y-map>` component.

```typescript
import { Component, OnInit, OnDestroy } from '@angular/core';
import { YApiLoaderService } from 'angular-yandex-maps-v3';
import { Subscription } from 'rxjs';

@Component({ selector: 'app-root', template: '' })
export class AppComponent implements OnInit, OnDestroy {
  private sub?: Subscription;

  constructor(private apiLoader: YApiLoaderService) {}

  ngOnInit() {
    // load() returns Observable<typeof ymaps3>
    // Emits once when the API is ready; re-emits if the config changes.
    this.sub = this.apiLoader.load().subscribe((ymaps3) => {
      console.log('API loaded, version:', ymaps3.version);
      // Perform any raw ymaps3 operations here
    });
  }

  ngOnDestroy() {
    this.sub?.unsubscribe();
  }
}

```

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

### Marker Clusterer with Custom Templates

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Use `y-map-clusterer` to group nearby markers. It accepts `Feature[]` and allows custom HTML rendering for markers and clusters using `<ng-template #marker>` and `<ng-template #cluster>`.

```typescript
import { Component } from '@angular/core';
import {
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  YMapDefaultFeaturesLayerDirective,
  YMapClustererDirective,
} from 'angular-yandex-maps-v3';
import type { Feature } from '@yandex/ymaps3-types/packages/clusterer';

@Component({
  selector: 'app-root',
  imports: [
    YMapComponent,
    YMapDefaultSchemeLayerDirective,
    YMapDefaultFeaturesLayerDirective,
    YMapClustererDirective,
  ],
  template: '
    <div style="width: 800px; height: 500px;">
      <y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 10 } }">
        <y-map-default-scheme-layer />
        <y-map-default-features-layer />

        <y-map-clusterer [props]="{ features: features }">
          <!-- Template for individual markers -->
          <ng-template #marker let-context>
            <img src="https://example.com/pin.svg" alt="pin" style="width:32px;" />
          </ng-template>

          <!-- Template for cluster groups — context.features.length = count -->
          <ng-template #cluster let-context>
            <div style="
              width:40px; height:40px; border-radius:50%;
              background:#006efc; color:#fff;
              display:flex; align-items:center; justify-content:center;
              font-weight:bold;
            ">
              {{ context.features.length }}
            </div>
          </ng-template>
        </y-map-clusterer>
      </y-map>
    </div>
  ',
})
export class AppComponent {
  features: Feature[] = [
    { type: 'Feature', id: '0', geometry: { type: 'Point', coordinates: [-0.597696, 51.907351] } },
    { type: 'Feature', id: '1', geometry: { type: 'Point', coordinates: [-0.127696, 51.507351] } },
    { type: 'Feature', id: '2', geometry: { type: 'Point', coordinates: [0.302304, 51.127351] } },
    { type: 'Feature', id: '3', geometry: { type: 'Point', coordinates: [-0.227696, 51.607351] } },
  ];
}
```

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

### Instantiate Unexisting Yandex Maps Class

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/docsifier/assets/v2/faq.md

Use type casting with 'any' to instantiate classes that might be missing from the current Yandex Maps typings. This is a workaround for incomplete type definitions.

```typescript
const instance = new (ymaps as any).UnexistingClass();
```

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

### Define Feature Data Source with y-map-feature-data-source

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Use `<y-map-feature-data-source>` to provide a named data source, essential for clusterers or external data pipelines. Assign a unique ID to the source.

```html
<y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 9 } }">
  <y-map-feature-data-source [props]="{ id: 'my-source' }" />
</y-map>
```

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

### Open in Yandex Maps Button

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Add a button to open the current map view in the full Yandex Maps application using `<y-map-open-maps-button>`. It must be placed within `<y-map-controls>`.

```html
<y-map-controls [props]="{ position: 'bottom right' }">
  <y-map-open-maps-button />
</y-map-controls>
```

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

### Common Style Control Button (`<y-map-control-common-button>`)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Use this component to render a button that matches the style of native Yandex Maps controls. It must be placed within a `<y-map-controls>` element.

```html
<y-map-controls [props]="{ position: 'top' }">
  <y-map-control-common-button [props]="{ text: 'Layers', onClick: openLayerPanel }" />
</y-map-controls>
```

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

### Basic Map Component Usage in HTML

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/angular-yandex-maps-v3/README.md

Integrate the YMap component into your Angular template. Configure map properties like location and theme.

```html
<div class="container">
  <y-map
    [props]="{
      location: {
        center: [-0.127696, 51.507351],
        zoom: 10,
      },
      theme: 'dark',
    }"
  >
    <y-map-default-scheme-layer />
  </y-map>
</div>
```

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

### Display Hover Tooltips with y-map-hint

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Use `<y-map-hint>` to display template-driven tooltips on hover. The `hint` callback receives the hovered entity, and its return value is available as `$implicit` in the ng-template.

```typescript
import { Component } from '@angular/core';
import {
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  YMapDefaultFeaturesLayerDirective,
  YMapDefaultMarkerDirective,
  YMapHintDirective,
} from 'angular-yandex-maps-v3';

@Component({
  selector: 'app-root',
  imports: [
    YMapComponent,
    YMapDefaultSchemeLayerDirective,
    YMapDefaultFeaturesLayerDirective,
    YMapDefaultMarkerDirective,
    YMapHintDirective,
  ],
  template: '
    <div style="width: 800px; height: 500px;">
      <y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 9 } }">
        <y-map-default-scheme-layer />
        <y-map-default-features-layer />

        <!-- hint callback receives the hovered entity; return value becomes context.$implicit -->
        <y-map-hint [props]="{ hint: onHint }">
          <ng-template let-context>
            <div style="background:#fff; border-radius:6px; padding:4px 8px;">
              {{ context?.hint }}
            </div>
          </ng-template>
        </y-map-hint>

        <y-map-default-marker
          [props]="{
            coordinates: [-0.127696, 51.507351],
            properties: { label: 'Central London' },
          }"
        />
      </y-map>
    </div>
  ',
})
export class AppComponent {
  // Return what you want displayed; it appears as context.hint in the template
  onHint = (entity?: any) => entity?.properties?.['label'];
}
```

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

### Geolocation Control Button

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Include a geolocation button with `<y-map-geolocation-control>` to pan the map to the user's current location. It requires placement within `<y-map-controls>`.

```html
<y-map-controls [props]="{ position: 'top right' }">
  <y-map-geolocation-control />
</y-map-controls>
```

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

### Handle Map Events with y-map-listener

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Attach global event callbacks like 'onClick' or 'onMouseMove' to the map using `<y-map-listener>`. Event handlers receive event data, including coordinates for clicks.

```typescript
import { Component } from '@angular/core';
import {
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  YMapListenerDirective,
} from 'angular-yandex-maps-v3';

@Component({
  selector: 'app-root',
  imports: [YMapComponent, YMapDefaultSchemeLayerDirective, YMapListenerDirective],
  template: '
    <div style="width: 800px; height: 500px;">
      <y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 9 } }">
        <y-map-default-scheme-layer />
        <y-map-listener [props]="{ onClick: onMapClick, onMouseMove: onMouseMove }" />
      </y-map>
    </div>
    <p>Last click: {{ lastClick }}</p>
  ',
})
export class AppComponent {
  lastClick = '';

  onMapClick = (event: any) => {
    const [lng, lat] = event.coordinates;
    this.lastClick = `lng=${lng.toFixed(4)}, lat=${lat.toFixed(4)}`;
  };

  onMouseMove = (event: any) => {
    // Runs outside Angular zone — use NgZone.run() to trigger change detection if needed
  };
}
```

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

### Custom HTML Control (`<y-map-control>`)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

This component allows you to render any custom HTML content as a map control. Ensure it is placed inside a `<y-map-controls>` tag.

```html
<y-map-controls [props]="{ position: 'right' }">
  <y-map-control>
    <!-- Any HTML is projected as the control's content -->
    <div style="background:#fff; padding:8px; border-radius:4px;">
      <strong>Info Panel</strong>
      <p>Zoom: {{ currentZoom }}</p>
    </div>
  </y-map-control>
</y-map-controls>
```

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

### Render Styled Polygon with y-map-feature

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Use `<y-map-feature>` to render GeoJSON-style polygons with custom stroke and fill styles. Ensure the map component is properly initialized with location props.

```html
<y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 9 } }">
  <y-map-default-scheme-layer />
  <y-map-default-features-layer />

  <!-- Render a styled polygon over London -->
  <y-map-feature
    [props]="{
      geometry: {
        type: 'Polygon',
        coordinates: [[ [-0.557696, 51.727351],
          [0.302304, 51.727351],
          [0.302304, 51.237351],
          [-0.557696, 51.237351],
        ]],
      },
      style: {
        stroke: [{ color: '#006efc', width: 4, dash: [5, 10] }],
        fill: 'rgba(56, 56, 219, 0.5)',
      },
    }"
  />
</y-map>
```

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

### Default Styled Marker (<y-map-default-marker>)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Renders a pre-styled pin marker. Supports reactive updates to title, subtitle, color, and click handlers. Requires `angular-yandex-maps-v3` and `@yandex/ymaps3-markers`.

```typescript
import { Component } from '@angular/core';
import {
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  YMapDefaultFeaturesLayerDirective,
  YMapDefaultMarkerDirective,
} from 'angular-yandex-maps-v3';

@Component({
  selector: 'app-root',
  imports: [
    YMapComponent,
    YMapDefaultSchemeLayerDirective,
    YMapDefaultFeaturesLayerDirective,
    YMapDefaultMarkerDirective,
  ],
  template: `
    <div style="width: 800px; height: 500px;">
      <y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 10 } }">
        <y-map-default-scheme-layer />
        <y-map-default-features-layer />

        <y-map-default-marker
          [props]="{
            coordinates: [-0.127696, 51.507351],
            title: 'Central London',
            subtitle: 'United Kingdom',
            color: 'blue',
            onClick: onMarkerClick,
          }"
        />
      </y-map>
    </div>
  `,
})
export class AppComponent {
  onMarkerClick = () => alert('Marker clicked!');
}
```

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

### Scale Indicator Control

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Display a map scale bar using `<y-map-scale-control>`. This component must be nested inside `<y-map-controls>`.

```html
<y-map-controls [props]="{ position: 'bottom left' }">
  <y-map-scale-control />
</y-map-controls>
```

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

### TypeScript Configuration for Yandex Maps Types

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/angular-yandex-maps-v3/README.md

Configure tsconfig.json to skip library checks and include Yandex Maps types globally. This is necessary due to the library using both Vue and React typings.

```json
{
  "compilerOptions": {
    "skipLibCheck": true,
    "types": ["@yandex/ymaps3-types"]
  }
}
```

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

### Zoom Control Button

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Add a zoom control to the map using `<y-map-zoom-control-button>`. This component must be placed inside `<y-map-controls>`.

```html
<y-map-controls [props]="{ position: 'left' }">
  <y-map-zoom-control-button />
</y-map-controls>
```

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

### Custom HTML Marker (<y-map-marker>)

Source: https://context7.com/ddubrava/angular-yandex-maps/llms.txt

Wraps `ymaps3.YMapMarker` to render custom HTML elements as markers. The projected child element becomes the marker's DOM node. Supports draggable markers.

```typescript
import { Component } from '@angular/core';
import {
  YMapComponent,
  YMapDefaultSchemeLayerDirective,
  YMapDefaultFeaturesLayerDirective,
  YMapMarkerDirective,
} from 'angular-yandex-maps-v3';

@Component({
  selector: 'app-root',
  imports: [
    YMapComponent,
    YMapDefaultSchemeLayerDirective,
    YMapDefaultFeaturesLayerDirective,
    YMapMarkerDirective,
  ],
  template: `
    <div style="width: 800px; height: 500px;">
      <y-map [props]="{ location: { center: [-0.127696, 51.507351], zoom: 10 } }">
        <y-map-default-scheme-layer />
        <y-map-default-features-layer />

        <!-- Any HTML can be projected as the marker element -->
        <y-map-marker [props]="{ coordinates: [-0.127696, 51.507351], draggable: true }">
          <div style="background:#fff; border-radius:6px; padding:4px 8px; font-weight:bold;">
            📍 London
          </div>
        </y-map-marker>
      </y-map>
    </div>
  `,
})
export class AppComponent {}
```

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

### Handle Map Balloon Close Event

Source: https://github.com/ddubrava/angular-yandex-maps/blob/main/libs/docsifier/assets/v2/faq.md

Listen for the 'balloonclose' event emitted by the map component to execute custom logic when the map's balloon is closed.

```html
<ya-map (balloonclose)="onBalloonClose($event)"></ya-map>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.