AjaxLine

The First Day of My experiment is there...

Ok, today I would create boundaries for registered users of my site and display some information about user, whey you click on user boundary.

 

First I needed  DB with zip codes which attached to latitude and longitude points on world map.

Many Post sites sell their own similar database, but you can  download it for free from this site.

This database include zip Codes, cities, states, latitude, longitude points and state abbreviations.

 

DB for SQL Server as a script you can download from there ...

 

Next I created TableAdapters in DataSet for ZipCodes and UserInfo tables in my DB.

 

Ok, then I wrote next code:

<!--googleAd-->

gmap.aspx.cs

…

DataSet1.ZipCodesDataTable tblZip;

    DataSet1.UserInfoDataTable tblUserInfo;

    protected ZipCodesTableAdapter GetZipCodesAdapter()

    {

        return new ZipCodesTableAdapter();

    }

 

    protected UserInfoTableAdapter GetUserInfoAdapter()

    {

        return new UserInfoTableAdapter();

    }

….

 

Next, what I needed is serialize variable  values  from C# to JavaScript. I wrote JSON for this.

It has next format:

var users = [{"var1: value1, var2: value2,…,varN:'valueN'" },

{"var1: value1, var2: value2,…,varN:'valueN'"},

….

{"var1: value1, var2: value2,…,varN:'valueN'"}]

 

I implemented this by next code:

gmap.aspx.cs

…

protected void JsonInit()

    {

        string script = "var users= new Array(); users.push({";

       

        tblUserInfo = GetUserInfoAdapter().GetUsersByCountry("United   States");

        foreach (DataSet1.UserInfoRow row in tblUserInfo.Rows)

        {

            tblZip= GetZipCodesAdapter().GetDataByZipCodes__(row.Zip);

            DataSet1.ZipCodesRow rowZip = (tblZip.Rows[0] as DataSet1.ZipCodesRow);

            if(rowZip ==null) return;

            script+=String.Format("latitude:{0},longitude:{1},city:'{2}',state:'{3}',

                                    user:'{4}',fname:'{5}',lname:'{6}'",

            rowZip.latitude.ToString(),

            rowZip.longitude.ToString(),

            rowZip.city.ToString(),

            rowZip.state.ToString(),

            row.UserName.ToString(),

             row.FirstName.ToString(),

            row.LastName.ToString());

            script += "},{";

        

        }

        script=script.Substring(0, script.Length - 2);

        script += ");";

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "clientScript", script, true);

     }

protected void Page_Load(object sender, EventArgs e)

    {

        this.Master.Body.Attributes["onload"] = "load()";

        this.Master.Body.Attributes["onunload"] = "GUnload()";

        JsonInit();

      …

     }

…

 

 

Ok, Page.ClientScript.RegisterClientScriptBlock(…) after this JavaScript will be able to catch JSON and we can use variable values at such way user[i].varN;

 

Then I update my JavaScript code in the FirstDay J

gmap.aspx

…

 <script type="text/javascript">

    //<![CDATA[

  

    var map;

    var pntx=0;

    var pnty=0;

    var map_ctrl;

    var map_type_ctrl;

    var map_scale_ctrl;

       

    function load(){

      if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById("map"));

        map.setCenter(new GLatLng(pntx, pnty), 1);

        map_ctrl=new GLargeMapControl();

        map_type_ctrl=new GMapTypeControl();

        map_scale_ctrl=new GScaleControl();

       

        map.addControl(map_ctrl);

        map.addControl(map_type_ctrl);

        map.addControl(map_scale_ctrl);

       

             

        function createMarker(point, city, state, user, fName, lName) {

          var marker = new GMarker(point);

          GEvent.addListener(marker, "click", function() {

          marker.openInfoWindowHtml("<h5 style =\"font-weight:normal\">User: <b>"

          + user + "</b><br>"+fName+" "+lName+"<br>State:"+state+" City:"+city+"</h5>");

          });

          return marker;

        }

       

       

        var lenght = users.length;

        for(var i=0;i<lenght;i++)

        {

           var point = new GLatLng(users[i].latitude,users[i].longitude);

           map.addOverlay(createMarker(point,users[i].city,users[i].state,
                          users[i].user,users[i].fname,users[i].lname));

        }

     }

}

   //]]>

 

    </script>

…

 

This all, as a result I have this:

Please, if You have questions for me write them there:forums.ajaxline.com/index.php