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

Making the Map in HTML/JavaScript

HtmlMap
Well it’s time to make the map.  I have been shown how to make a simple list from our data in JavaScript using two arrays so now lets put a default map in the HTML.
So let’s create new HTML called “JavaScriptMap.HTML”. Here s what it should look like:

Map with valid credentials

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 credentails’});
}
This requires you get A Bing Maps key to do this you must go to Microsoft and register you will be given a key that you can use for your map.  Once you have it input the credentials where it says “Your Credentials” and bobs your uncle.

HtmlMap

 Remember you’ll have to get you credentials from bing

He’s making a list!

20150830_132921

So thus far we have created a simple JavaScript HTML app.  We have separated the code from the page.    So the question here is why are we doing it?  Well I thought it would be fun to see if we could do our last states map project using, a different programming language.  I know I can do it in C# & V.NET but how about JavaScript.  OK, so to this first we are going to make the data available in a list. That means first we need to add list to our HTML page.  There are two kinds of list in HTML <ul> or (unordered listed), and <ol> or (ordered list).   In this case we are going to use an unordered list.  To this we will use the following code:

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

This give us a list,  but what about showing data in the list. Well to do that we will use the <li> or list item element of the list. We then put it into our code behind. Our code behind file is called “myList.js” and the HTML file should be called  “myList.HTML” . Remember both will need to be at the same folder. Here’s the code;

window.onload = function()
{
var test = [
“Alabama”,
“Alaska”,
“Arizona”,
“Arkansas”,
“California”,
“Colorado”,
“Connecticut”,
“Delaware”,
“Florida”,
“Georgia”,
“Hawaii”
]
var test2 = [
“Montgomery”,
“Juneau”,
“Phoenix”,
“Little Rock”,
“Sacramento”,
“Denver”,
“Hartford”,
“Dover”,
“Tallahassee”,
“Atlanta”,
“Honolulu”
]
for (var i = 0; i < test.length; i++)
{
//create new li element
var newStateListItem = document.createElement(“li”);
//create new text node
var stateListValue = document.createTextNode(test[i] + “: ” + test2[i] );
//add text node to li element
newStateListItem.appendChild(stateListValue);
//add new list element built in previous steps to unordered list
//called stateList
stateList.appendChild(newStateListItem);
}
}

That’s a lot of stuff. Let’s break it down.  We need something to hold our data. We are using two arrays, ( yes I know we could use one) but this is an attempt to keep things very simple later on. This is done with the var test = [data,data] statement.   Of course test2 holds the capital names. The next part of the function iterates thru the data and creates a <li>, (list item) for each.  The list item is give the value of the arrays and added to the stateList using appendChild.   This should give you the following output.

list

So that should get us started.