diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 638f5f6..99f29ab 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { RoadServiceComponent } from './data/road-service/road-service.component
 import { SettlementAddressLinkComponent } from './data/settlement-address-link/settlement-address-link.component';
 import { MapComponent } from './data/map/map.component';
 import { MapItemsComponent } from './data/map-items/map-items.component';
+import { RoadMapComponent } from '../components/road-map.component';
 
 // Services
 import { BusStopCreateService } from '../services/bus-stop-create.service';
@@ -88,7 +89,8 @@ const httpInterceptorProviders: Type<any>[] = [
     CrossSectionComponent,
     RoadServiceComponent,
     SettlementAddressLinkComponent,
-    MapComponent
+    MapComponent,
+    RoadMapComponent
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     BrowserModule,
diff --git a/src/app/data/road/road.component.html b/src/app/data/road/road.component.html
index 7db449a..e4f311c 100644
--- a/src/app/data/road/road.component.html
+++ b/src/app/data/road/road.component.html
@@ -1,4 +1,5 @@
 <div class="grid_containert" *ngIf="showGrid">
+    <road-map [identificator]="'road-map'"></road-map>
     <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
         toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
         (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
@@ -6,6 +7,7 @@
     </ag-grid-ng2>
     <div class="control_button">
         <div *tdLoading="'loading'; mode:'indeterminate'; type:'circle'; strategy:'replace'; color:'accent'"></div>
+        <button md-fab color="accent" [disabled]="!isSelected" (click)="showOnMap()" type="button"><md-icon>map</md-icon></button>
         <button md-fab color="accent" [disabled]="isNew || isSelected" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
         <button md-fab color="warn" [disabled]="!isSelected" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
     </div>
diff --git a/src/app/data/road/road.component.ts b/src/app/data/road/road.component.ts
index ddedde0..7cdbc4b 100644
--- a/src/app/data/road/road.component.ts
+++ b/src/app/data/road/road.component.ts
@@ -1,8 +1,9 @@
-import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core';
+import { Component, ViewEncapsulation, AfterViewInit, ViewChild } from '@angular/core';
 import { TdLoadingService } from '@covalent/core';
 import { GridOptions, IGetRowsParams, IRowModel } from 'ag-grid/main';
 
 import { StatementBase } from '../../../models/statement.base';
+import { RoadMapComponent } from '../../../components/road-map.component';
 
 import { RoadService } from '../../../services/road.service';
 import { RoadCreateService } from '../../../services/road-create.service';
@@ -21,7 +22,8 @@ import { routerTransition } from '../../../animations/router.animation';
     encapsulation: ViewEncapsulation.None,
 })
 export class RoadComponent extends StatementBase {
-
+  @ViewChild(RoadMapComponent)
+  protected mapComponent: RoadMapComponent;
     public roadTypes: RoadTypeSelectList[];
 
     constructor(
@@ -32,6 +34,11 @@ export class RoadComponent extends StatementBase {
         super();
     }
 
+    public showOnMap(): void {
+      console.log(this.gridOptions.api.getSelectedRows()[0].id);
+      this.mapComponent.showMap();
+    }
+
   protected createColumnDefs(): any[] {
     return [
       {
diff --git a/src/components/road-map.component.ts b/src/components/road-map.component.ts
new file mode 100644
index 0000000..8710b7b
--- /dev/null
+++ b/src/components/road-map.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, AfterViewInit } from '@angular/core';
+import * as L from 'leaflet';
+
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: 'road-map',
+    template: '<div id="{{identificator}}" [style.height]="getHeight()" ></div>',
+})
+export class RoadMapComponent implements AfterViewInit {
+    protected isVisible: boolean = false;
+    protected map: L.Map;
+    @Input() identificator: string = 'mapID';
+
+    public ngAfterViewInit(): void {
+        this.map = L.map(this.identificator).setView([51.505, -0.09], 13);
+        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+        }).addTo(this.map);
+    }
+    public showMap(): void {
+        this.isVisible = true;
+    }
+    public getHeight(): string {
+        return this.isVisible ? '100%' : '0';
+    }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 346d9f9..7161341 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -32,11 +32,16 @@ a[md-icon-button] {
     }
 }
 
-.map-container{
+.map-container {
     height: 400px;
     width: 400px;
 }
-#mapId{
+
+#mapId {
     height: 400px;
     width: 400px;
+}
+
+road-map>div {
+    transition: height 1s ease-out;
 }
\ No newline at end of file
--
libgit2 0.21.4