Google Maps and the MarkerClusterer solution

Hi everyone,

today I’ll be writing a small post about a problem that most people who write maps application deal with: add thousands of markers in you map. A known solution to manage your marker is GMarkerManager. However, today I read about the MarkerClusterer solution in GeoGoogleDevelopers Blog.

“MarkerClusterer collects markers into different clusters and displays the number of markers in each cluster with a label, creating new clusters as the map zoom level changes. The clustering algorithm is simple; for each new marker it sees, it either puts it inside a pre-existing cluster, or it creates a new cluster if the marker doesn’t lie within the bounds of any current cluster.”

The effect of using MarkerClusterer is shown in the picture below and library’s sample site:

The library works like magic. You just have to pass your array of markers to the MarkerClusterer constructor, and it ill take care of the rest. First, we have to import the MarkerClusterer JavaScript implementation file. Later, we create some markers, push into the array and call MarkerClusterer, as shown in the code snippet below.

It’s really awesome and straightfoward. Try it yourself.

See you,

–
Fernando

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

Ajax Control Toolkit

Hi,

today will talk about a really useful web development library, called the Ajax Control Toolkit.

“The AJAX Control Toolkit is a joint project between the community and Microsoft. Built upon the ASP.NET 2.0 AJAX Extensions, the Toolkit aims to be the biggest and best collection of web-client components available. The Toolkit addresses three needs. First it gives website developers a place to get components to make their web applications spring to life, second it gives a set of great examples for those wishing to write client-side code, and third it is a place for the best script developers to get their work highlighted.”

In short, the library consists in a set of ASP.NET controls to develop web application with ajax in a very simple way. For example, inside the library you will find:

• Animation
• Auto complete
• Calendar
• Drag panel
• Modal popup
• Textbox watermark
• …

To use all of this controls, you just need to download the library and include in your Visual Studio Toolbar. So, you will be able to see the controls and drag and drop them inside your application.

All the extender controls (controls that add functionalities to an another existing control) have a commun atribute called TargetControlID, which identify the extended control. So, in the most of situations, all you have to do is to set this attribute value as shown in the Calendar example below:

<ajaxToolkit:Calendar runat="server"
    TargetControlID="Date1"
    CssClass="ClassName"
    Format="MMMM d, yyyy"
    PopupButtonID="Image1" />

More information and examples here. 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

ASP.NET and Google Maps

Hi,

last moth I was little busy with graduation thesis’ activities, so I could not give such attention to the blog. But, I’ll try to write as soon as I have some time. Today, I’ll talk about how to create an ASP.NET application that integrates with google maps. This has been my work on Inove for the last two moths and it’s quite interesting. Let’s start.

First, let’s create our Web application in Visual Studio by clicking on File -> New Project… and choosing a new ASP.NET Web Application, as shown in figure below:

Later, run the project with F5 and copy your start page URL. With your web site URL, sign up for a google maps API key here. You just need to agree with the term and conditions, and paste your web site URL inside the tex box. Now, copy the javascript content of the given html and paste it into the head tag of your .aspx file. . Now, your head tag will be similar to the code show below.

In line 15, we create a new instance of google maps, passing the <div> tag which contains the maps. In line 16 we set where the map will be center on and the map zoom. Fell free to change this values.

Now, to visualize the map, will need two things:

1. The map is supposed to be in a separate <div> tag. If you take a look at the javascript code, you will see something like document.getElementById(“map”). So, what you have to do is to create a new <div> tag, inside de body, which id property is “map”.
2. You will need to call the function load(), so the map can be loaded. To do that, just use onload event in the <body> tag, passing the function load() as value.

After that, your <body> will look like this:

Notice that a use a style to set the size of the map.

Now, all that you have to do is to compile and run your project by pressing F5.
Very easy, don’t you think?

So, in this post I talked about how to integrate an ASP.NET application with google maps. In the next posts, I’ll talk more about this integration by addin markers, controllers and some functions.

See you in the next post

–
Fernando