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!

Full documentation about events, options, properties etc. you can find here.

All events return IEvent or ILoadEvent, they contain ymaps & entity instance. This makes possible to use full Yandex.Maps API. The key idea of the library is to reduce ymaps usage but if the module does not provide any features then use these objects.

Table of Contents

• Map*
• Panorama*
• Placemark
• GeoObject
• MultiRoute
• Control

Examples

Popular

• Using a custom image for the placemark
• Efficiently adding lots of placemarks to the map
• Route to the point on the map
• Searching for organizations
• Calculating delivery cost

Panorama

• Panorama

GeoObjects

• Changing a placemark icon when hovering over it
• Rectangle
• Polygon
• Circle

Multiroute

• Building a driving multiroute
• Building a pedestrian multiroute

Controls

• Search Control
• RoutePanel Control

Installation

npm install angular8-yandex-maps

Usage

module.ts

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

@NgModule({
  imports: [AngularYandexMapsModule.forRoot(API_KEY)]
  /**
   * forRoot & API_KEY are optional
   * imports: [AngularYandexMapsModule]
   */
})

component.html

<div class="container">
  <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

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

Map*

Asterisk means root container, they can not be nested

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.

Outputs

Name	Type	Description
load	IEvent	Emit immediately after entity is added in root container
action	IEvent	Smooth map movement. Supported events: actionbegin, actionend
baloon	IEvent	Actions with ballon. Supported events: balloonopen, balloonclose
yaclick	IEvent	Clicks on the object. Supported events: click, dblclick
hint	IEvent	Action with hint. Supported events: hintopen, hintclose
mouse	IEvent	Mouse actions over the object. Supported events: mousedown, mouseenter, mouseleave, mousemove, mouseup
multitouch	IEvent	Multitouch actions over the object. Supported events: multitouchstart, multitouchmove, multitouchend

Children

• Placemark
• MultiRoute
• GeoObject
• Control

---

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

Panorama*

Inputs

Name	Type	Default	Required	Description
point	Number[]		yes	Map center geocoordinates
layer	yandex#panorama or yandex#airPanorama	yandex#panorama	no	The layer in which the panorama will be searched
options	PanoramaOptions		no	Options for the panorama

Outputs

Name	Type	Description
load	IEvent	Emit immediately after entity is added in root container
directionchange	IEvent	The view direction changed
fullscreen	IEvent	Full-screen mode was switched. Supported events: fullscreenenter, fullscreenexit
marker	IEvent	Clicks on the marker. Supported events: markercollapse, markerexpand, markermouseenter, markermouseleave

Children

• None

---

<angular-yandex-panorama [point]="[59.938557, 30.316198]" [layer]="'yandex#airPanorama'"></angular-yandex-panorama>

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

Outputs

Name	Type	Description
load	IEvent	Emit immediately after entity is added in root container
baloon	IEvent	Actions with ballon. Supported events: balloonopen, balloonclose
yaclick	IEvent	Clicks on the object. Supported events: click, dblclick
drag	IEvent	Placemark dragging. Supported events: dragstart, dragend
hint	IEvent	Action with hint. Supported events: hintopen, hintclose
mouse	IEvent	Mouse actions over the object. Supported events: mousedown, mouseenter, mouseleave, mousemove, mouseup
multitouch	IEvent	Multitouch actions over the object. Supported events: multitouchstart, multitouchmove, multitouchend

---

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

GeoObject

Inputs

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

Outputs

Name	Type	Description
load	IEvent	Emit immediately after entity is added in root container
baloon	IEvent	Actions with ballon. Supported events: balloonopen, balloonclose
yaclick	IEvent	Clicks on the object. Supported events: click, dblclick
drag	IEvent	GeoObject dragging. Supported events: dragstart, dragend
hint	IEvent	Action with hint. Supported events: hintopen, hintclose
mouse	IEvent	Mouse actions over the object. Supported events: mousedown, mouseenter, mouseleave, mousemove, mouseup
multitouch	IEvent	Multitouch actions over the object. Supported events: multitouchstart, multitouchmove, multitouchend

---

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

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

Outputs

Name	Type	Description
load	IEvent	Emit immediately after entity is added in root container
activeroutechange	IEvent	Change to the active route
baloon	IEvent	Actions with ballon. Supported events: balloonopen, balloonclose
yaclick	IEvent	Clicks on the object. Supported events: click, dblclick
mouse	IEvent	Mouse actions over the object. Supported events: mousedown, mouseenter, mouseleave, mousemove, mouseup
multitouch	IEvent	Multitouch actions over the object. Supported events: multitouchstart, multitouchmove, multitouchend

---

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

Control

Inputs

Name	Type	Default	Required	Description
type	String		yes	Control type. List of types you can find in left list - Controls. E.g. Control.FullscreenControl - 'FullscreenControl'
parameters	any		no	Parameters for the Control

Outputs

Name	Type	Description
load	ILoadEvent	Emit immediately after entity is added in root container

---

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

Changelog

CHANGELOG

License

MIT