angular8-yandex-maps

Angular8-yandex-maps

Angular 6+ module for Yandex.Maps

If you liked the project and want to support the development please star the package on GitHub page. Thanks!

Examples

• Custom placemark
• Placemark clusterer
• Multiroute
• 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]="[55.751952, 37.600739]" [zoom]="12">
    <angular-yandex-placemark [geometry]="[55.751952, 37.600739]"></angular-yandex-placemark>
  </angular-yandex-map>
</div>

component.css

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

Map

Inputs

Name	Type	Default	Required	Description
center	Number[]		yes	Map center geocoordinates
zoom	Number	10	no	Map zoom level
state	MapState		no	States for the map
options	MapOptions		no	Options for the map
clusterer	Clusterer		no	Options for the Clusterer. Clusters ONLY Placemarks in the visible area of the map.

---

<angular-yandex-map [center]="[55.751952, 37.600739]" [zoom]="12" [state]="{type: 'yandex#satellite'}"></angular-yandex-map>

Placemark

Inputs

Name	Type	Default	Required	Description
geometry	Number[] or Object or IPointGeometry		yes	Placemark coordinates or...read Yandex.Maps docs
properties	PlacemarkProperties		no	Properties for the placemark
options	PlacemarkOptions		no	States for the placemark

---

<angular-yandex-placemark [geometry]="[55.751952, 37.600739]" [properties]="{iconCaption: 'Moscow'}"></angular-yandex-placemark>

MultiRoute

Inputs

Name	Type	Default	Required	Description
referencePoints	IMultiRouteReferencePoint[]		yes	Reference points for the multi-route
model	multiRouter.MultiRouteModel or MultiRouteModelJson		no	Properties for the multiroute
options	MultiRouteOptions		no	Options for the multiroute

---

<angular-yandex-multiroute [referencePoints]="[[55.751952, 37.600739], 'Красные ворота, Москва']" [options]="{routeActiveStrokeColor: 'ff0000'}"></angular-yandex-multiroute>

GeoObject

Inputs

Name	Type	Default	Required	Description
feature	GeoObjectFeature		yes	Feature for the GeoObject
options	GeoObjectOptions		no	Options for the GeoObject

---

<angular-yandex-geoobject [feature]="{ geometry: { type: 'Rectangle', coordinates: [[55.665, 37.66], [55.64,37.53]] } }"></angular-yandex-geoobject>

Search

Inputs

Name	Type	Default	Required	Description
searchRequest	String		no	Force search. Example: SearchRequestExample
parameters	SearchControlParameters		no	Parameters for the Search

---

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

Changelog

CHANGELOG

License

MIT