JavaScript Bing Map Part 1.

list2

Well it’s time to wrap this up.  We have created a list in JavaScript and HTML.  We’ve created a map in HTML. Now let’s marry the two together.

First the HTML map:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html>

<head>

<title>Map with valid credentials</title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

var map = null;

 

function getMap()

{

map = new Microsoft.Maps.Map(document.getElementById(‘myMap’), {credentials: “YOUR BING KEY”});

}

</head>

<body onload=”getMap();”>

</body>

</html>

Now for the data. We made a list using the data in a previous post.  Let’s complete the data set. Remember before we used the double array method to put data into a list.

_____________________________________________________________

var test = [
“Alabama”,
“Alaska”,
“Arizona”,…
And
var test2 = [
“Montgomery”,
“Juneau”,
“Phoenix”,…

______________________________________________________________

That worked but it is not the best way to do this.   As in anything there are multiple ways of doing it.  But in this case I’m going to put the state name, the capital, latitude and longitude all into a single string. I will then split that string in order to use those values.  I will dived them using a “|” and later split them using that symbol.  For example:

var state = [“Alabama|Montgomery|32.361538|-86.279118”, “Alaska|Juneau… 

So with that in mind here is our java script to create the array we will use to make our map markers of the state capitals.

window.onload = function()

{

var state = [

“Alabama|Montgomery|32.361538|-86.279118”,

“Alaska|Juneau|58.301935| -134.419740”,

“Arizona|Phoenix|33.448457|-112.073844”,

“Arkansas|Little Rock|34.736009|-92.331122”,

“California|Sacramento|38.555605|-121.468926”,

“Colorado|Denver|39.7391667|-104.984167”,

“Connecticut|Hartford|41.767|-72.677“,

“Delaware|Dover|39.161921Florida”,

“Tallahassee|0.4518|-84.27277|-75.526755”,

“Georgia|Atlanta|33.76|-84.39”,

“Hawaii|Honolulu|21.30895|-157.826182”,

“Idaho|Boise|43.613739|-116.237651”,

“Illinois|Springfield|39.783250|-89.650373”,

“Indiana|Indianapolis|39.790942|-86.147685”,

“Iowa|Des Moines|41.590939|-93.620866”,

“Kansas|Topeka|39.04|-95.69”,

“Kentucky|Frankfort|38.197274|-84.86311”,

“Louisiana|Baton Rouge|30.45809|-91.140229”,

“Maine|Augusta|44.323535|-69.765261”,

“Massachusetts|Boston|42.2352|-71.0275,

“Michigan|Lansing|42.7335|-84.5467”,

“Minnesota|Saint Paul|44.95|-93.094”,

“Mississippi|Jackson|32.320|-90.207,

“Missouri|Jefferson City|38.572954|-92.189283”,

“Montana|Helana|46.595805|-112.027031″,

“Nebraska|Lincoln|40.809868|-96.675345”,

“Nevada|Carson City|39.160949|-119.753877”,

“New Hampshire|Concord|43.220093|-71.549127”,

“New Jersey|Trenton|40.221741|-74.756138”,

“New Mexico|Santa Fe|35.667231|-105.964575”,

“New York|Albany|42.659829|-73.781339”,

“North Carolina|Raleigh|35.771|-78.638”,

“North Dakota|Bismarck|46.813343|-100.779004”,

“Ohio|Columbus|39.962245|-83.000647”,

“Oklahoma|Oklahoma City|35.482309|-97.534994”,

“Oregon|Salem|44.931109|-123.029159”,

“Pennsylvania|Harrisburg|40.269789|-76.875613”,

“Rhode Island|Providence|41.82355|-71.422132”,

“South Carolina|Columbia|34.000|-81.035”,

“South Dakota|Pierre|44.367966|-100.336378”,

“Tennessee|Nashville|36.165|-86.784”,

“Texas|Austin|30.266667|-97.75”,

“Utah|Salt Lake City|40.7547|-111.892622”,

“Vermont|Montpelier|44.26639|-72.57194”,

“Virginia|Richmond|37.54|-77.46”,

“Washington|Olympia|47.042418|-122.893077”,

“West Virginia|Charleston|38.349497|-81.633294”,

“Wisconsin|Madison|43.074722|-89.384444”,

“Wyoming|Cheyenne|41.145548|-104.802042]

Now we have our data in an array called states.  Each row is separated by a comma, and each field is separated by a “|”.   We can iterate thru the records easily enough. So using our earlier example.

 <!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Javascript</title>
newList.js”>
<style>
</style>
</head>
<body bgcolor=”#E6E6FA”>
<hr>
<ul id=”stateList”>
</ul>
<hr>
</body>
</html>

————————————————————————————————-

 for (var i = 0; i < test.length; i++)
    {     
            var newStateListItem = document.createElement(“li”);
             var stateListValue = document.createTextNode(test[i]);
            newStateListItem.appendChild(stateListValue);
            stateList.appendChild(newStateListItem);
      
    }
}

This should give you an idea of the data we will be using. In  part 2 I will show you how to split it out using JavaScript split() Method.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s