Skip to content

G
getme
Commit 3c6383a9 by Arjun
Options

map pin

parent b8ed8334
Showing with 26 additions and 24 deletions
src/app/nearby/nearby.page.html
...@@ -19,10 +19,9 @@ ...@@ -19,10 +19,9 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="nearby_map"> <div class="nearby_map">
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'" <div class="map-inner">
(mapReady)="mapReady($event)" (centerChange)="centerChange($event)"> <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'" (mapReady)="mapReady($event)" (centerChange)="centerChange($event)">
<agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" <agm-marker [markerDraggable]="true" (dragEnd)="markerDragEnd($event)" [iconUrl]="
(dragEnd)="markerDragEnd($event)" [iconUrl]="
{ {
url: './assets/pin.svg', url: './assets/pin.svg',
scaledSize: { scaledSize: {
...@@ -30,18 +29,17 @@ ...@@ -30,18 +29,17 @@
height: 40 height: 40
}}"></agm-marker> }}"></agm-marker>
</agm-map> </agm-map>
<form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post" <span class="map-pin"><img src="../../assets/pin.svg" alt=""></span>
class="form-horizontal"> </div>
<form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post" class="form-horizontal">
<div class="add_address_wrapper"> <div class="add_address_wrapper">
<h5>DELIVERY</h5> <h5>DELIVERY</h5>
<p>{{address}}</p> <p>{{address}}</p>
<input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required <input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required placeholder="House No./ Building No" />
placeholder="House No./ Building No" />
<div class="md-errors-spacer" [hidden]="building.valid || landmark.pristine" class="ion-padding-start"> <div class="md-errors-spacer" [hidden]="building.valid || landmark.pristine" class="ion-padding-start">
Building Name is required Building Name is required
</div> </div>
<input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required <input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required placeholder="Landmark" />
placeholder="Landmark" />
<div class="md-errors-spacer" [hidden]="landmark.valid || landmark.pristine" class="ion-padding-start"> <div class="md-errors-spacer" [hidden]="landmark.valid || landmark.pristine" class="ion-padding-start">
Landmark is required Landmark is required
</div> </div>
...@@ -49,31 +47,24 @@ ...@@ -49,31 +47,24 @@
<ion-row> <ion-row>
<ion-col> <ion-col>
<h6> <h6>
<input class="styled-checkbox" id="styled-check-1" type="radio" value="Home" <input class="styled-checkbox" id="styled-check-1" type="radio" value="Home" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
[(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel"
required />
<label for="styled-check-1"><span>Home</span></label> <label for="styled-check-1"><span>Home</span></label>
</h6> </h6>
</ion-col> </ion-col>
<ion-col> <ion-col>
<h6> <h6>
<input class="styled-checkbox" id="styled-check-2" type="radio" value="Work" <input class="styled-checkbox" id="styled-check-2" type="radio" value="Work" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
[(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel"
required />
<label for="styled-check-2"><span>Office</span></label> <label for="styled-check-2"><span>Office</span></label>
</h6> </h6>
</ion-col> </ion-col>
<ion-col> <ion-col>
<h6> <h6>
<input class="styled-checkbox" id="styled-check-3" type="radio" value="Other" <input class="styled-checkbox" id="styled-check-3" type="radio" value="Other" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
[(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel"
required />
<label for="styled-check-3"><span>Others</span></label> <label for="styled-check-3"><span>Others</span></label>
</h6> </h6>
</ion-col> </ion-col>
</ion-row> </ion-row>
<div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine" <div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine" class="ion-padding-start">
class="ion-padding-start">
Address Type is required Address Type is required
</div> </div>
</ion-grid> </ion-grid>
......
src/app/nearby/nearby.page.scss
...@@ -5,6 +5,18 @@ ...@@ -5,6 +5,18 @@
.nearby_map { .nearby_map {
width: 100%; width: 100%;
height: 100%; height: 100%;
.map-inner {
height: calc(100% - 348px);
position: relative;
.map-pin {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 25px;
}
}
.overlay { .overlay {
position: absolute; position: absolute;
top: 0px; top: 0px;
...@@ -15,7 +27,7 @@ ...@@ -15,7 +27,7 @@
} }
agm-map { agm-map {
width: 100%; width: 100%;
height: calc(100% - 330px); height: 100% !important;
.overlay { .overlay {
position: absolute; position: absolute;
top: 0px; top: 0px;
...@@ -150,8 +162,7 @@ ...@@ -150,8 +162,7 @@
margin: 0; margin: 0;
} }
} }
agm-map { .map-inner {
width: 100%;
height: calc(100% - 235px); height: calc(100% - 235px);
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment