Briefing on NPM - nodejs

Node js is a Javascript runtime which allows us to execute Javscript without browser, thus allows us to use Javascript at server level / as a command prompt application.

Node JS also has NPM, short form of Node Package Ecosystem, which allows users to share Javascript libraries / frameworks to other developers and is being widely used across globe. NPM makes it simple to add / install any javascript framwork into the project and also helps in keeping the frameworks updated.

In this article we go through npm on a high level.

First, to install Node JS in your machine, open NodeJS.org and download the executable as per your Machine specs.

Once Node JS installed in the machine, it adds Node.js Command Prompt through which we execute the npm and node commands.

Using NPM

Upon installing Node Js, a new folder 'node_modules' in current user's user folder.

Eg: C:\Users\laxmi\node_modules 

As stated above, through npm, we can add / install any packages on the fly, without the need of going to the particular site and downloading the packages. We can install the files globally i.e. in node_modules folder or also locally, i.e. in a  project folder.

Let us run a sample install npm for jquery. Command as below

npm install <<Package name>>

This installs latest JQuery framework to the global folder "node_modules", here 3.2.1

We can now use these files in any of our projects. In order to install it locally, navigate the Node Command prompt to the corresponding folder and execute the same command.

In order to manage the NPM packages in better way, we have 'package.json'. This has some basic configuration attributes to provide info about Project, like project name, version, dependencies of the project, i.e. list of the frameworks being used.

in order to create basic package.json file, execute below command

npm init 

This command promts for details in it, about name, version, license. To avoid all these, add 'yes' or 'y' option to it.

npm init -yes

Sample package.json file is as below

{
  "version": "1.0.0",
  "name": "demo",
  "dependencies": {
    "jquery": "^3.2.1",
    "bootstrap": "3.1"
  }
}

Now if we run the npm install command, it installs all the dependencies into the project.

To learn more about npm, use below references.

https://docs.npmjs.com/

http://nodesource.com/blog/the-basics-of-package-json-in-node-js-and-npm/ 

Learning Google Maps Javascript API

If you have any requirement related to Maps in your website, one among the famous APIs is Google Maps Javascript API. There are many cool features available in it and also it’s very easy to get the knowledge on it.

In this post, I will walk through some basic features of it and also will explain how to add it to a web page.

To display a simple map in a website using this API, follow below procedure.

As we need an html placeholder to display the map, add a Div in the html, where we need to show this map and provide an ID to it to refer it through Javascript DOM.

Load the Maps API into the website. We have multiple options / attributes here, explained as below

<script async defer
      src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap />

The ‘async’ attribute in above allows the API to load along with Page.
Once the API is loaded, it calls the Callback method provided in URL, in above example it is initMap.

If we want to call the method through Javascript after the page loaded, use below line. 

google.maps.event.addDomListener(window, 'load', initMap);

Also, once we register to Google maps, we are provided an API key, we have to provide it in the URL parameter. If it’s just for demo purpose / development, we can ignore the Key for now.

We have multiple Classes in this API. Few important ones are explained as below

Maps: This class holds the Maps on the screen. We can create multiple objects  of it and each one holds a map instance on the page.The Constructor has 2 parameters, one is the DOM element of the placeholder in the web page where the Map is  displayed and the other one is Maps Options list. Few options are as below,

Zoom: Number ranging from 1 to 20. 1 being zoomed at maximum level, World and 20 being zoomed at minimum level, Buildings.
Center: A latlng object referring to a position the map to be centered at

LatLng: This class represents a Point on a map, having a latitude and longitude. Constructor has 2 parameters, Latitude and Longitude values.

Marker: This class represents a marker / pointer displayed on the Map. We can add any number of Markers to a Map. This constructor takes in Options list. There are many options and below are few.

Positon: a latlng object referring to a position on the map where the pointer to be set
Map: Map object, the object of the map on which we are adding the markers
Title: title of the Marker, it is displayed upon hovering the pointer
Label: A label is the value appeared on the Pointer like , characters ‘A’,’B’ or ‘1’, ‘2’

Below is the sample code containing all these steps . Copy to your local html file and run it in a browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Demo</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #mapSection {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="mapSection"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      var userMap;
      function initMap() {
        var hyderabad = new google.maps.LatLng(17.4126,78.2679);
        var mapOptions = {  
           zoom:7,  
           center: hyderabad  
        }; 
        userMap = new google.maps.Map(document.getElementById('mapSection'), mapOptions);

        var location1 = new google.maps.LatLng(17.4510051,78.3748113);
     var marker1 = new google.maps.Marker({
        position: location1,
        map: userMap,
        title: 'Shilparamam',
        label:'A'
     });
     var location2 = new google.maps.LatLng(17.3615687,78.4724758);
     var marker2 = new google.maps.Marker({
        position: location2,
        map: userMap,
        title: 'Charminar',
        label:'B'
     });    
      }
      google.maps.event.addDomListener(window, 'load', initMap); 
    </script>
  </body>
</html>

It will be appearing in web page as below.