Google Maps API: Rendering GPolylines and GSteps

Hello everybody,

due to the success of the last 2 posts (here and here) related to ASP.NET and Google Maps API, I decided to dedicated one more post to this topic. Today, we are going to work on GRoute, GPolyline and GStep objects for creating customized maps. Maybe you are going to say that this objects was already covered by others posts, however we will use a different approach. Instead of rendering google result and instructions automatically, we are going to do this by ourselves. That’s how it works.

First of all, I will start with an application similar to that created in later posts. So, we have a map, 2 text fields and a button. After the button ‘onclick’ event, the route is displayed on the map and the instructions on the left panel, as shown the picture below:

Note that the map route and the driving directions were rendered just like magic. All you have to do is passing the map’s and panel’s container to the GDirections constructor and the API works for you. Here is the code used:

Unfortunately, you want to customize the directions result or to change route markers, just like the project that I’m working on in the last months. How use this kind of approach? The first thing is using the deafult GDirections constructor, and do not pass any parameters for it. This will avoid your map and direction’s panel from being populated. Later, you will need to include two options in GDirections.load() function: getPolyline and getSteps. Here is how the new rederPolyline function looks like.

Now, the result comes with all route’s data. For printing driving directions you should use GDirections.getRoute(i) and GRoute.getStep(i) functions, which return each single direction. For printing the route on the map, you should use GDirection.getPolyline() and GMap2.addOverlay(polyline) functions. Here is my default implementation just to demonstrate the use of the API.

In this piece of code I created a ‘ul’ element and added each direction as a new ‘li’ element and add new markers to the map ilustrating route’s origin and destination. The result is shown below:

Now it’s up to you. Use your hability and imagination for creating customized and personal maps.
For more information about the Google Maps API, visit Google Maps API Documentation.

See you.

–
Fernando

Improving WebSite Performance

Hello everybody,

in 2008’s last post, I will share some advices to improve your website performance. In the last months, I’ve been working with Onibus Recife and one of our efforts was making the site load speed faster. To achieve an acceptable performance, we basically worked on three aspects:

1. Reducing the number of requests sent/received.
2. Reducing the number of bytes sent/received.
3. Rendering the result as soon as they are avaiable.

To reduce the number of requests changed between the server and the client we used two strategies: combined files and CSS sprites. The first one combines all existing scripts into a single script file, doing the same with CSS styles. So, instead of loading a huge number of .js and .css files, the user will load just one of each extension. You can see a .NET combiner implementation here. CSS sprites are similar: it reduces the number of image requests by combining your background images into a single image. With CSS sprites,  you create a single file that contains all the images laid out in a grid, requiring only a single image and only a single server call. Each image segment is displayed using CSS background-image and background-position properties.

Later, we reduced the number of bytes sent to the user by minifying Javascript and CSS and using GZIP compression. Minification is the practice of removing unnecessary characters from code to reduce its size. When code is minified all comments and unneeded white space characters are removed. To minify scripts and CSS files we used YUI Compressor. Besides the minification, a good practice is decrease the amount of data transmitted over the network by compressing it. Compression reduces response times by reducing the size of the HTTP response and Gzip is the most popular and effective compression method at this time. A GZIP .NET implementation is found here.

Finally, we worked on displaying the result as soon as they are avaiable. A good advice here is put Stylesheets at the top, which allowed the page to render progressively, and Javascripts at the bottom of the page, avoiding the block of parallel downloads.

There is a lot of other practices to improve your site performance in Yahoo!’s Exceptional Performance including articles and video. However, I explained here just few of them, which my team used and comproved the difference that this things do.

With this post, I conclude the blog activities during this year. I’m very happy to share with my readers all the content that I’ve wrote this period and would like to thank everyone that kept with me until now. Happy New Year to everyone. 

See you,

–
Fernando

JavaScript Unit Testing with YUI Test

Hi,

some posts ago I talked about JavaScript and user interface testing using Selenium. Today, I will present another option to test your JavaScript code.

YUI Test is a testing framework for browser-based JavaScript solutions, providing JavaScript Unit Testing. While not a direct part from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit.

Here are some of YUI Test features:

• Rapid creation of test cases through simple syntax.
• Advanced failure detection for methods that throw errors.
• Grouping of related test cases using test suites.
• Asynchronous tests for testing events and Ajax communication.
• DOM Event simulation in all A-grade browsers.

To start using YUI Test, you must walkthrough some steps:

1. Include required YUI Test files into your html created file
2. Write your javascript piece of code
3. Create a test case
4. Execute tests

There is straightforward tutorial and a 48 minutes video presented by Yahoo! engineer Nicholas C. Zakas in YUI Blog. It’s a good opportunity to add some TDD to your JavaScript code and improve project quality and maintenance.

See you,

–
Fernando

Interface Unit Tests with Selenium

Hi,

this week started with tests development, since I took the responsability of testing a Web Application. However, different from the others tests that I’ve done in the past, which covered C# code,  this ones are related to the project’s user interface. So, testing javascript code and interface functionality are now part of my work. Due to that, I found and amazing IDE with this puporse: let me show you Selenium.

“Selenium IDE is a Firefox addon that records clicks, typing, and other actions to make a test, which you can play back in the browser. Selenium IDE is not only recording tool: it is a complete IDE. You can choose to use its recording capability, or you may edit your scripts by hand”.

Here, is some of its features:

• Easy record and playback
• Intelligent field selection will use IDs, names, or XPath as needed
• Autocomplete for all common Selenium commands
• Walk through tests
• Debug and set breakpoints
• Save tests as HTML, Ruby scripts, Java, C# or any other format
• Option to automatically assert the title of every page

All you have to do is to recorde yourself a test by doing some actions with your mouse and keyboard in a web page, and later reproduce the test as if you were doing the working again. With that, is possible to test almost everything you want to check in a html code, which means, in the interface of the web page.

Let’s do an easy example. First of all, install the firefox extension here. After restarting your firefox, let’s navigate to the google home page and open the Selenium IDE by clicking on Tools -> Selenium IDE. Remember to press the recorde button, as show in the picture below, to start recording the test.

Now, type “Talking about computer science” and press OK. Later, click on the first occurency of the search, redirecting you to my blog

Now, select “nandokakimoto” and with the rigth button choose “verifyTextPresent nandokakimoto”, which means that the test will look for this text when it runs.

It’s done! Now stop the test by clicking again on the record button in Selenium IDE. Take a  look at the set of commands shown in the table to verify if the are correct. Then, it’s time to run the test and see the result. So, click on the run icon, as show in the picture below, and you will see that the test run with success.

To see the test code in C#, Ruby or Java code, just click on Options -> Format and choose your prefered language. It’s really easy. Now, go forward and create your own interface tests.

See you,

–
Fernando

ASP.NET and Google Maps – part 2

Hi,

in the last post, we talked about how to integrate an ASP.NET application with google maps. But, we didn’t do anything interesting at all. Today, I will show some features of the google maps API so your application can be more funny. What about an application that show how to people arrive in your home from anywhere? So, let’s do it now.

First off all, you will need to find the latitude and longitute of your home. For that, use the permalink of http://maps.google.com. There you can search for coordinates and use them in your javascript code. For example, after a search for my address I got the follow URL when click on Link option:

http://maps.google.com/maps?f=q&hl=pt-BR&geocode=&q=R.+General+Luis+Mallet,+Recife&sll=-8.126297,-34.905066&sspn=0.009644,0.013819&ie=UTF8&ll=-8.126212,-34.904251&spn=0.009644,0.013819&t=h&z=16&iwloc=addr

So, as you can see, my home is located on (-8.126212,-34.904251), so I used this valued to set the center of my map with the funtion setCenter(point, zoom?). To add a reference to your home, let’s use a map marker. You will need to create a marker in a specific point with the marker constructor GMarker(point) and add the marker in the map with the function addOverlay(marker). After this operations your javascript will be like that:

Now, if you compile and run you application, you will see the marker over your home on map.

All right, now let’s create the ASP.NET controllers that your friends will use to type their address. I will use that a Labe, a TextBox and a Button. So, after that my form will be like this:

Because we are calling a javascript function,  I’ve allready set the button click event using OnClientClick. In this function we will have to:

1. Get the textfield value;
2. Create a new google directions object;
3. Use the function directions.load() to return a route from your friend’s address to yours.

The searchRoute function is shown below:

Here, we use the ClientID property to get the server control identifier generated by ASP.NET. All we have to do later is to create a string in the format from: Source to: Destination and call the function directions.load(). Notice that I’m using my coordinates as destination, so in your case, just use yours.

Because every ASP.NET control sends a PostBack to the server, we will have to use some Ajax to view the result. If we don’t use Ajax, the page will be reloaded (and also the map since the function load() well be called to our form). To prevent that, we just have to use a ScriptManner and an UpdatePanel, which will make that just a part of the page is reloaded after the button click event.

Our new <body> is show belown:

If it’s still not working, remember to type the whole address, with city, country, etc.

Today we talked about more google maps API features and created a simple application that shows how to arrive to you home from anywhere.  To learn more about google maps and its API take a look at google maps API documentation.

See you.

–
Fernando

Secure Gmail

Hi,

few weeks ago, I told you about Gmail and Remote Sign Out.

Today, the good news is for those who worries about secure navigation. If you are one of them, it’s time to change some gmail default options. Now, you are able to configure your gmail account to use always HTTPS  protocol.

Using an https: URL indicates that HTTP is used with a different default TCP port (443) and an additional encryption/authentication layer between the HTTP and TCP. This system provides authentication and encrypted communication and is widely used on the World Wide Web for security-sensitive communication such as payment transactions and corporate logons.

To get a secure gmail experience, you just need to click on Settings and mark the option Always use https, as shown in the picture below.

It’s done!

–
Fernando