angular8-yandex-maps

Angular8-yandex-maps

Angular 2+ module for Yandex.Maps

Examples

• Custom placemark
• Multiroute (need API key)
• Rectangle
• Polygon
• Circle
• Custom search
• Search for organizations

Installation

npm install angular8-yandex-maps

Usage

module.ts

import { AngularYandexMapsModule } from 'angular8-yandex-maps';

@NgModule({
  imports: [AngularYandexMapsModule.forRoot(API_KEY or null)]
})

component.html

<div class="map">
  <angular-yandex-map [center]="[60.167987, 24.942206]" [zoom]="12">
    <angular-yandex-placemark [geometry]="[60.167987, 24.942206]"></angular-yandex-placemark>
  </angular-yandex-map>
</div>

component.css

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

Map

Available inputs:

Required:

• center: Number[]

Optional:

• zoom: Number; default = 10
• mapState: Interface
• mapOptions: Interface

<angular-yandex-map [center]="[60.167987, 24.942206]" [zoom]="8" [mapState]="{type: 'yandex#satellite'}"></angular-yandex-map>

Placemark

Available inputs:

Required:

• geometry: Number[] | Object | IPointGeometry

Optional:

• placemarkProperties: Interface
• placemarkOptions: Interface

<angular-yandex-placemark [geometry]="[60.167987, 24.942206]" [placemarkProperties]="{iconCaption: 'Stockmann'}"></angular-yandex-placemark>

Multiroute

Available inputs:

Required:

• referencePoints: IMultiRouteReferencePoint

Optional:

• multirouteModel: multiRouter.MultiRouteModel | IMultiRouteModelJson

<angular-yandex-multiroute [referencePoints]="[[60.181711, 24.927661], 'helsinki']" [multirouteOptions]="{routeActiveStrokeColor: 'ff0000'}"></angular-yandex-multiroute>

GeoObject

Available inputs:

Required:

• feature: Interface

Optional:

• options: Interface

<angular-yandex-geoobject [feature]="{ geometry: { type: 'Rectangle', coordinates: [[60.183155, 24.911892], [60.156454, 24.962433]] } }"></angular-yandex-geoobject>

Search

Available inputs:

Optional:

• searchRequest: string (use this for force search, Example)
• parameters: Interface

<angular-yandex-search [parameters]="{ options: { float: 'right' } }"></angular-yandex-search>

Changelog

CHANGELOG

License

MIT