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!
- Custom Placemark
- Placemark Clusterer
- Changing a Placemark on hover
- Panorama
- Rectangle
- Polygon
- Circle
- Driving Multiroute
- Pedestrian Multiroute
- Route to the point
- Search Control
- Organizations Search
- RoutePanel Control
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 | Map | Emit immediately after entity is added in root container |
<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 | Player | Emit immediately after entity is added in root container |
- 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 | GeoObject | Emit immediately after entity is added in root container |
<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 | GeoObject | Emit immediately after entity is added in root container |
<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 | multiRouter.MultiRoute | Emit immediately after entity is added in root container |
<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 | Control | Emit immediately after entity is added in root container |
<angular-yandex-control [type]="'RoutePanel'" [parameters]="{ options: { float: 'right' } }"></angular-yandex-control>