angular-yandex-maps-v3

Yandex.Maps Angular components that implement the Yandex.Maps JavaScript API 3.0

📄 Documentation | 🗺️ Examples | ❓ FAQ

Installation

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

Version compatibility

Usage

component.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>

component.css

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

tsconfig.json

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

skipLibCheck must be set to true because @yandex/ymaps3-types uses both Vue and React typings. If you do not enable this option, you will not be able to build the application.

types ensure you can access ymaps3 globally without importing it.

Standalone

component.ts

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

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

app.config.ts

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)],
};

SCAM

app.module.ts

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 {}