Yandex Maps API as an Angular2 components
Live Demo Plnkr
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ² admin panel
https://plnkr.co/edit/djaxM0nKECMynWLJwmjO?p=preview
Π Π°Π±ΠΎΡΠ° Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΈΡΠ»ΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΡΠ΅ΡΠ΅Π· ObjectManager
https://plnkr.co/edit/mq8VzzINPYXOInPOS2mQ?p=preview
ΠΡΠΎΡΡΠ°Ρ ΠΌΠ΅ΡΠΊΠ° Ρ balloon
https://plnkr.co/edit/2m3qE90MxPghI9DKjML6?p=preview
ngFor ΠΌΠ΅ΡΠΊΠΈ draggable
https://plnkr.co/edit/8njMNbV9vjYTSfyP3fxI?p=preview
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ ΠΊΠ°ΡΡΡ
https://plnkr.co/edit/9K1fAZbpgDDoZYUfIdVo?p=preview
ΠΠ»Π°ΡΡΠ΅ΡΡ
https://plnkr.co/edit/rpJpm8FnWWsuJoScAFAN?p=preview
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ
https://plnkr.co/edit/dm8EJt8Waa61yKsZRRrM?p=preview
Install
npm i yamapng
imports
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
YamapngModule,
YaCoreModule.forRoot({
apiKey: 'YOUR_KEY'
})
],
providers: [],
bootstrap: [AppComponent]
})
API
Π’Π΅Π³ ya-map & ya-marker:
<ya-map [latitude]="55.76" [longitude]="37.64">
<ya-marker [latitude]="55.847" [longitude]="38.6">
</ya-marker>
<ya-marker [latitude]="55.847" [longitude]="35.6">
</ya-marker>
</ya-map>
Style.css
.map-container-inner
{
width: 300px;
height: 200px;
}