Skip to content

G
getme
Commit 50be8a92 by Adarsh K
Options

map

parents f3d9d9cf 01c1079e
Showing with 111 additions and 75 deletions
.angulardoc.json 0 → 100644
{
"repoId": "111a57f0-8194-4b3e-a693-fb080e3fd9b7",
"lastSync": 0
}
\ No newline at end of file
package.json
......@@ -94,4 +94,4 @@
"android"
]
}
}
\ No newline at end of file
}
src/app/home/home.module.ts
......@@ -6,6 +6,8 @@ import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import { AgmCoreModule } from '@agm/core';
import { AgmDirectionModule } from 'agm-direction';
const routes: Routes = [
{
......@@ -19,6 +21,10 @@ const routes: Routes = [
CommonModule,
FormsModule,
IonicModule,
AgmDirectionModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyAK3Av2e2dunqInYEaAVJPmzK5HTi0gubw'
}),
RouterModule.forChild(routes)
],
declarations: [HomePage]
......
src/app/home/home.page.html
......@@ -9,7 +9,6 @@
<div class="clear"></div>
</div>
<ion-content>
<div class="home_wrapper">
<div class="home_banner">
<div class="home_banner_title">
......@@ -189,11 +188,69 @@
</ul>
</div>
</div>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut] (click)="istoggle()">
<div class="sort_inner">
<input class="search_box" placeholder="Enter your location">
<button class="search_btn" (click)="istoggle()">Search</button>
</ion-content>
<div *ngIf="isShow" [@slideInOut]>
<div class="nav_header">
<button class="nav_btn nav_back floatLeft" (click)="istoggle()">
<img src="../assets/Group17_2.png">
</button>
<div class="nav_title floatLeft">
<h4>CHANGE LOCATION</h4>
</div>
<div class="clear"></div>
</div>
</ion-content>
\ No newline at end of file
<ion-content class="sort_wrappper">
<agm-map [zoom]="20" [latitude]="lat" [longitude]="lng" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
</agm-map>
<div class="add_address_wrapper">
<h5>
<span class="floatLeft">NEW ADDRESS</span>
<span class="floatRight">ADD NEW</span>
<div class="clear"></div>
</h5>
<ul>
<li>
<div class="floatLeft">
<input class="styled-checkbox " id="styled-checkbox-1" type="radio" value="value1">
<label for="styled-checkbox-1">
</label>
</div>
<div class="floatLeft">
<p>
Shamjith KS<br> Carnival Infopark, Infopark Kochi <br> 682030, Kerala, India
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="floatLeft">
<input class="styled-checkbox " id="styled-checkbox-2" type="radio" value="value2">
<label for="styled-checkbox-2">
</label>
</div>
<div class="floatLeft">
<p>
Shamjith KS<br> Carnival Infopark, Infopark Kochi <br> 682030, Kerala, India
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="floatLeft">
<input class="styled-checkbox " id="styled-checkbox-3" type="radio" value="value3">
<label for="styled-checkbox-3">
</label>
</div>
<div class="floatLeft">
<p>
Shamjith KS<br> Carnival Infopark, Infopark Kochi <br> 682030, Kerala, India
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</ion-content>
</div>
\ No newline at end of file
src/app/home/home.page.scss
......@@ -228,60 +228,47 @@
.sort_wrappper {
height: 100vh;
width: 100%;
position: fixed;
background: #fff;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.sort_inner {
margin: 0 auto;
width: 90%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%;
border-radius: 0px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
agm-map {
width: 100%;
height: 100vh;
}
.add_address_wrapper {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding: 20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #fff;
-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h5 {
color: rgba(41, 40, 91, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
margin-bottom: 30px;
}
.search_box {
width: calc(100% - 100px);
height: 45px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.search_btn {
width: 100px;
height: 45px;
background-color: rgba(41, 40, 91, 1);
border: none;
color: #fff;
font-size: 16px;
padding: 0px;
font-weight: 800;
}
ul {
margin: 0px;
padding: 0px;
padding-top: 30px;
li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
p {
margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
padding-left: 5px;
}
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
......@@ -299,7 +286,7 @@
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 5px;
border-radius: 50%;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
......@@ -331,22 +318,5 @@
}
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
}
}
}
\ No newline at end of file
src/app/home/home.page.ts
......@@ -21,6 +21,8 @@ import { Router, ActivatedRoute } from '@angular/router';
export class HomePage implements OnInit {
isShow = false;
public lat: number = 51.678418;
public lng: number = 7.809007;
slideOpts = {
slidesPerView: 1.5
......
src/app/nearby/nearby.page.html
......@@ -9,8 +9,8 @@
</div>
<ion-content>
<div class="nearby_map">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="10" [disableDefaultUI]="false" [zoomControl]="false" (mapClick)="mapClicked($event)" [backgroundColor] ="'rgba(29, 27, 130,0.2)'">
<agm-marker [iconUrl]="'/assets/nearby.png'" *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m.label, i)" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="10" [disableDefaultUI]="false" [zoomControl]="false" [backgroundColor]="'rgba(29, 27, 130,0.2)'">
<agm-marker [iconUrl]="'/assets/nearby.png'" *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable">
<agm-info-window>
<div class="click_marker">
<h5>Lulufashion Store</h5>
......
src/app/nearby/nearby.page.ts
......@@ -49,8 +49,6 @@ export class NearbyPage implements OnInit {
}
// google maps zoom level
zoom: number = 8;
// initial center position for the map
lat: number = 51.673858;
lng: number = 7.815982;
......
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