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 @@ ...@@ -94,4 +94,4 @@
"android" "android"
] ]
} }
} }
\ No newline at end of file
src/app/home/home.module.ts
...@@ -6,6 +6,8 @@ import { Routes, RouterModule } from '@angular/router'; ...@@ -6,6 +6,8 @@ import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular'; import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page'; import { HomePage } from './home.page';
import { AgmCoreModule } from '@agm/core';
import { AgmDirectionModule } from 'agm-direction';
const routes: Routes = [ const routes: Routes = [
{ {
...@@ -19,6 +21,10 @@ const routes: Routes = [ ...@@ -19,6 +21,10 @@ const routes: Routes = [
CommonModule, CommonModule,
FormsModule, FormsModule,
IonicModule, IonicModule,
AgmDirectionModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyAK3Av2e2dunqInYEaAVJPmzK5HTi0gubw'
}),
RouterModule.forChild(routes) RouterModule.forChild(routes)
], ],
declarations: [HomePage] declarations: [HomePage]
......
src/app/home/home.page.html
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<ion-content> <ion-content>
<div class="home_wrapper"> <div class="home_wrapper">
<div class="home_banner"> <div class="home_banner">
<div class="home_banner_title"> <div class="home_banner_title">
...@@ -189,11 +188,69 @@ ...@@ -189,11 +188,69 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="sort_wrappper" *ngIf="isShow" [@slideInOut] (click)="istoggle()"> </ion-content>
<div class="sort_inner"> <div *ngIf="isShow" [@slideInOut]>
<input class="search_box" placeholder="Enter your location"> <div class="nav_header">
<button class="search_btn" (click)="istoggle()">Search</button> <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>
<div class="clear"></div>
</div> </div>
</ion-content> <ion-content class="sort_wrappper">
\ No newline at end of file
<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 @@ ...@@ -228,60 +228,47 @@
.sort_wrappper { .sort_wrappper {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
position: fixed; background: #fff;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99; z-index: 99;
.sort_inner { agm-map {
margin: 0 auto; width: 100%;
width: 90%; height: 100vh;
padding: 10px; }
padding-left: 15px; .add_address_wrapper {
padding-right: 15px; position: fixed;
padding-bottom: 15px; bottom: 0px;
background-color: #fff; left: 0px;
position: relative; right: 0px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); padding: 20px;
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); border-top-left-radius: 15px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3); border-top-right-radius: 15px;
top: 25%; background: #fff;
border-radius: 0px; -webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
h4 { -moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
text-align: center; box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
color: rgba(59, 57, 77, 1); h5 {
color: rgba(41, 40, 91, 1);
margin: 0px; margin: 0px;
font-weight: bold; padding: 0px;
padding: 10px; font-weight: 800;
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;
} }
ul { ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
padding-top: 30px;
li { li {
list-style: none; list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16); margin-bottom: 15px;
padding-top: 10px; p {
padding-bottom: 10px; margin: 0px;
padding: 0px;
color: rgba(176, 174, 199, 1);
padding-left: 5px;
}
.styled-checkbox { .styled-checkbox {
position: absolute; // take it out of document flow position: absolute; // take it out of document flow
opacity: 0; // hide it opacity: 0; // hide it
...@@ -299,7 +286,7 @@ ...@@ -299,7 +286,7 @@
vertical-align: text-top; vertical-align: text-top;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 5px; border-radius: 50%;
background: white; background: white;
border: 1px solid rgba(215, 213, 228, 1); border: 1px solid rgba(215, 213, 228, 1);
} }
...@@ -331,22 +318,5 @@ ...@@ -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'; ...@@ -21,6 +21,8 @@ import { Router, ActivatedRoute } from '@angular/router';
export class HomePage implements OnInit { export class HomePage implements OnInit {
isShow = false; isShow = false;
public lat: number = 51.678418;
public lng: number = 7.809007;
slideOpts = { slideOpts = {
slidesPerView: 1.5 slidesPerView: 1.5
......
src/app/nearby/nearby.page.html
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
</div> </div>
<ion-content> <ion-content>
<div class="nearby_map"> <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-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" (markerClick)="clickedMarker(m.label, i)" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)"> <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> <agm-info-window>
<div class="click_marker"> <div class="click_marker">
<h5>Lulufashion Store</h5> <h5>Lulufashion Store</h5>
......
src/app/nearby/nearby.page.ts
...@@ -49,8 +49,6 @@ export class NearbyPage implements OnInit { ...@@ -49,8 +49,6 @@ export class NearbyPage implements OnInit {
} }
// google maps zoom level // google maps zoom level
zoom: number = 8; zoom: number = 8;
// initial center position for the map
lat: number = 51.673858; lat: number = 51.673858;
lng: number = 7.815982; 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