Skip to main content

ES6 101 - Map

ES6 101 - Map
ES6 Map is the topic of today’s post which also is the 11th in the ES6 101 Series. Map is going to be fairly easy, so before jumping into it, if you want to look at other features we have covered so far, here is a quick list for your reference.Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringFor…ofSetNow let’s see what Map has to offer. As opposed to Set (which by the way, I highly recommend reading), Map saves values as key-value pair. Let’s see for ourselves how this works!Example of ES6 Mapvar dummyMap = newMap(); dummyMap.set("1"); // Method is set as against add in ES6 Setconsole.log(dummyMap); // [["1",null]] dummyMap.set("1", "one"); console.log(dummyMap); // [["1","one"]] dummyMap.set("2", "two").set("3","three"); console.log(dummyMap); // [["1","one&…

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.

    Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views.

    The Google Street View Image API lets you embed a static (non-interactive) Street View panorama image in your web-page without using any sort of Javascript. You can might as well get the image using the API and save it to your machine, create an album and share it on Facebook, Twitter or any other way you wish to share! The viewport is defined with URL parameters sent through a standard HTTP request, and is returned as a static image. This means that, what you get in the static image is all controlled through a HTTP web link and nothing more.

The Faber Bistro atop Mount Faber, Singapore

    The image above is of the Faber Bistro atop Mount Faber in Singapore. This is an excellent place to visit in Singapore and should take the Faber Loop Walk here. You will definitely enjoy the views of the island city from here. The fries at this bistro after walking along the Faber Loop are definitely worth a try.

    Well, let's get back to the Google Street View Image API and how to use this API. All you need is to generate a HTTP request to get a static image. Take a look at the image below. This is the famous Marina Bay Sands in Singapore. You can easily spot the URL in this image. This is an example of the URL that needs to be generated. I will explain each of the parameters used in this HTTP request.


    A Street View Image request is of the following form:

http://maps.googleapis.com/maps/api/streetview?parameters

    The first of the required parameters is size. Size specifies the output size of the image in pixels. Size is specified as width x height - for example, size=600x400 will return an image 600px wide and 400px in height. The maximum size of the image returned is 640x640. If you use the Street View Image API for Business then you can get images of up to 2048x2048.

    The next parameter that is required is location. Location can be either a text string (such as Marina Bay Sands, Singapore) or a lat/lng value (1.28821, 103.854121). The Street View Image API will snap to the panorama photographed closest to this location. Because Street View imagery is periodically refreshed, and photographs may be taken from slightly different positions each time, it's possible that your location may snap to a different panorama when imagery is updated.

    The third and the last required parameter is sensor. Sensor indicates whether or not the request came from a device using a location sensor, like a GPS to determine the location sent in this request. This value must be either true or false.

    The next four are optional parameters but very important. Proper use of these parameters will enhance the outputs of your Street View Image request.

    The first important optional parameter is heading. Heading indicates the compass heading of the camera. Accepted values are from 0 to 360 (both indicating North), with 90 indicating East, 180 indicating South and 270 indicating West. If no heading is provided, a value will be calculated that directs the camera towards the specified location, from the point at which the closest photograph was taken.

    The next important optional parameter is fov. Fov or Field of View is expresses in degrees, with a maximum allowed value of 120. The default value for fov is 90. When dealing with a fixed-size viewport, as with a Street View image of a set size, field of view in essence represents zoom, with smaller numbers indicating a higher level of zoom.

    The next optional and another very important parameter is pitch. Pitch specifies the up and down angle of the camera relative to the Street View vehical. This is often, but not always flat horizontal with default value being 0. Positive value, with a maximum up to 90 angle the camera upwards while a negative value with minimum up to -90 angle down the camera.

    These three optional parameters usually play the most important part in displaying the correct Street View image. To get the perfect image in the scope, you need to play around with these 3 optional but very important parameters. The fourth optional parameter is key. When you will have an API key for using the Google Street View Image API, you will have to use the key parameter as well.

    So, to summarize the parameters that form the Google Street View Image HTTP request call,
  • Required parameters
    • size
    • location
    • sensor
  • Optional but important parameters
    • heading
    • fov
    • pitch
    • key
    How you enjoy the Street View Image API. Do let me know how you would be putting it to use and which places you would visit through the Street View. Do share and comment and let me know of any questions regarding Google Maps that you would like to be answered! Till the next post, enjoy your vacations using the Google Street View.

Recommended for You

ES6 101 - Spread operator

ES6 101 - Spread Operator
Welcome to the fourth post in the ES6 101 series and the topic of discussion today is the Spread operator or the dot dot dot operator.... It is not very common to call it the “dot dot dot” operator, but I just kind of like the ring to it! Also when you say “dot dot dot” it actually helps me visualize unpacking multiple gifts from a gift box. Wondering why I am taking about gifts and gift boxes and “dot dot dot”. Well, the spread operator... is actually more like unwrapping gifts from a gift box. The spread syntax allows an iterable such as an array expression to be expanded in-place. Let’s actually dive into some examples straight away. It is much more simpler that way!Examples of the ES6 Spread Operator ...Example #1Problem statement: Let’s write a function to display the sum of 3 numbers passed to it in an array.

We would have done this as follows in the old ES5 way. 😏var arr = [1,2,3]; functionsum(a,b,c) { var output = a + b + c; consol…

Diwali Wishes

Happy Diwali 2017
We are already on the brink of the new year and the festival of lights is already here!May this festival of lights, bring joy, peace and prosperity to you and your loved ones! Wishing you a very happy Diwali and a prosperous new year!For your holiday family portraits and baby shoots I would recommend a really talented and professional photographer in the SF Bay Area. Her portfolio would speak for itself!Happy holidays and have a safe Diwali!

ES6 101 - Destructuring

ES6 101 - Destructuring ES6 Destructuring assignments is the topic of this post and we will take a look at what destructuring means and we will look at multiole examples to understand the concept. As the name suggests, using the destructuring syntax, we would be breaking down values in an array or properties in an object into seperate variables.Arrays and objects allow you create, on-the-fly various packages of data.let a = [1,2,3]; ES6 destructuring uses similar syntax, however the LHS will now be a variable that would hold the package that you need to create. Sounds complex? πŸ˜“ Not really, just move ahead to the example that follows and you should get the hang of it.let a = [1,2,3]; let [x,y] = a; // We are now assigning array 'a' to a new arrayconsole.log(x); // 1console.log(y); // 2let [m,n,o] = a; console.log(m); // 1console.log(n); // 2console.log(o); // 3This helps us clearly see what destructuring does for an array! It basically unpacks the values in the array a…

ES6 101 - For..of

ES6 101 - For..of This is the 9th post in the ES6 series and we have looked at a whole bunch of some amazing and highly productive ES6 features that you can start using right away! Here is a comprehensive list of all the features that we have covered so far. 😍Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringNow let’s look at what for..if has to offer us. Essentially, for..of does exactly the opposite of what for..in does. Let’s see what the difference is.// Using for..inlet someVar = [1,2,3,4,5] for(let item in someVar) { console.log(item); // The index values would be consoled. } When you execute the above code snippet, you will observe that, you get all the index values 0 1 2 3 4 of the array in the console. If you had to get access to the values at these indexes in the array, you would have to add the following to the above snippet in the for..in loop.console.log(`${it…

ES6 101 - Set

ES6 101 - Set
This is going to be the 10th post in the ES6 101 series and the topic for today is Set. Set object is a collection of values and is iterable. One cool thing about the values in set is that these are unique. This means that a set can have a value only once. Moreover you can think of a set as an actualy set in Mathematics. We will see a few samples to understand this concept of set.Examples of ES6 SetCreating a new set and adding values to it.Let’s create a new set and add some values to it and then discuss it further.let dummySet = newSet(); // That's it! A new set object is created dummySet.add(1); console.log(dummySet); // [1] dummySet.add(1); console.log(dummySet); // [1] and not [1,1]. This is because, values in a set are unique. dummySet.add(2).add(3).add(4); console.log(dummySet); // [1,2,3,4] dummySet.add('The UnderTaker').add('John Cena'); console.log(dummySet); // [1,2,3,4,'The UnderTaker…