{"id":28492,"date":"2017-02-27T03:01:00","date_gmt":"2017-02-26T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28492"},"modified":"2017-02-26T22:06:25","modified_gmt":"2017-02-26T12:06:25","slug":"dams-in-the-united-states-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/dams-in-the-united-states-primer-tutorial\/","title":{"rendered":"Dams in the United States Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Dams in the United States Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.jpg\" title=\"Dams in the United States Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Dams in the United States Primer Tutorial<\/p><\/div>\n<p>We&#8217;re starting out on a new geospatial web application today.  We&#8217;re going to call it &#8220;Dams in the United States of America&#8221; because we are using a public data source for this information giving &#8230;<\/p>\n<ul>\n<li>Names of Dam<\/li>\n<li>Location Place Information for Dam &#8230; State, County<\/li>\n<li><b>Geospatial Latitude and Longitude<\/b><\/li>\n<li>Owner of Dam Information<\/li>\n<li>Height of Dam, Surface Area etcetera<\/li>\n<li>Year Dam Was Built<\/li>\n<li>Type of Dam<\/li>\n<\/ul>\n<p> &#8230; and that public data source webpage we found was at this DATA.GOV <a target=_blank title='Major Dams of the United States - Direct Download' href='https:\/\/catalog.data.gov\/dataset?metadata_type=geospatial&#038;page=13'>Major Dams of the United States &#8211; Direct Download<\/a> link.  It, in turn attributes the data to &#8230;<\/p>\n<p><code><br \/>\n      Originator: National Atlas of the United States<br \/>\n      Publication_Date: 200603<br \/>\n      Title: Major Dams of the United States<br \/>\n<\/code><\/p>\n<p> &#8230; so thanks, everybody.  It is great to find these public data sources.<\/p>\n<p>What happened on a MacBook Pro laptop downloaded this <i>tar<\/i> file was that on double click it it extracted various files, the most interesting one being &#8230;<\/p>\n<p><code><br \/>\ndams00x020.dbf<br \/>\n<\/code><\/p>\n<p> &#8230; which <i>Opens With<\/i> LibreOffice into a Spreadsheet that we File -&gt; Export(ed) as HTML that forms the &#8220;child&#8221; contents of our HTML and Javascript &#8220;parent&#8221;&#8216;s iframe element today.  Just as with <a target=_blank title='Learning Programming Short Quiz Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/learning-programming-short-quiz-tutorial\/'>Learning Programming Short Quiz Tutorial<\/a>&#8216;s (gleeful) use of the Javascript DOM <i>document.body.innerText<\/i> (rather than our usual <a target=_blank title='Client Pre-emptive Javascript Iframe' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Client+Pre-emptive&#038;stype=Search'>Client Pre-emptive Javascript Iframe<\/a> <i>document.body.innerHTML<\/i> usage, and thanks to this <a target=_blank title='Useful link, thanks' href='http:\/\/www.davidtong.me\/innerhtml-innertext-textcontent-html-and-text\/'>useful link<\/a> regarding cross-browser issues here) saves us heaps of parsing (out the &lt;&#8216;s and &gt;&#8217;s) HTML difficulties, and we end up with a simple parsing statement that goes &#8230;<\/p>\n<p><code><br \/>\ndam_data_arr=aconto.body.innerText.split(String.fromCharCode(10));<br \/>\n<\/code><\/p>\n<p> &#8230; that ends up giving you a huge, and we mean huge <font size=1>&#8230; we leave two minutes for loading purposes &#8230;<\/font> array to analyze for Dam reporting purposes <font size=1>hot damn!<\/font><\/p>\n<p>As you might surmise by <b>Geospatial Latitude and Longitude<\/b> above, we&#8217;ll be hard pressed not to be tempted by reporting this Dam data via our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> interfacing web application (with its inhouse &#8220;select&#8221; event (onclick) additional functionalities), that we POST to via an HTML form element with a <i>target<\/i> property pointing at (another) HTML iframe element&#8217;s <i>name<\/i> property.<\/p>\n<p>There&#8217;s a fair bit more to go into with this project, but we&#8217;ll take a breather there for now to let you know that you can try this for yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\" title=\"Click picture\">live run<\/a> link that has this, purely clientside (because of our Client Pre-emptive Javascript Iframe design) HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html--GETME\" title=\"dams_usa.html\">dams_usa.html<\/a> code for your perusal.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d28229' onclick='var dv=document.getElementById(\"d28229\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/preemptive\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28229' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re starting out on a new geospatial web application today. We&#8217;re going to call it &#8220;Dams in the United States of America&#8221; because we are using a public data source for this information giving &#8230; Names of Dam Location Place &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/dams-in-the-united-states-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[275,2145,291,2146,354,360,480,481,513,576,587,651,694,2126,997,1319],"class_list":["post-28492","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cross-browser","tag-dam","tag-data-feed","tag-data-gov","tag-dom","tag-download","tag-geodata","tag-geographicals","tag-google","tag-html","tag-iframe","tag-javascipt","tag-libreoffice","tag-map-chart","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28492"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=28492"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28492\/revisions"}],"predecessor-version":[{"id":28501,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28492\/revisions\/28501"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=28492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=28492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=28492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}