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&…

The Street View Army

    Google's Street Views have caused controversy more often than not. Sometimes for privacy issues, sometimes for security reasons. But whatever the media has to say, we can't deny the fact that Google Street Views has brought the entire world at your finger tips. You can visit places that you would not be able to visit ever. You can walk the roads, that you had only imagined of treading. You can experience for yourself, various cultures, events, religions and lives of people across the globe all at the comfort of your home. You can visit the deserts, the snow clad mountains, the giant rivers or the gushing waterfalls. Today, let's take a look at the efforts Google is taking to capture the world for us.

Google Street View Car

    Aha! We all know this vehical. More popular than the Mercs and the BMWs, this street view car has roamed the streets of many a cities since May 25, 2007. Street Views started out as an experimental project with a SUV packed with several computers in the back; cameras, lasers and a GPS device mounted on the top. The car drove around the streets of US, to capture the first images of the Google Street View. Google then switched to a van for a brief period, before switching to a fleet of cars that scaled up the Street View project throughout US and around the world.

    After several iterations of the car and camera technology, the latest car has 15 lenses taking 360 degrees of photos. It also has motion sensors to track its position, a hard drive to store data, a small computer running the system, and lasers to capture 3D data to determine distances within the Street View imagery.

Google Street View Car with the camera assembly

Google Street View Trikes

    Some of the most interesting and fun places around the world cannot be visited in a car! And Google soon realized this and one day while mountain biking, Mechanical Engineer Dan Ratner realized he could combine his favorite hobby with Street View to explore new places, and set to work building a bicycle-based camera system. And so the Street View Trikes came into being somewhere in 2009. And as a result of the trikes, As a result, we’ve been able to see the parks and trails, university campuses, and even sports stadiums.

 Google Street View Trike with the camera assembly

Google Street View Snomobiles
    Once Google was able to take the Trike to all of these interesting places, they got to thinking about where else they could go and had the idea of putting their Street View equipment on a snowmobile. In typical Google fashion, they were able to put this together over the course of a few weekends using some 2x4s, duct tape, and extra hard drives wrapped in ski jackets to last through the freezing conditions. Fortunately the folks at Whistler Blackcomb were just as enthusiastic, so now we can explore, even the Whistler in Street View.

Google Street View SnowMobile with the camera assembly

Google Street View Trolleys

    With the success of the Street View, Google now had to get into the buildings, monuments and museums, and to achieve this, there was need for something small that would fit through museum doorways and navigate around sculptures. Again Google wore its thinking cap and came up with the compressed push-cart lovingly dubbed Trolley, to bring the museums around the world to our homes.

 Google Street View Trolley in action

 Google Street View Backpacks
    When you consider the myriad of locations to which the Google Street View team has been – from the Amazon rainforest to the Antarctic and just about everywhere in between – it’s kind of surprising that until now it hadn’t set foot inside a place pretty much on its own doorstep: the Grand Canyon. How could Google possible over-see this. To capture the images of the Grand Canyon which is accessible by foot alone, Google came up with a special camera-laden backpack dubbed the Trekker. “The Trekker" — which is controlled by its operator via an Android phone, automatically gathers photos as he walks. This enables the collection of high-quality imagery from places that are only accessible on foot.

The Trekker

    Well that's not all. If you thought that Google just brings to you the images from places above the Earth's surface, then be amazed! Google has now added its first underwater panoramic images to Google Maps, the next step in their quest to provide people with the most comprehensive, accurate and usable map of the world. With these vibrant and stunning photos you don’t have to be a scuba diver—or even know how to swim—to explore and experience six of the ocean’s most incredible living coral reefs. Now, anyone can become the next virtual Jacques Cousteau and dive with sea turtles, fish and manta rays in Australia, the Philippines and Hawaii. The experience was made possible by the Catlin Seaview Survey, a partnership between the global insurance company Catlin Group Limited and nonprofit Underwater Earth. The survey used the SVII - an underwater camera with a depth range of 100 meters -- was used to continuously capture thousands of 360-degree panoramas, giving people the opportunity to take virtual dives.

Glimpse of the Under-water street view

The SVII in action

    Hope you find this article interesting and continue enjoying your journeys across the globe with your very own 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 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 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…