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.
- 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
npm install angular8-yandex-maps
import { AngularYandexMapsModule } from 'angular8-yandex-maps';
@NgModule({
imports: [AngularYandexMapsModule.forRoot(API_KEY or null)]
})
<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>
.container {
width: 1000px;
height: 500px;
}
| 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. |
| 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 |
<angular-yandex-map [center]="[55.751952, 37.600739]" [zoom]="12" [state]="{type: 'yandex#satellite'}"></angular-yandex-map>
| 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 |
| 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 |
- None
<angular-yandex-panorama [point]="[59.938557, 30.316198]" [layer]="'yandex#airPanorama'"></angular-yandex-panorama>
| 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 |
| 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>
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| feature | GeoObjectFeature | yes | Feature for the GeoObject | |
| options | GeoObjectOptions | no | Options for the GeoObject |
| 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>
| 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 |
| 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: balloo 8000 nopen, 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>
| 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 |
| 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>