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

A Giant called Google...



    Wondering what you will be reading in this post today and what is "Google Giant"! Well, I was working on a simple project a couple of months back and that is the time when I was amazed and by the size of data that Google Maps servers might be having! As most of the readers (developers and enthusiast included) would know or might have noticed, Google maps are rendered by stitching small images together. You must have observed this on quite a number of occasions, when you see grey tiles when you have a slow internet connection in particular. It takes time for the images or tiles as we call them to be displayed.

    Let us try and estimate what could be the size of the Google Maps data! Before proceeding, let's make a few assumptions and considerations.
1. Let's consider the Google Street View maps only.
2. The zoom level that is considered for the calculations is 21 - the max zoom level allowed on Google Maps API.
3. All the numbers are just an estimate and not actual values.

    Google maps zoom level goes from 0 to 21, displaying 1 image at zoom level 0 and 4,398,046,511,104 (about 4 trillion i.e. 4x10^12) image or tiles at zoom level 21. 4,398,046,511,104 tiles at zoom level 21 represent the entire world surface which is about 510.072 million sq km (196.940 million sq mi). Lets say, about 70.9% of the world is water and 29.1% is land, which would mean about 3,118,214,976,373 tiles would all be blue in color. About 30% of the land area is under forest cover, which means about 383,949,460,419 tiles would be green in color. The remaining 895,882,074,312 will have multiple colors depending upon what part of the land is part of these tiles. If the numbers have gotten too large, let's tabulate them.

Sr. No. No. of tiles Color of tiles
1 3,118,214,976,373 Blue
2 383,949,460,419 Green
3 895,882,074,312 Multicolored

    Now that we have a clear picture of the number of tiles and the colors they would have, let's try and estimate the size of these tiles. Each tile or image is 256x256 pixels and each blue and green color tile/ image would then be around 4KB each. This means that the total size in KB of all the green and blue colored tiles/ images would be about 14,008,657,747,168KB; that's about 13,046.5TB. This is huge and still there are about 0.8 trillion tiles left whose size needs to be calculated.

    Let us go ahead and do that as well. Since these remaining tiles are multicolored, the size of each tile ranges in between 13 to 17KB. For our calculations, let's assume that the size of each of the multicolored tile is about 15KB. That would mean that the total size of these tiles is about 13,438,231,114,680KB; that's about 12,515TB.

    That means; if my math is not wrong; the size of all the Google Map tiles for Google Map Street View at zoom level 21 alone is about 25,500TB.
 
    This 25K TB space is required to save tiles only for one type of Google Map at the highest zoom. There are tiles at other zoom levels and also tiles of other map types - Satellite Map and the Terrain Map. The labels that appear in the Hybrid map type is also a separate layer on top of the Satellite map. That means about 25K TB more for the satellite map at zoom level 21 and about the same for hybrid map at the same zoom level. Plus about a 15K TB for the labels layer in hybrid map. If the approximation is to believed, Google has around 100 thousand TB space for the maximum zoom level of all the map types.

    Yes, it seems comical to attempt such a calculation where every step of the way requires an approximation. That's why in the end I end up with a such a wide chasm of error. And, of course, this rough analysis does not cover area distortion introduced by mapping the globe's points onto a two dimensional surface. But, there you have it - the story of "Google - A Giant".

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…