Bing Map Part 2 (the split)

20150822_124806

I know the image has nothing to do with the text.

Last time we made a list delimited by “|” in Javascript. This time we will split that up in order to use it.  Lets just look at a few:

window.onload = function()
{
var states = [
“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”]

for (states i = 0; i < states.length; i++)

{

var res = str.split(“|”);

var newStateListItem = document.createElement(“li”);
var stateListValue = document.createTextNode(“state name: ” + res[0] );
newStateListItem.appendChild(stateListValue);
var stateListValue = document.createTextNode(” captital name:” + res[1] );
newStateListItem.appendChild(stateListValue);
stateList.appendChild(newStateListItem);

}

}

This will demonstrate this in a list.  Like so:

short

So as you can see we have split the array into four  parts.

In part 3 I’ll take the lat & log data from our data set and make pins on the Bing Map.

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.

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>
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.

Breaking up is hard to do.

Not really!

water1

JavaScript can be easily separated from  the HTML code.  To do this we just add a line of code  and your done.  Let look at an example in our example.  Here is the original code with some enhancement.

 <!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
document.getElementById(“panel2″).innerHTML =”this is my test2”
}
</head>
<body onload = “init()”>
<p id = “panel2”></p>
</body>
</html>

If you copy this into note pad and save it as an html file, then you should get this when you open itmyTest

As you can see it just print two lines to the screen.  If we separate the scrip we will get the same results. Lets try it, note I have added a “bgcolor” to make it easier to read:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />

</head>
<p id = “panel2”></p>
</body>
</html>

And for the JavaScript:

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
document.getElementById(“panel2″).innerHTML =”this is my test2”
}

This should be saved  as “myTest.js” in the same folder as the html file.  Here is the results:

myTest2

So there you go.  Next post we will get back to the data and maybe some styling.

 

 

Let’s make it Confusing

 

PonyRide

Since the first time I heard the term JavaScript, I thought it had stupid name.  After all VBScript was based on Visual Basic syntax.  Why wouldn’t JavaScript be based on Java.  But that’s not the only issue I have with it.  Yes the names confusing, but the technologies and libraries that are used with it are also confusing.  jQuery for example the name makes you think it is a Java query language not a JavaScript extension library. But anyway lets see what we can do with it. Be for warned I am not proficient in JavaScript.  I’m OK with C#, or VB but have limited experience with JavaScript. My go to book for JavaScript is Mike McGrath’s book JavaScript in easy steps.  www.ineaysteps.com I like the way Mike McGrath presents the topic and have used several of his books. I wish I could say I liked JavaScript, I don’t.   I have never been a big fan of any kind of web development.  For an old desk top developer, web development seems so limiting. Especially the onset of WPF, in .NET.

Let’s start with the basics (like I have a choice). JavaScript is one part of the three parts that make up modern web development. The other two are HTML5(Hyper Text Markup Language) and CSS (Cascading Style Sheets). To write it you have the choice of including the script in the HTML Doc or referencing it from the HTML doc. Included JavaScript  is pretty easy to do.

In notepad create a simple html page:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />
</head>
<body>

Test

 

</body>
</html>

Save as myTest.html and then open in a browser.   The important thing here is to recognize you identified an area of the web page by using the id=  in the

portion of the HTML.  Note you could do the same with a <p></p> or any other element.  Doing this allows you to manipulate what shows up on the screen. . So how do we manipulate it?  We use the the page events change the page based on the function.  We identify where we want those changes to occur with “id=”

Here’s an example of how to do this.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
function init() {
document.getElementById(“panel”).innerHTML =”this is my test “
}

</body>
</html>

Ok lets break this down into its parts.  First of all why <!DOCTYPE html>, well honestly you don’t have worry about this in HTML5 but just don’t leave anything unsaid go here for full explanation. https://www.w3schools.com/tags/tag_doctype.asp

<Title></Title>

Is just the name of your page (not important).

<Head></Head>

This is area of the page where most people put information about the page (metadata).  It is also a good place to put your tags.  It is not the only place you can do this and most people will put the javascript into a separate file all together.  We look at that next time. You may wonder why we have the type = “text/javascript”, well in the old days we things like vbscript, which was Microsoft’ browser scripting language.   you don’t need to worry about this in modern browser, it just a relic of days gone by.

We put a function inside the script tags an use the function int(){} syntax.  I this case the name of the function is init, the parentheses is where we would pass parameters if we need too and code would go between the brackets{}.  So basically this is the code or set of instructions that we will call when the code is executed.  How do we execute the code well we do that with and event.  Here is the event:

A list of other types of events can be found here:  https://www.w3schools.com/tags/ref_eventattributes.asp

So now yo have the code, and you have the event. Now al you need is a place to put the information indicated by the code (the “panel”).  We’ll need to add the

 So here’s the whole code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>MyTest</title>
<meta charset=”utf-8″ />

function init()
{
document.getElementById(“panel”).innerHTML =”this is my test”
}

</head>
<body onload = “init()”>

 

</body>
</html>

Take this and paste it into note pad, save it as an HTML file and start making changes.  To run the program just open it with a browser.  Next time we will talk more about JavaScript.

 

 

 

 

 

 

 

Losing a friend.

christ

Usually I write about writing code, but today I’m going to stray from that path.  Today I found out that someone I considered a friend past away tragically from a head on collision.  In my life many such losses have occurred.  Not all have been sudden but many unexpected.  The older you live the more you come to realize that life is fleeting.  I am deeply aware that the past is gone, the future is not certain and present is all we have.   No time to waste with silly regrets or worry about the future, live in the now.

First let me tell you about my friend.  He was one of the kindest people I had ever meet, helping people in need out the love he felt from his Christian belief.  Many people talk about their Christian walk, but my friend Trent wasn’t a talker he was a doer.   It wasn’t unusual find out someone who he had ran across that was in need, was living with him and his wife while they got back on their feet.   He went on mission trips to build churches, put roofs on house, and worked incredible amounts without a once ego coming through. When our local pregnancy support center needed dry wall, he was there.  When there was work to be done at the Church, he was there.   As a talented handyman/carpenter/plumber Trent was always in demand, you see God had given him a lot talent.  With a loving heart, Trent took that Talent and made a real change in our world, showing Christ’s love through his hands.  So many people in our community have been touched by his actions that I cannot even attempt to explain what we have lost.

Tragedy is hard to understand.  But as I have learned it is just part of life.  We all can’t be Trent Smith, but we can try to be the best and kindest version of our selves possible.