GhazaliTajuddin.com

Ionic Geolocation

March 9, 2018 by ghazalitajuddin Leave a Comment

Command prompt check npm module version

npm -v

npm -v

Command prompt check ionic version

ionic -v

ionic -v

Command prompt npm update global

sudo npm update -g

1	sudo npm update -g

Command prompt date ionic cli global

npm update -g ionic

1	npm update -g ionic

Command prompt create new project

ionic start geomap blank

1	ionic start geomap blank

Command prompt install geolocation plugin

ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"

1	ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"

npm install --save @ionic-native/geolocation

1	npm install --save @ionic-native/geolocation

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Geolocation Test 3
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <p>Latitude: {{ lat }}</p>
 <p>Longitude: {{ lng }}</p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Geolocation Test 3

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>Latitude: {{ lat }}</p>

<p>Longitude: {{ lng }}</p>

</ion-content>

Home.ts

import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';
import { NavController, Platform } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  lat: any;
  lng: any;

  constructor(public platform: Platform, public navCtrl: NavController, public geo: Geolocation) {

    platform.ready().then(() => {
      this.initMap();
    });
    

  }

  ionViewDidLoad(){
    
    // this.geo.getCurrentPosition().then( pos => {
    //   this.lat = pos.coords.latitude;
    //   this.lng = pos.coords.longitude;
    // }).catch( err => console.log(err) );  
   
  
  }

  initMap(){

    this.geo.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then( pos => {
      this.lat = pos.coords.latitude;
      this.lng = pos.coords.longitude;
    }).catch( err => console.log(err) );

    let watch = this.geo.watchPosition({
      enableHighAccuracy: true,
      timeout: 7000,
      maximumAge: 0
    });
    watch.subscribe((data) => {
    //this.deleteMarkers();
    //let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
    //let image = 'assets/imgs/blue-bike.png';
    //this.addMarker(updatelocation,image);
    //this.setMapOnAll(this.map);

    this.lat = data.coords.latitude;
      this.lng = data.coords.longitude;

  });
    
  }

}

import { Component } from '@angular/core';

import { Geolocation } from '@ionic-native/geolocation';

import { NavController, Platform } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

lat: any;

lng: any;

constructor(public platform: Platform, public navCtrl: NavController, public geo: Geolocation) {

platform.ready().then(() => {

this.initMap();

});

}

ionViewDidLoad(){

// this.geo.getCurrentPosition().then( pos => {

// this.lat = pos.coords.latitude;

// this.lng = pos.coords.longitude;

// }).catch( err => console.log(err) );

}

initMap(){

this.geo.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then( pos => {

this.lat = pos.coords.latitude;

this.lng = pos.coords.longitude;

}).catch( err => console.log(err) );

let watch = this.geo.watchPosition({

enableHighAccuracy: true,

timeout: 7000,

maximumAge: 0

});

watch.subscribe((data) => {

//this.deleteMarkers();

//let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);

//let image = 'assets/imgs/blue-bike.png';

//this.addMarker(updatelocation,image);

//this.setMapOnAll(this.map);

this.lat = data.coords.latitude;

this.lng = data.coords.longitude;

});

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Geolocation } from '@ionic-native/geolocation';
import { StatusBar } from '@ionic-native/status-bar';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { Geolocation } from '@ionic-native/geolocation';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Geolocation,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

config.xml

<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />

<config-file overwrite="true" parent="NSLocationWhenInUseUsageDescription" platform="ios" target="*-Info.plist">
  <string>Allow the app to know your location</string>
</config-file>

<config-file overwrite="true" parent="NSLocationWhenInUseUsageDescription" platform="ios" target="*-Info.plist">

<string>Allow the app to know your location</string>

</config-file>

Run apps on device

ionic cordova run android

1	ionic cordova run android

Reference

https://ionicframework.com/docs/v1/guide/testing.html

https://ionicframework.com/docs/native/geolocation/

https://github.com/apache/cordova-plugin-geolocation

https://www.npmjs.com/package/cordova-plugin-geolocation

https://techionichybride.blogspot.my/2017/09/how-to-reduce-white-screen-after-splash.html

Xcode 7.3.1 with iOS 10 support

import { Component, ViewChild, ElementRef} from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation'

 declare var google: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
   @ViewChild('map') mapElement: ElementRef;
   map: any;

  lat: any;
  lng: any;

  markers = [];
  marker : any;

  constructor(public navCtrl: NavController, public geo: Geolocation, public platform: Platform) {
    platform.ready().then(()=>{
      this.initMap();
    });
  }

  initMap(){

    //get the latest object position 

    this.geo.getCurrentPosition(
      { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }
    ).then( pos => {
      this.lat = pos.coords.latitude;
      this.lng = pos.coords.longitude;

     let mylocation = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
    
      this.map = new google.maps.Map(this.mapElement.nativeElement, {
      zoom: 21,
      center: mylocation });

    } 
    ).catch( err => {
      console.log( err );
    });

    //watch if object move

    let watch = this.geo.watchPosition({
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    });

    watch.subscribe((data) => {

      this.lat = data.coords.latitude;
      this.lng = data.coords.longitude;

      
      this.deleteMarkers();
      //this.marker.setMap(null);

      
      let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
      let image = 'http://maps.google.com/mapfiles/ms/icons/truck.png';
      
      //this.map.setCenter({"lat": this.lat, "lng": this.lng});
    
      this.addMarker(updatelocation,image);
      this.setMapOnAll(this.map);

   
      

    });

  }

  addMarker(location, image) {
    let marker = new google.maps.Marker({
      position: location,
      map: this.map,
      icon: image
    });
    //this.map.setCenter(location);
    this.markers.push(marker);
    
  }
  
  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }
  
  clearMarkers() {
    this.setMapOnAll(null);
  }
  
  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }

  

}//close class

100

101

102

103

104

105

106

107

108

109

import { Component, ViewChild, ElementRef} from '@angular/core';

import { NavController, Platform } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation'

declare var google: any;

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

@ViewChild('map') mapElement: ElementRef;

map: any;

lat: any;

lng: any;

markers = [];

marker : any;

constructor(public navCtrl: NavController, public geo: Geolocation, public platform: Platform) {

platform.ready().then(()=>{

this.initMap();

});

}

initMap(){

//get the latest object position

this.geo.getCurrentPosition(

{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }

).then( pos => {

this.lat = pos.coords.latitude;

this.lng = pos.coords.longitude;

let mylocation = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);

this.map = new google.maps.Map(this.mapElement.nativeElement, {

zoom: 21,

center: mylocation });

}

).catch( err => {

console.log( err );

});

//watch if object move

let watch = this.geo.watchPosition({

enableHighAccuracy: true,

timeout: 5000,

maximumAge: 0

});

watch.subscribe((data) => {

this.lat = data.coords.latitude;

this.lng = data.coords.longitude;

this.deleteMarkers();

//this.marker.setMap(null);

let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);

let image = 'http://maps.google.com/mapfiles/ms/icons/truck.png';

//this.map.setCenter({"lat": this.lat, "lng": this.lng});

this.addMarker(updatelocation,image);

this.setMapOnAll(this.map);

});

}

addMarker(location, image) {

let marker = new google.maps.Marker({

position: location,

map: this.map,

icon: image

});

//this.map.setCenter(location);

this.markers.push(marker);

}

setMapOnAll(map) {

for (var i = 0; i < this.markers.length; i++) {

this.markers[i].setMap(map);

}

clearMarkers() {

this.setMapOnAll(null);

}

deleteMarkers() {

this.clearMarkers();

this.markers = [];

}

}//close class

Breakfast di De Aisyah Kuantan

February 21, 2018 by ghazalitajuddin Leave a Comment

Baru ni aku sekeluarga patutnya join kursus haji di masjid jamek batu 8. Tapi alkisahnya, baru beberapa ratus meter, tayar kereta pancit. Check ingatkan kurang angin, sekali flat terus, tayar dah bocor sebelah dalam rupanya. Memang kena tukar dah. Terpaksalah tukar tayar spare dahulu. Nasih baik la tayar spare elok lagi. Boleh tahan juga nak tukar tayar ni dah lama tak buat. Basah kuyup buat dek peluh.

Lepas je tukar tayar, misi ditukar. Mood nak gi kursus pun kelaut sebab dah lambat. Maka bawalah semua pergi minum pagi. Di Kuantan ni sebenarnya ada banyak juga option untuk minum pagi ni. Disebabkan ketika itu berada di jalan by-pass, maka terus saha aku memandu ke Restoran De Aisyah yang terletak di jalan by-pass Kuantan, berhampiran dengan airport kuantan.

De Aisyah ni lebih kepada konsep foodcourt, ada beberapa peniaga makanan yang sewa tapak niaga dengan owner De Aisyah ni la. So antara menu meletop yang korang boleh try kat sini adalah

Nasi Kerabu Kemira
Mee / Hoon Sup Kemira
Nasi Lemak Beraneka Lauk
Lempeng Kelapa
Roti Jala
Beraneka Kuih Muih

Memang meriah kalau minum pagi kat sini, memang kalau salah timing parking pun agak susah. Personally memang aku rekemen la bawak keluarga sesekali turun kuantan breakfast kat sini. InsyaAllah puas ati.

Selfie sket!

Abg danial dengan laksanya

Kakak Dina love nasi minyak!

Aliya dengan laksa juga!

Kaunter nasi lemak

Kuih muih

Ramai orang tau!

The famous amos nasi kerabu kemira!

Kaunter nasi kerabu

Bangunan baru MPK dah dibuka.

February 19, 2018 by ghazalitajuddin Leave a Comment

Sekarang sebarang urusan pembayaran cukai dan lesen MPK boleh dibuat di bangunan baru Majlis Perbandaran Kuantan.

Bangunan ini belum dirasmikan lagi tapi sudah boleh digunakan. So nanti jangan ada yang tersalah pergi bangunan lama pulak. Jauh juga tu nak menapak.

Nasi Lemak Kukus KLCC, Terpencil Tapi Power!

February 11, 2018 by ghazalitajuddin Leave a Comment

Hari ni aku nak share dengan korang tempat makan nasi lemak favourite kitorang di Kuantan. Kalau nak cari nasi lemak malam-malam hari, kitorang takkan pergi tempat lain melainkan disini. Tak kira lah macam mana sekali pun, kalau bab nak makan nasi lemak, wajib disini. Ntah dia buh apa dalam nasi lemak dia aku pun tak tahu. Tapi Nasi Lemak Kukus KLCC ni memang terbaik. Jangan tak percaya, kat KLCC pun tak dapat weh nasi lemak sedap macam ni!

Cuma pesan aku, jangan pergi lambat sangat, jam 9 tu kira lambat sangat dah. Serious bos! Warung ni bukak petang ke malam. Tapi kalau jam 9 tu, sayur biasa sold out dah. Tinggal ayam aje la nanti huhuhu.

KELEBIHAN

Kekuatannya terletak pada cara goreng ayam berempahnya deep fry dan agak moise, selain daripada sambal bilisnya yang sedap! Standard hidangannya adalah nasi lemak kukus ayam bersama sayur kangkung. Itu pun sudah cukup. Silap haribulan menambah dah. Memang bahaya tempat macam ni. Malangnya aku tak sempat nak shoot menu lengkap untuk entry ini sebab time aku datang sayur kangkung dah habis. So aku share mana yang ada sahajalah.

Selain daripada sambal bilis, ada juga sambal kerang, sambal telur puyuh dan kalau tak silap kadangkala ada sambal sotong. Ada juga lauk lain seperti limpa goreng dan telur mata! Panas2 beb! Kecur air liur haaa!

LOKASI

Owh lupa aku nak mention lokasi warung ni agak terpencil berhampiran jalan lama Sungai Soi, Tanjung Lumpur. Walaupun terpencil, steady je bang bertahan sehingga hari ini. Alhamdulillah. Tahniah pada owner.

So nanti aku usahakan dapatkan gps lokasi aku share sini. Sapa tak sabo tu, boleh try waze atau google dulu. Selamat menjamu selera!

Bubbye!

Tempat diskusi santai sambil makan minum di Kuantan

February 8, 2018 by ghazalitajuddin Leave a Comment

Korang pernah tak ajak rakan sekerja atau client meeting kat luar? Kat restoran ke? Cafe ke? Yelah kadang2 puas juga kat office. Kat luar lebih santai, lebih kurang formal, kurang stress. Tak pun kalau korang datang kuantan dari KL, mana port discussion korang? Meh share sket!

Nak buat discussion kat tempat-tempat makan minum ni kena pilih juga. Ada sesetengah tempat tak boleh. Bising sangat! Kotor pn ada!

Jadi post kali ni aku nak kongsi kat mana port terbaik secara rambang pilihan aku kalau nak buat diskusi sambil ngeteh di Kuantan ni.

Kriteria tempat minum ni mesti ada

Bersih
Kurang bising
Menu bagus
Boleh open notebook
Ada power plug (Option)
Ada wifi (Option)

1. Coffee Street Sri Dagangan

So antara pilihan terbaik buat masa ini adalah Coffee Street Sri Dagangan yang terletak di tengah bandar. Berhampiran dengan Kuantan City Mall. Cafe ini tidak berhawa dingin, kalau waktu siang kurang orang, waktu malam biasanya penuh la. Tempatnya juga luas jadi memang selesa kalau nak buat discussion buka notebook. Meja boleh adjust kalau tak cukup. Lokasi pun bersih dengan menu makan minum bervariasi. Ada makanan panas dan western food. Milo ais disini sangat kaw. Boleh try sendiri nanti.

Kat sini juga ada beberapa table yang berhampiran power plug, ada access wifi yang agak ok untuk upload dan download. Cukup untuk satu team 3,4 orang buat kerja, ramai lagi pun boleh. Disebabkan kurang orang, boleh duduk dari pagi sampai petang. Takde orang nak halau. Tapi order la sikit kan. Jangan la air kosong je. Nak solat boleh ke masjid berdekatan dalam 200 meter. Kira bagus la kan?

2. Kemaman Kopitiam Sri Dagangan

Ok Kemaman Kopitiam ni adalah port yang tidak asing lagi di Kuantan. Ia berkonsepkan cafe dan terdapat beberapa buah kemaman kopitiam di Kuantan ni. Boleh google atau waze. Kemaman Kopitiam ni open tidak berhawa dingin, bersih, lebih exclusive, sesuai juga kalau nak bawa VIP discuss.Ada akses wifi tapi slowwwww, power point pun ada. Then ruang atur kopitiam ni agak sempit. Meja pun kecil disusun agak rapat. Jika lebih dari 10 orang memang tak digalakkan ke kopitiam ini. Menu dia pun not bad juga, masakan panas ada, roti bakar, pulut panggang (Ohsem! Must try), mee curry dll. Cuma kalau nak duduk lama macam tak berapa sesuai. Kerusi dia pun kebanyakannya tak boleh bersandar. Kalau untuk small short discussion ok.

3. MYNY Cafe Taman Bandar / Kompleks Dagangan Indera Mahkota

MYNY Cafe juga merupakan salah satu pilihan aku jika nak buat discussion sebab boleh open notebook buat kerja. Terletak berhadapan Hotel Sri Manja, Indera Mahkota Kuantan. Tempatnya luas, bersih, selesa, berhawa dingin, mempunyai menu yang pelbagai juga. Sesetengah table berdekatan dengan power plug. Jadi first come first serve. Tiada akses wifi disini.

4. LEBAK Cafe Indera Mahkota

Haaa… buat peminat2 coffee. Boleh lah bertandang ke Lebak Cafe. Lokasinya adalah berdekatan dengan Hotel Sri Manja. Sederet dengan 7e. Lokasinya bersih, ada bahagian berhawa dingin, ada tidak. Speciality kat sini adalah coffeenya. Depa ada mesin brew sendiri. So mmg add value la buat penggemar coffee. Cuma lokasinya juga agak kecil, dan sentiasa ada orang. Menunya juga ok, ada masakan panas dan western kalau tak silap. Kalau untuk small short discussion ok, sama macam kopitiam. Malangnya tiada akses wifi disini. Power point ada untuk meja tertentu.

5. Burger King Indera Mahkota

Ok BK Indera Mahkota juga sesuai untuk buat discussion disebabkan lokasinya yang agak luas dan terbahagi kepada bahagian berhawa dingin dan tidak. Bahagian luar terdapat meja yang boleh adjust dan mempunyai power point. Bahagian luar juga biasanya kurang orang cuma ada masa dipenuhi oleh student kerana ia terletak berhampiran dengan UIA.

6. Lain-lain cafe

Ada juga Old Town White Coffee, Coffee Bean, Starbuck yang tak perlu lah aku ulas macam mana facilitiesnya. Hehehe.

(Foto ehsan Rejim Mongol)

GhazaliTajuddin.com

Ionic Geolocation

Breakfast di De Aisyah Kuantan

Bangunan baru MPK dah dibuka.

Nasi Lemak Kukus KLCC, Terpencil Tapi Power!

Tempat diskusi santai sambil makan minum di Kuantan

1. Coffee Street Sri Dagangan

2. Kemaman Kopitiam Sri Dagangan

3. MYNY Cafe Taman Bandar / Kompleks Dagangan Indera Mahkota

4. LEBAK Cafe Indera Mahkota

5. Burger King Indera Mahkota

6. Lain-lain cafe

Categories

Top Posts & Pages

Main navigation

1. Coffee Street Sri Dagangan

2. Kemaman Kopitiam Sri Dagangan

3. MYNY Cafe Taman Bandar / Kompleks Dagangan Indera Mahkota

4. LEBAK Cafe Indera Mahkota

5. Burger King Indera Mahkota

6. Lain-lain cafe

Footer

Tags

Categories

Top Posts & Pages