angular-yandex-maps-v3

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

Angular version	Library version
v16, v17, v18	v18.x

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

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

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