How to find Location from Browser with Angular

Recently we had a project, where we need to find a location from Browser and display nearby data from the related location. Now, the challenge we had is how to workout with Angular JS. Whenever you check Google API for Maps (https://cloud.google.com/maps-platform/maps/) it provide you basic Javascript or JQuery based solution. Not Angular based (This applied to when we made this site). After multiple research we found Angular Maps. It has many items which we need. So in this blog, i will provide you steps where we have setup How to find location from Browser with Angular JS and Angular Map.

Angular Map Link: https://angular-maps.com/

Steps 1 – Create your Angular 6 project and go to project directory and run the below command.

npm install @agm/core

Steps 2 – Import the AgmCoreModule in the app.module.ts

import { AgmCoreModule } from '@agm/core';

After that, add AGM Core Root for Google API key and it looks like

How to find Location from Browser with Angular JS - Code Snippet

Note – You must need to provide a Google Maps API key to render Map. Get an API Key From Google

Steps 3 – Add following code to app.component.ts file

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lat: number = 21.149102499999998; // Set Any Latitude
  lng: number = 72.77611639999999; // Set Any Longitude
}

Steps 4 – Add following code to your Google HTML template which in our case is , app.component.html

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Steps 5 – To setup CSS we have added following code at app.component.css.

agm-map {
    height: 400px;
    width: 400px;
}

Note – Setup your Google template CSS class for managing the height and width. You must add the CSS class, without this class not display the Google Maps.You can set your own width and height

Steps 6 – Now, we are done with basic setup. What we need to achieve is how to fetch current position from browser. For that here is solution we need to apply.

Add one function in ngOnInit() like this at app.component.ts file

this.setCurrentPosition();

public setCurrentPosition()
{
        if ("geolocation" in navigator) { 
        navigator.geolocation.getCurrentPosition((position) => { 
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude; 
 
        this.getLocationAddress() // Using latitude and longitude getting address of place
       
    
    }, failure => {  
            switch (failure.code) {
            case 3:
                  // ...deal with timeout
                  break;
         case 2:
 // ...device can't get data
          break;
case 1:
          // ...user said no (PERMISSION_DENIED)
 }
    }); 
    } 
     
}

public getLocationAddress()
{
    let lat = this.latitude;
    let lng = this.longitude; 
    let latlng = new google.maps.LatLng(lat, lng);
    let geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng },(results, status)=> {     
      if (status == google.maps.GeocoderStatus.OK) 
      { 
            console.log(result); //In Result you will different types of address. Choose which one you want to display.
      }
    });
}


Steps 7 – Now, we are done. Build your project and run in your browser. When you run your project / page, it will look something like:

How to find Location from Browser with Angular JS

I would like to thank Niyati Parekh for this project work and research she did.

What is SCP and how to use SCP Commands

Recently we had to transfer some server. Server has so many images and size was in GB. So there was no option to download image through FTP and upload again. It was waste of resource and time. For that we applied SCP commands.

What is SCP?

SCP or secure copy allows secure transferring of files between a local host and a remote host or between two remote hosts. Linux SCP uses the same authentication and security as the Secure Shell (SSH) protocol from which it is based.

How to use SCP commands?

Copy file from local host to a remote host:

$ scp filename.txt username@to_host:/remote/directory/

Copy directory from local host to a remote host:

$ scp -r /local/directory/ username@to_host:/remote/directory/

Copy file from remote host to remote host:

$ scp username@from_host:/remote/directory/file.txt username@to_host:/remote/directory/

Copy file from a remote host to local host:

$ scp username@from_host:file.txt /local/directory/

Copy directory from a remote host to local host:

$ scp -r username@from_host:/remote/directory/ /local/directory/

For AWS Instance with PEM keys

scp -i <pem_key> <source_file> user@host:<location>

example

scp -i test.pem test.zip ubuntu@XX.XX.XXX.XXX:/ubuntu/home

NOTE: AWS allows only 1 file at a time to copy. You need to ZIP your file and apply command.

SCP Command options

–r Recursively copy entire directories.

-C Compression enable.

-l limit – Limits the used bandwidth, specified in Kbit/s.

-P port – Specifies the port to connect to on the remote host. Note that this option is written with a capital ‘P’.

Browser shortcuts keys

Here are some Browser shortcuts keys to work smart. These all shortcut keys work in Chrome, Firefox and Microsoft Edge.

Shortcut Keys / Description

F11 -Display the current website in full-screen mode, It covers your all screen size. To exit from this feature press F11 again.

F5 -To Refresh your current page

Esc -Stop page to load a page

Alt+Home -To Open Your Browser’s Homepage

Alt+Tab -Toggle between browser’s Windows

Alt+Left -Arrow Back Your Current Page

Alt+Right -Arrow Forward Your Current Page

CTRL+P -Print The Your Web Page

CTRL+S -To Save Your Current Web Page Offline in Your Computer

CTRL+O -To Open File Which is stored on Your Computer

CTRL+H -To Open Your Browser History

CTRL+J -To Open Downloads History

CTRL+Enter -This Shortcut key adds www and .com to the name of the website which you type in the address bar. For example, If You have typed tejaspmehta in the address bar than you don’t need to type http://www.

CTRL+D -To Bookmark Current Page

CTRL+ -Zoom In

CTRL-` -Zoom Out

CTRL+0 -Reset Zoom

CTRL+F -To Search In The Web Page

CTRL+L or F6 or ALT+D -Jump to the address bar

CTRL+SHIFT+Delete -To Open the Clear Browsing Data option

CTRL+T -To open a New Tab

CTRL+W -To Close The Current Tab

CTRL+SHIFT+T -To Open Previously Closed Tab

CTRL+Tab -To Switch Between Open Tabs.

CTRL+1 to 8 -To Switch Between Tabs of The Corresponding Number From Left to Right

CTRL+1 -To Switch the First Tab

CTRL+9 -To Switch the Last Tab

CTRL+N -To Open a New Browser Window

CTRL+U -To View a Web Page’s Source Code

CTRL+SHIFT+N -To Open Incognito (Private) Window

CTRL+K /CTRL+E -To Search a Google Query Directly

Spacebar -Moves Down a Page at a time

SHIFT+Spacebar – Moves Up a Page at a Time

Home -Go to the top of the web page

End -Go to the end of the page

Windows+Right Arrow – Half Browser Size in Right Side

Windows+Left Arrow – Half Browser Size in Left Size

Windows+Print Screen -Take a Screenshot of the Current Screen

Setup MongoDB with WAMP

We will learn how to setup MongoDB with WAMP.

Requirement: Wamp Server is already installed on your Windows (Version wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-32b) Or latest one

In Order to setup MogoDB with WAMP please follow following steps.

First, we have to download the latest build Mongo DB on MongoDB Official, download the zip file for version

After the file has been downloaded, we have to create some directories.

  • create the Mongo DB base folder under E:\wamp64\bin and named as “mongodb”. You have to create folder in your WAMP install Path.
  • create the Mongo DB version folder under E:\wamp64\bin\mongodb and named as “mongodb-win32-x86_64-2008plus-ssl-3.2.10”.
  • create the following directories under E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10

Create the file “mongodb.conf” under E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10\conf, then add this configuration..


# data directory
dbpath=E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10\data\db


# log directory
logpath=E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10\logs\mongodb.log
logappend=true


# run on localhost for development
bind_ip = 127.0.0.1
# using port
port = 27017

Extract  the downloaded zip file (In step 1 ) into bin folder.

Open the windows command prompt as administrator privilege and locate it to E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10\bin.

Execute this command to install Mongo DB as a windows service.


mongod.exe --install --config E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10\conf\mongodb.conf --logpath

E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10\logs\mongodb.log
OR


mongod.exe --install --service --config
E:\wamp64\bin\mongodb\folder-with-version\conf\mongodb.conf --logpath
E:\wamp64\bin\mongodb\folder-with-version\logs\mongodb.log --dbpath
E:\wamp64\bin\mongodb\folder-with-version\data\db
OR (If needed)


mongod.exe --reinstall --service --config
E:\wamp64\bin\mongodb\folder-with-version\conf\mongodb.conf --logpath
E:\wamp64\bin\mongodb\folder-with-version\logs\mongodb.log --dbpath
E:\wamp64\bin\mongodb\folder-with-version\data\db

Open “services.msc” and run MongoDB service then start the service. We can set manually or automatically when windows start up.

 

Add Path on Windows Environment Variables :

  1. Right click on My Computer.
  2. Click Advanced system settings.
  3. Click Environment Variables button.
  4. Click PATH on Variable column, then append this path.

;E:\wamp64\bin\mongodb\mongodb-win32-x86_64-2008plus-ssl-3.2.10\bin;

If you are working on PHP5.6.25 then add below one

;E:\wamp64\bin\php\php5.6.25

If you are working on PHP7.0.10 then add below one

;E:\wamp64\bin\php\php7.0.10

Note : adjust the version and take a look the delimiter “;”.

 

Check everything is running well :

Open the windows command prompt as administrator privilege.

Check with this command

c:\> mongo
MongoDB shell version: 3.0.1
connecting to: test
>
> use test;
switched to db test

Add Mongo DB PHP Extension into WAMP Server PHP

I have added version wise php_mongo.dll file. Please choose file as per your PHP version.

  1. Please copy this file into this directory E:\wamp64\bin\php\php5.6.25\ext
  2. Add this line “extension=php_mongo.dll” on the “php.ini” file in this directory E:\wamp64\bin\apache\apache2.4.23\bin\php.ini.
  3. Restart all Wamp Services.
  4. Check the extension is work by clicking Wamp icon -> PHP -> PHP Extensions, and ensure the php_mongo is checked.