Tag Archives: geographicals

Google Places API Autocomplete Proof of Concept Primer Tutorial

Posted on by

Huge “where of life” concept ahead! Yes, we are trialling the great Google Places API, specifically a proof of concept use of autocomplete logic checking keyboard entered places letter by letter. Cute, huh? As you can imagine, “incumbency” is big here. You need a massive database that is constantly building (and thus being refined and expanded) in order to be able to offer this service. Yes, service, and to use the service you need to apply for a Google Places API Key to use this service. Some traffic is free to you each month should you go ahead and apply for an API Key. So what is interesting about the “proof of concept” google_places_poc.php PHP code live run? we use PHP but you could use HTML … it just seemed good to do this because … the “middleperson” is HTML code taken word for word from that autocomplete webpage … and we just call on that HTML in … PHP asks for a Google Places API Key (with no restrictions) off the user (in an HTML input type=password field … that has “remember me” capabilities) … and adds into the mix that … resultant webpage consists of the aforementioned HTML with a hardcoding substituted by the entered Google Places API Key … so, there you go. Not for everyone, but maybe all this has encouraged you to sign up?! Who knows? If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , , , , , , , , | Leave a comment

Australian Postcode Place Distances Map Chart Tutorial

Posted on by

Yesterday’s “where of life” themed Australian Postcode Place Distances Primer Tutorial lacked something … anyone, anyone? … yes, Anaximander … a map … and you’d like to swap my horse for one … well okay, there’s one called Ed out the back … but we digress. Queue the great Google Charts Map Chart (which can transition very easily to Geo Chart, where “from” to “to” lines are drawn) and which can be called in an HTML iframe element to add that visual interest to our changed australia_place_crowfly_distances.php‘s live run link. There isn’t anything much better than a map to trip plan, or study geography, in our books … but alas we ran out of pamphlettes today … sorrrrrrryyyyyy. Previous relevant Australian Postcode Place Distances Primer Tutorial is shown below. It’s time to return to a “where of life” web application tutorial. Why? No, “where”. Who’s on second. But, seriously, the reason is that we found a great Australian Postcode resource for geodata lookups of these Australian placenames or postcodes … thanks. Combine this … Australian postcode (or placename) latitude and longitude … with … another Australian postcode (or placename) latitude and longitude … and we can … show the user a great circle distance between the two places … as well as a link to … Google Maps Directions map between the two places … and there you can imagine we have a bit of a … trip planner … on our hands. We can add our own client geographical position into the mix via … function getLocation() { if (navigator.geolocation) { try { navigator.geolocation.getCurrentPosition(showPosition); setTimeout(later, 2000); } catch(err) { setTimeout(later, 2000); } } else { document.getElementById(‘you’).innerHTML='(0,0)’; if (document.getElementById(‘inlat’) && document.getElementById(‘inlong’)) { document.getElementById(‘inlat’).value=userlatitude; document.getElementById(‘inlong’).value=userlongitude; } if (document.getElementById(‘ipostcode’)) { document.getElementById(‘ipostcode’).click(); newthree(); } } } function showPosition(position) { if (userlatitude == 0.0 && userlongitude == 0.0) { userlatitude=eval(” + position.coords.latitude); userlongitude=eval(” + position.coords.longitude); if (document.getElementById(‘inlat’) && document.getElementById(‘inlong’)) { document.getElementById(‘inlat’).value=userlatitude; document.getElementById(‘inlong’).value=userlongitude; } if (document.getElementById(‘ipostcode’)) { document.getElementById(‘ipostcode’).click(); newthree(); } } } … that you can see involved in the PHP australia_place_crowfly_distances.php‘s live run link, for your perusal. If this was interesting you may be interested in this too. If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Australian Postcode Place Distances Primer Tutorial

Posted on by

It’s time to return to a “where of life” web application tutorial. Why? No, “where”. Who’s on second. But, seriously, the reason is that we found a great Australian Postcode resource for geodata lookups of these Australian placenames or postcodes … thanks. Combine this … Australian postcode (or placename) latitude and longitude … with … another Australian postcode (or placename) latitude and longitude … and we can … show the user a great circle distance between the two places … as well as a link to … Google Maps Directions map between the two places … and there you can imagine we have a bit of a … trip planner … on our hands. We can add our own client geographical position into the mix via … function getLocation() { if (navigator.geolocation) { try { navigator.geolocation.getCurrentPosition(showPosition); setTimeout(later, 2000); } catch(err) { setTimeout(later, 2000); } } else { document.getElementById(‘you’).innerHTML='(0,0)’; if (document.getElementById(‘inlat’) && document.getElementById(‘inlong’)) { document.getElementById(‘inlat’).value=userlatitude; document.getElementById(‘inlong’).value=userlongitude; } if (document.getElementById(‘ipostcode’)) { document.getElementById(‘ipostcode’).click(); newthree(); } } } function showPosition(position) { if (userlatitude == 0.0 && userlongitude == 0.0) { userlatitude=eval(” + position.coords.latitude); userlongitude=eval(” + position.coords.longitude); if (document.getElementById(‘inlat’) && document.getElementById(‘inlong’)) { document.getElementById(‘inlat’).value=userlatitude; document.getElementById(‘inlong’).value=userlongitude; } if (document.getElementById(‘ipostcode’)) { document.getElementById(‘ipostcode’).click(); newthree(); } } } … that you can see involved in the PHP australia_place_crowfly_distances.php‘s live run link, for your perusal. If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Trips, Tutorials | Tagged , , , , , , , , , , , , , , , , , , | Leave a comment

PHP Geo Map Google Chart Offset Tutorial

Posted on by

Drill in and offset! That’s the work of today with our interfacing PHP code to the Google Charts Geo Chart building on the last round of changes for this chart as described at PHP Wikipedia Geo Map Google Chart Region Tutorial. So, what is the thinking behind “Drill in and offset!”? Well, we can … use the Geo Chart of the world … to … plot latitude and longitude … while supplying it with a … user defined width and height for the size of said Geo Map … but … should the user be interested in an area of the world (a region) and if that “region” is too far to the right or bottom of a Geo Chart defined with a large width and height (presumably to “drill in”), then it is a pain for the user to have to scroll to that “region”. But what if we offered the savvy user a way to define “width” and “height” in such a way as to also be defining an “offset” whereby that painful scrolling is done for the user, initially, so that the “region” is well placed on the webpage? Sound good? We worked it that if the user defined a … width = 1000.075 height = 500.050 … for example … then that would be offsetting the Geo Chart in “style” terms via … margin-left:-750px; margin-top:-250px; Get it? The new “offset” functionality only comes into play when “width” and “height” parameters are user defined as float values to three decimal places whose mantissa represents a percentage offset (so 100 or less) that is the negative percentage offset into the Geo Map of the world to lob onto your “region” of interest “centre stage”. See us doing this below for a changed PHP code geo_chart.php‘s Geo Chart showing a line joining Sydney and Melbourne -> <- ^ V … Previous relevant PHP Wikipedia Geo Map Google Chart Region Tutorial is shown below. Of course, it would be great if the people of the world could think more in terms of the Earth as a whole … social justice for all, freedom for all, lessening of poverty, end of slavery, end of war, care for the animals we share the Earth with, care for the environment … the list goes on. But alas, as far as organization of life goes, it is hard to think past the regional. You may have noticed with yesterday’s PHP Wikipedia Geo Map Google Chart Genericization Tutorial how the Google Chart Geo Charts were based on a map of the world, even for topics that were to do with a region (mode format), such as the “Mountains in Turkey” shown. That awkwardness of presentation was the fault of the inadequacies, back then, of our interface to the Google Chart Geo Chart, rather than a paucity of functionality up at the Google end … doh. … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , | Leave a comment

World Clickarounds Google Map Chart Onclick Logic Tutorial

Posted on by

Revisiting our World Clickaround web applications today, last talked about with Canvas Annotation Email Attachment User Acceptance Tutorial, we were gobsmacked that we hadn’t defaulted their use of the Google Chart Map Charts integrated in, to allow for inhouse “onclick” (via a Google Chart select event) logic. Without this integration you miss being able to click near a place and … use “Z” option to find nearest TimeZone (and then onto option “W” Weather) and option “T” for TimeZone information use “S” for Sun Angle … and others of that ilk … and … use “G” for (navigating to) various Google Map views use “Y” for YouTube video lookup (though one of the nearest Airports (that have a known name) may do better here use “A” for Nearest Airports (though you probably got this up already) … anyway … didn’t want these possibilities to be hidden any longer. The fix was very simple applied to many HTML web applications (as below), that being to add &onclick=y into the map.php based URLs in the code linking to our Google Chart Map Chart interfacing. welcometonation.html changed this way with a live run link world.html changed this way with a live run link australia.html changed this way with a live run link brazil.html changed this way with a live run link china.html changed this way with a live run link germany.html changed this way with a live run link india.html changed this way with a live run link ireland.html changed this way with a live run link nigeria.html changed this way with a live run link united_states.html changed this way with a live run link Previous relevant Canvas Annotation Email Attachment User Acceptance Tutorial is shown below. An important part of a web (or desktop or mobile) application is user acceptance. User acceptance is, as the words would imply, the giving of your (developing) web application to real users, to test out usability … or UX (user experience). We do this today for our “Canvas Annotation Email Attachment” web application, and use it to “Annotate” a make believe trip, some of the “talking points” of which are “overlayed” on our “Welcome to Nation” map introduced a couple of days ago when we presented Canvas Annotation Email Attachment Transparency Tutorial and this resulted in an email sent with the attachment as you see in today’s tutorial picture. User acceptance often throws up surprising findings, some easy to handle, and others that are likely to be extremely hard to implement, or impossible, or unworkable at this time. We addressed some of the easier ones to improve the web application, as listed below … as far as “overlay” thoughts go overlaying a transparent image on top of a clean map goes, we found, before user acceptance, that we would have had to type in the URL to the web application, again, at the address bar, rather … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , | Leave a comment

Earth Bearing Distance Missing Two Trip Tutorial

Posted on by

If we were to nominate an “onions of the 4th dimension” improvement on top of the work of Earth Bearing Distance Missing Two Context Tutorial we’d nominate … anyone, anyone … yes, tenticle 5 of The Kraken … we’d want to allow our “Missing Two Geographical places via Bearing and Distance” web application be turned into a trip planner by allowing for multiple legs, perhaps of a trip, to be “represented” by our new incarnation of the web application. As per usual, with extensions of functionality, here, it is optional, and manifested by … anyone, anyone … yes, tenticle 9 3/4 of The Kraken … turning a hardcoded piece of (webpage) text into an HTML element with action logic behind it … our TAHPOWTIAHEWALBI moment, you could say?! Seriously though, it is rare that a sizeable trip happens as a one leg with the one bearing and distance component, so we turn our old web application into a … recursive … parent/child (webpage/iframe) relationship … linked list (trip) legs … type of web application, in order to do that other thing we like to do, and that is to have the one (in this case just HTML/Javascript/CSS) codeset handle both simple and (optional) complex usage functionalities. How do we differentiate a “top.document” parent from an (HTML) iframe (element) child? We use … address bar URL ? and & argument (?latf=[previousToLatitude]&longf=[previousToLongitude]) usage (and analysis) via … checked for via … <body onload=’moremaybe();’> function moremaybe() { var latto=location.search.split(‘latf=’)[1] ? decodeURIComponent(location.search.split(‘latf=’)[1].split(‘&’)[0]) : ”; var longto=location.search.split(‘longf=’)[1] ? decodeURIComponent(location.search.split(‘longf=’)[1].split(‘&’)[0]) : ”; if (latto != ” && longto != ”) { nextplease(); top.document.getElementById(‘goagain’).style.display=’block’; document.getElementById(‘latf’).value=latto; document.getElementById(‘latf’).style.backgroundColor=”pink”; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById(“ltf”).value=latto; document.getElementById(‘longf’).value=longto; document.getElementById(‘longf’).style.backgroundColor=”pink”; cwhat[0]=false; cwhat[1]=false; if (!decided) { if (!cwhat[5]) { cwhat[5]=true; } if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById(“lgf”).value=longto; document.getElementById(‘dtop’).style.display=’none’; document.getElementById(‘trhead’).style.display=’none’; document.getElementById(‘trfoot’).style.display=’none’; document.getElementById(‘myt’).border=0; var recti=parent.document.getElementById(‘niframe’).getBoundingClientRect(); parent.document.getElementById(‘niframe’).height=eval(200 + eval((” + recti.height).replace(‘px’,”))) + ‘px’; if (parent.document.getElementById(‘niframe’) != top.document.getElementById(‘niframe’)) { var trecti=top.document.getElementById(‘niframe’).getBoundingClientRect(); top.document.getElementById(‘niframe’).height=eval(200 + eval((” + trecti.height).replace(‘px’,”))) + ‘px’; } setTimeout(checkfill, 500); parent.document.getElementById(“slong”).innerHTML=”:”; parent.document.getElementById(“slong”).title=””; parent.document.getElementById(“slong”).style.textDecoration=”none”; //top.document.title+=’ started ‘; } } … where you can see that “top.document” (top) parent is just that … top.document … and that a parent of an (HTML) iframe (element) trip leg is referred to via … parent.document … and what is being done in the here and now of a simple scenario (just in the (top) parent) or a complex (non (top) parent leg) … document … references come into play. That parent.document.getElementById(“slong”) refers to the dynamically changed method of adding legs, by turning the … hardcoded “:” (text) of the To longitude textbox labelling … into a clickable and onclick event working … document.getElementById(‘slong’).style.cursor=’pointer’; document.getElementById(‘slong’).style.textDecoration=’underline’; document.getElementById(‘slong’).title=’Click for another leg of a trip, perhaps?’; document.getElementById(‘slong’).innerHTML=’+’; … optionally used, and dynamic extension to functionality … our “onions of the 4th dimension” moment … who said we don’t care about your health … Continue reading →

Posted in eLearning, Event-Driven Programming, Land Surveying, Trips, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Earth Bearing Distance Missing Two Context Tutorial

Posted on by

Mapping and navigational apps wouldn’t be as popular as they are without … satellite based geodata available to our mobile and laptop (and cars etcetera) devices and their software … and … the human urge to want to know where they are … and so to leave yesterday’s Earth Bearing Distance Missing Two Primer Tutorial “proof of concept” web application the way it was, not showing much context to the latitude and longitude form “asks” would be a missed opportunity. In this sense, we’ve decided to interface this web application to … our changed tz_places.php‘s talents (last talked about with Other Side of the World Google Chart Tutorial) with PHP TimeZone places and deriving the nearest ones given a latitude and longitude geographical input and to our interface to the Google Chart Geo Chart showing places on the Earth relative to a world map … to give the changed missing_two.html‘s live run link that optional map (or visual) extra context. This is accessible off links applied to the previously hardcoded “From” and “To” table headers. Please feel free to give it a go to see what we mean. Previous relevant Earth Bearing Distance Missing Two Primer Tutorial is shown below. Get in a conversation with a Land Surveyor, and drop in your sentence, close to each other, the words “bearing” and “distance” and in all likelihood you’ll get a smile. Is it a curved smile? Maybe, they are interested in the geodesic aspects to these two terms. You see, the rules of Euclidean geometry are all fine and good and used by Land Surveyors for small distances involving local mapping or small area mapping, where the curvature of the Earth is not really a factor. In fact, in the early days of Land Surveying, the plotting of an area might have been done using a table resting on a tripod, which hopefully made that table level (all good terrestrial surveying wants you to be perpendicular to the imaginary plumb bob hanging from your instrument, and hanging down in accordance with gravity’s laws). Geodesic interest for Land Surveyors tries to take into account the curvature of the Earth, which we’ll assume for today, is a sphere, though in reality it takes on a spheroidal shape that is not quite a sphere. Polar co-ordinate designations are an alternative “view” to placing yourself, as distinct from grid co-ordinates, or geographical latitude and longitude. We talked about some of what we have written a proof of concept web application for today with the PHP Google Map Chart Bearing Distance Tutorial some time back, and revisited its excellent … very useful link that talks about the Haversine distance formula, as well … and rereading this excellent webpage, realized that two sets of formulae there (plus the great circle distance calculations before) could help us piece together a useful navigational web application that, out of … … Continue reading →

Posted in eLearning, Event-Driven Programming, Land Surveying, Tutorials | Tagged , , , , , , , , , , , , , , , , | Leave a comment

Earth Bearing Distance Missing Two Primer Tutorial

Posted on by

Get in a conversation with a Land Surveyor, and drop in your sentence, close to each other, the words “bearing” and “distance” and in all likelihood you’ll get a smile. Is it a curved smile? Maybe, they are interested in the geodesic aspects to these two terms. You see, the rules of Euclidean geometry are all fine and good and used by Land Surveyors for small distances involving local mapping or small area mapping, where the curvature of the Earth is not really a factor. In fact, in the early days of Land Surveying, the plotting of an area might have been done using a table resting on a tripod, which hopefully made that table level (all good terrestrial surveying wants you to be perpendicular to the imaginary plumb bob hanging from your instrument, and hanging down in accordance with gravity’s laws). Geodesic interest for Land Surveyors tries to take into account the curvature of the Earth, which we’ll assume for today, is a sphere, though in reality it takes on a spheroidal shape that is not quite a sphere. Polar co-ordinate designations are an alternative “view” to placing yourself, as distinct from grid co-ordinates, or geographical latitude and longitude. We talked about some of what we have written a proof of concept web application for today with the PHP Google Map Chart Bearing Distance Tutorial some time back, and revisited its excellent … very useful link that talks about the Haversine distance formula, as well … and rereading this excellent webpage, realized that two sets of formulae there (plus the great circle distance calculations before) could help us piece together a useful navigational web application that, out of … From Latitude, Longitude Bearing, Distance To Latitude, Longitude … we could get the user to fill out 2 of 3 columns of information above, and calculate the missing one for them. How is this useful? Well, sometimes you want to know … We are at X. We are crow flying to Y. In which direction do we set out? How far is it? We are at X. That looks like a nice direction to head, so what compass reading is that? If I go however far, where do I end up? Second one for those dreamers and adventurers (or perhaps, orienteerers) methinks. Anyway, feel free to try the HTML and Javascript missing_two.html‘s live run link, or down below … Previous relevant PHP Google Map Chart Bearing Distance Tutorial is shown below. There have been three recent things going on, for us, involving software integration of our interface to the great Google Chart Map Chart … the work of PHP Wikipedia Australian List Integration Tutorial adding select (ie. Google Charts “onclick”) event Nearest TimeZone=Z and YouTube=Y functionalities … and also … ongoing changes readying web applications that can work in an iOS WKWebView we started talking about at Conditional Alternative to … Continue reading →

Posted in eLearning, Event-Driven Programming, Land Surveying, Tutorials | Tagged , , , , , , , , , , | Leave a comment