Bing Map 7.0 using java script and asp.net

In SQL:

create table ctryMap(id int identity primary key,country varchar(30),con_Code varchar(3),value int,Latitute numeric(18,8),Longitude numeric(18,8))

insert into ctryMap values('USA','US',100000,38,-97)

insert into ctryMap values('Australia','AU',10000,-27,133)

insert into ctryMap values('Singapore','SP',1000,1.3667,103.8)

insert into ctryMap values('United Kingdom','GB',500,54,-2)

select row_number() over (order by (select id)) as ID,country,value,Latitute,Longitude from ctryMap FOR Xml Raw('RowNumber'),Type,Elements,Root('Country')

Default.aspx:

<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.infoboxgreen
{
position: absolute;
z-index: 10000;
width: 150px; /* background: #CD5C5C;
border: solid 1px #555;
*/
font-size: 30px;
font-family: Arial,helvetica, sans-serif;
padding: 2px;
color: #06992a;
text-align: left;
width: auto;
height: 100;
}
.infoboxgreen h4
{
color: #000;
margin: 0;
font-weight: bold;
}
.infoboxOrange
{
position: absolute;
z-index: 10000;
width: 150px; /* background: #CD5C5C;
border: solid 1px #555;
*/
font-size: 30px;
font-family: Arial,helvetica, sans-serif;
padding: 2px;
color: #e46715;
text-align: left;
width: auto;
height: 100;
}
.infoboxOrange h4
{
color: #000;
margin: 0;
font-weight: bold;
}
.infoboxRed
{
position: absolute;
z-index: 10000;
width: 150px;
font-size: 30px;
font-family: Arial,helvetica, sans-serif;
padding: 2px;
color: #9e0404;
text-align: left;
width: auto;
height: 100;
}
.infoboxRed h4
{
color: #000;
margin: 0;
font-weight: bold;
}
.infoboxBlue
{
position: absolute;
z-index: 10000;
width: 150px; /* background: #CD5C5C;
border: solid 1px #555;
*/
font-size: 30px;
font-family: Arial,helvetica, sans-serif;
padding: 2px;
color: #2774d1;
text-align: left;
width: auto;
height: 100;
}
.infoboxBlue h4
{
color: #000;
margin: 0;
font-weight: bold;
}
</style>

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">

var xmlHTTP;
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("myMap"),
{ credentials: "AmOFJiHtBeytoES_ZZxm9yiLe8hYQaaC7GUO-Fi-yX7RhhZ8n7pyn-17I9SyDlG7", zoom: 2, mapTypeId: Microsoft.Maps.MapTypeId.road });

dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);

var infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);

infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
// infobox.hasOwnProperty(colornew);
infoboxLayer.push(infobox);

AddData();
}

function GetXmlHttpObject() {
var xmlHTTP = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHTTP = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHTTP = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHTTP;
}

function AddData() {

xmlHTTP = GetXmlHttpObject();
if (xmlHTTP == null) {
alert("Your browser does not support AJAX!");
return;
}
var url;

url = "Ajax_Country_XML.aspx";

xmlHTTP.open("GET", url, true);
// xmlHTTP.open("GET", "CustomerData.xml", true);
xmlHTTP.onreadystatechange = ajax_function_Update;
xmlHTTP.send(null);
}

function displayInfobox(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.getLocation());
infobox.setOptions({ width: 350, height: 80, visible: true, title: e.target.Title, description: e.target.Description });

}
}

function ajax_function_Update() {
if (xmlHTTP.readyState == 4) {
var xmlDoc = xmlHTTP.responseXML;
var x = xmlDoc.getElementsByTagName("RowNumber");
var xmlLogitute, xmlLogitute, pin2, xmlInvAmt, xmlCountryDesc;
for (i = 0; i < x.length; i++) {
id = x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue;
xmlLogitute = x[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue;

xmlLatitude = x[i].getElementsByTagName("Latitute")[0].childNodes[0].nodeValue;

pin2 = null;
value = 0.0000;
country = "";

if (xmlLogitute != null || xmlLogitute != "")
xmlLogitute = parseFloat(xmlLogitute).toFixed(4);
else
xmlLogitute = 0.0000;

if (xmlLatitude != null || xmlLatitude != "")
xmlLatitude = parseFloat(xmlLatitude).toFixed(4);
else
xmlLatitude = 0.0000;
value = parseFloat(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue).toFixed(4);
country = x[i].getElementsByTagName("country")[0].childNodes[0].nodeValue;

if (parseFloat(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue).toFixed(4) >= 100000) {

pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(xmlLatitude, xmlLogitute), { height: 48, width: 48, icon: 'Images/icon-gr.png' });
pin2.Description = "<div class='infoboxgreen'>" + country + " </br></br> Value " + value + " </div>";
}
else if (parseFloat(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue).toFixed(4) >= 10000 && parseFloat(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue).toFixed(4) < 100000) {

pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(xmlLatitude, xmlLogitute), { height: 48, width: 48, icon: 'Images/icon-bl.png' });
pin2.Description = "<div class='infoboxBlue'>" + country + " </br></br> Value " + value + " </div>";
}
else if (parseFloat(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue).toFixed(4) >= 1000 && parseFloat(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue).toFixed(4) < 10000) {
pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(xmlLatitude, xmlLogitute), { height: 48, width: 48, icon: 'Images/icon-or.png' });
pin2.Description = "<div class='infoboxOrange'>" + country + " </br></br> Value " + value + "</div>";
}
else if (parseFloat(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue).toFixed(4) <= 500) {
pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(xmlLatitude, xmlLogitute), { height: 48, width: 48, icon: 'Images/icon-red.png' });
pin2.Description = "<div class='infoboxRed'>" + country + " </br></br> Value " + value + "</div>";
}

Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
dataLayer.push(pin2);
}
}
}
function removePopup(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.getLocation());
infobox.setOptions({ visible: false, title: e.target.Title, description: e.target.Description });
}
}
</script>

</head>
<body onload="GetMap();">
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 0px">
<tr>
<td height="20px">
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="98%">

<tr>
<td>
 
</td>
</tr>
<tr>
<td colspan="3" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="98%" bgcolor="#FFFFFF">
<tr>
<td colspan="3" align="center">
<div id='myMap' style="position: relative; width: 1100px; height: 750px; border: 4px solid black">
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="1100px" align="center">
<tr>
<td>
 
</td>
<td>
<asp:Label ID="lbl_Gr" runat="server" Text="" ForeColor="Green" Style="background-color: Green;
vertical-align: middle;" Height="30px" Width="30px"></asp:Label>
</td>
<td style="font-size: 40px; color: Black; font-weight: bold;" align="left">
  Green : More than 100000
</td>
<td>
<asp:Label ID="lbl_Bl" runat="server" Text="" ForeColor="Blue" Style="background-color: Blue;
vertical-align: middle;" Height="30px" Width="30px"></asp:Label>
</td>
<td style="font-size: 40px; color: Black; font-weight: bold;" align="left">
  Blue : 10000 to 100000
</td>
</tr>
<tr>
<td>
 
</td>
<td>
<asp:Label ID="lbl_Or" runat="server" Text="" ForeColor="Orange" Style="background-color: #FFA500;
vertical-align: middle;" Height="30px" Width="30px"></asp:Label>
</td>
<td style="font-size: 40px; color: Black; font-weight: bold;" align="left">
  Orange : 1000 to 10000
</td>
<td>
<asp:Label ID="lbl_Re" runat="server" Text="" ForeColor="Red" Style="background-color: Red;
vertical-align: middle;" Height="30px" Width="30px"></asp:Label>
</td>
<td style="font-size: 40px; color: Black; font-weight: bold;" align="left">
  Red : Below 1000
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>

</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Ajac_Country_XML.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Country_XML.aspx.cs" Inherits="Ajax_Country_XML" %>

Ajax_Country_XML.aspx.cs:

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Xml;
using System.IO;
using System.Data;

public partial class Ajax_Country_XML : System.Web.UI.Page
{
string Constring = ConfigurationManager.ConnectionStrings["testCon"].ConnectionString;
DataTable dt = new DataTable();
SqlCommand cmd = null;
SqlDataAdapter da;
string Amount;
string CountryCode;
string CountryDesc;
string qrtStartDate, date, startdate, nowdate;
string strText = "";
protected void Page_Load(object sender, EventArgs e)
{
Response.Expires = -1;
Response.ContentType = "text/xml";
if (!IsPostBack)
{
using (SqlConnection con = new SqlConnection(Constring))
{
con.Open();
string selQry = "select row_number() over (order by (select id)) as ID,country,value,Latitute,Longitude from ctryMap FOR Xml Raw('RowNumber'),Type,Elements,Root('Country') ";
using (cmd = new SqlCommand(selQry, con))
{

Response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>");
try
{
XmlReader xmlread = cmd.ExecuteXmlReader();
// Response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>");

if (xmlread.Read())
{
XmlDataDocument xmldoc = new XmlDataDocument();
xmldoc.Load(xmlread);
xmlread.Close();
strText = xmldoc.OuterXml;
Response.Write(strText);
}
else
{
Response.Write(strText);
}
}
catch
{
Response.Write(strText);
}
}
}
}
}
}

OUTPUT:

Comments

Brian CookApril 19, 2013 at 4:34 PM
Thanks for posting this. I am having some trouble with getting the Pushpin locations to display.

The Ajax)Country_XML.cs has both SQL and XML calls in it.

I created the database, and the pages from your code. the map generates, and the items below with the colors just fine. However no Pushpins display on the form.

UnknownApril 24, 2013 at 1:33 AM
Hi Brain Cook,
Thank u for comment for this post..

I have Green, Blue, Orange, Red Color pushpins in my project local folder. That is called by my javascript function..i.e., icon-gr.png .. please find below that png..

Ex:: pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(xmlLatitude, xmlLogitute), { height: 48, width: 48, icon: 'Images/icon-gr.png' });

Anything else comment here please..

Thanking u..

Microsoft World

Search This Blog

Bing Map 7.0 using java script and asp.net

Comments

Post a Comment