{"id":62502,"date":"2024-02-04T03:01:43","date_gmt":"2024-02-03T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62502"},"modified":"2024-02-05T07:08:13","modified_gmt":"2024-02-04T21:08:13","slug":"region-picker-geojson-trip-leg-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-trip-leg-tutorial\/","title":{"rendered":"Region Picker GeoJson Trip Leg Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker GeoJson Trip Leg Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/region_picker_geojson_trip_planner_leg.gif\" title=\"Region Picker GeoJson Trip Leg Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker GeoJson Trip Leg Tutorial<\/p><\/div>\n<p>Nice legs!  Regarding the trips, of course.   Trip planning?   GeoJson?   Region Picker?<\/p>\n<p>Yes, yesterday&#8217;s <a title='Region Picker GeoJson Trip Planning Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-trip-planning-tutorial\/'>Region Picker GeoJson Trip Planning Tutorial<\/a>&#8216;s progress had us starting to allow for a Trip Planner subset of functionality for our Google Image Chart Map Chart interfacing Region Picker.   Our first job to do moving forward is to allow between &#8230;<\/p>\n<ul>\n<li>Region Picker region representative geographical &#8220;marker&#8221; placements on the &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html\" title=\"GeoJson World Map\">interfacing<\/a> <a target=_blank title='GeoJson information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GeoJSON'>GeoJson<\/a> world map &#8230;<\/li>\n<li>be able to be right clicked to flag sets of two such right clicks defining endpoints for a Trip &#8220;Leg&#8221; drawn as a straight line with huge thanks to &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n.crossedtotl { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css' href='https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css'>https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<\/a><br \/>\n     background:<br \/>\n         linear-gradient(to top left,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n<br \/>\n.crossedtotr {<br \/>\n     background:<br \/>\n         linear-gradient(to top right,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<br \/>\n &#8230; and from there be able to &#8230;<\/li>\n<li>hover over a leg to see bearing and distance information &#8230; as well as to &#8230;<\/li>\n<li>click a leg to show a <a target=_blank href='https:\/\/www.google.com\/search?q=google+directions&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=google+directions&#038;aqs=chrome.0.69i59j0i512l6j69i60.4254j0j4&#038;sourceid=chrome&#038;ie=UTF-8' title='Google Directions'>Google Directions<\/a> webpage<\/li>\n<\/ul>\n<p> &#8230; via &#8230;<\/p>\n<p><code><br \/>\nfunction great_circle_bearing(talis, gnolis, latis, longis) {<br \/>\n    \/\/ Let \u2018R\u2019 be the radius of Earth,<br \/>\n    \/\/ \u2018L\u2019 be the longitude,<br \/>\n    \/\/ \u2018\u03b8\u2019 be latitude,<br \/>\n    \/\/ \u2018\u03b2\u2018 be Bearing.<br \/>\n<br \/>\n \/\/ Bearing from point A to B, can be calculated as,<br \/>\n \/\/ \u03b2 = atan2(X,Y),<br \/>\n \/\/ where, X and Y are two quantities and can be calculated as:<br \/>\n \/\/ X = cos \u03b8b * sin \u2206L<br \/>\n \/\/ Y = cos \u03b8a * sin \u03b8b \u2013 sin \u03b8a * cos \u03b8b * cos \u2206L<br \/>\n<br \/>\n       var ourbrg=eval(eval(360.0 + eval(eval(eval(180.0 \/ Math.PI) * Math.atan2(<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + latis))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval(eval('' + longis) - eval('' + gnolis))))),<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + talis))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + latis)))) -<br \/>\n       eval(eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + talis))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + latis))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval(eval('' + longis) - eval('' + gnolis)))))<br \/>\n       )))) % 360.0);<br \/>\n<br \/>\n       return '' + ourbrg;<br \/>\n}<br \/>\n<br \/>\nfunction great_circle_distance(talis, gnolis, latis, longis) {<br \/>\n  var ourdist=0.0;<br \/>\n  var rgnol=eval((gnolis) * Math.PI \/ 180.0);<br \/>\n  var rtal=eval((talis) * Math.PI \/ 180.0);<br \/>\n  var rlong=eval((longis) * Math.PI \/ 180.0);<br \/>\n  var rlat=eval((latis) * Math.PI \/ 180.0);<br \/>\n  var deltalong = Math.abs(eval(((gnolis)-(longis)) * Math.PI \/ 180.0));<br \/>\n  var acof = eval(Math.sin(rtal) * Math.sin(rlat)) + (Math.cos(rtal) * Math.cos(rlat) * Math.cos(deltalong)); \/\/ via \/\/en.wikipedia.org\/wiki\/Great-circle_distance ... thanks<br \/>\n  ourdist = eval(Math.round((Math.acos(acof) * 6371000.0) + 0.00001) * 100) \/ 100;<br \/>\n  return '' + ourdist;<br \/>\n}<br \/>\n<br \/>\n  function storeaway(thisspano) {<br \/>\n    var lastspanoid=null;<br \/>\n    if (lastspano) { lastspanoid='' + lastspano.id;  }<br \/>\n    if (('' + thisspano.id).indexOf('sspan') == 0) { thisspano=document.getElementById(('' + thisspano.id).replace('sspan','span'));  }<br \/>\n    if (('' + lastspanoid) != ('' + thisspano.id) && ('' + thisspano.id).indexOf('span') == 0) {<br \/>\n       spanos.push(thisspano);<br \/>\n       lastspano=thisspano;<br \/>\n       thisspano.style.color='green';<br \/>\n       thisspano.innerHTML='&amp;#10060;';<br \/>\n       if (eval('' + spanos.length) &gt; 1) {<br \/>\n         drawlinebetween(spanos[eval(-2 + spanos.length)], spanos[eval(-1 + spanos.length)]);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function drawlinebetween(spanoone, spanotwo) {<br \/>\n        var xneeds=[], yneeds=[], classbit='';<br \/>\n        if (('' + spanoone.id).indexOf('sspan') == 0) { spanoone=document.getElementById(('' + spanoone.id).replace('sspan','span'));  }<br \/>\n        if (('' + spanotwo.id).indexOf('sspan') == 0) { spanotwo=document.getElementById(('' + spanotwo.id).replace('sspan','span'));  }<br \/>\n        if (('' + spanoone.id).indexOf('span') == 0 && ('' + spanotwo.id).indexOf('span') == 0) {<br \/>\n        xneeds.push(eval('' + ('' + spanoone.style.left).replace('px','')));<br \/>\n        yneeds.push(eval('' + ('' + spanoone.style.top).replace('px','')));<br \/>\n        xneeds.push(eval('' + ('' + spanotwo.style.left).replace('px','')));<br \/>\n        yneeds.push(eval('' + ('' + spanotwo.style.top).replace('px','')));<br \/>\n        if (Math.min(xneeds[0],xneeds[1]) == xneeds[0] && Math.min(yneeds[0],yneeds[1]) == yneeds[1]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],xneeds[1]) == xneeds[1] && Math.min(yneeds[0],yneeds[1]) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        spanoone.innerHTML='&amp;#10060;';<br \/>\n        spanotwo.innerHTML='&amp;#10060;';<br \/>\n        document.getElementById('plots').innerHTML+='&lt;div onclick=\"window.open(' + \"'\/\/www.google.com\/maps\/dir\/\" + spanoone.getAttribute('data-geo') + \"\/\" + spanotwo.getAttribute('data-geo') + \"','_blank','left=20,top=20,width=900,height=800'\" + ');\" title=\"Leg from ' + spanoone.title + ' to ' + spanotwo.title + ' heads off at ' + great_circle_bearing(spanoone.getAttribute('data-geo').split(',')[0], spanoone.getAttribute('data-geo').split(',')[1], spanotwo.getAttribute('data-geo').split(',')[0], spanotwo.getAttribute('data-geo').split(',')[1]) + ' degrees for ' + eval(eval('' + great_circle_distance(spanoone.getAttribute('data-geo').split(',')[0], spanoone.getAttribute('data-geo').split(',')[1], spanotwo.getAttribute('data-geo').split(',')[0], spanotwo.getAttribute('data-geo').split(',')[1])) \/ 1000.0) + ' kilometers ... click for Google Directions\" id=line_' + spanoone.id.split('span')[1] + '_' + spanotwo.id.split('span')[1] + ' ' + classbit + ' style=\"margin:0 0 0 0;padding:0 0 0 0;position:fixed;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;\"&gt;&lt;\/div&gt;';<br \/>\n        }<br \/>\n  }<br \/>\n<br \/>\n  function ifcheck(ziois) {<br \/>\n       var waszoom=1;<br \/>\n       var sparear=null;<br \/>\n       var xif=-999, yif=-999, xxif=-999, yyif=-999;<br \/>\n       zaconto = (ziois.contentWindow || ziois.contentDocument);<br \/>\n   \/\/alert(11);<br \/>\n       zzaconto=zaconto;<br \/>\n       if (zaconto != null) {<br \/>\n   \/\/alert('111 ' + xiois.src);<br \/>\n       try {<br \/>\n       if (zaconto.document) { zaconto = zaconto.document; }<br \/>\n    \/\/alert('1111 ' + zaconto.body.innerHTML);<br \/>\n       if (zaconto.body.innerHTML.indexOf('&gt;') != -1) {<br \/>\n          zoomdone=false;<br \/>\n          lastiizoom=0;<br \/>\n          var itwo='';<br \/>\n          if (document.getElementById('myp')) {<br \/>\n          itwo=('' + document.getElementById('myp').getAttribute('data-fc')).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim().toUpperCase();<br \/>\n          }<br \/>\n          if (itwo == '' && lastcode != '') { itwo=lastcode;  }<br \/>\n          if (eval('' + itwo.length) == 2 || (document.getElementById('placegeo').title + document.getElementById('placegeo').value).trim() != '') {<br \/>\n          var xlatdeg=0, xlongdeg=0;<br \/>\n          if ((document.getElementById('placegeo').title + document.getElementById('placegeo').value).indexOf(',') != -1) {<br \/>\n          xlatdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[0]);<br \/>\n          xlongdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[1]);<br \/>\n          }<br \/>\n          iizoom=eval(eval('' + ('' + zaconto.getElementById('myimg').style.width).replace('px','')) \/ 360); \/\/eval('' + zaconto.getzoom());<br \/>\n          xif=eval(iizoom * eval(180 + eval('' + xlongdeg)));<br \/>\n          yif=eval(iizoom * eval(90 - eval('' + xlatdeg)));<br \/>\n          \/\/alert('' + xif + ',' + yif);<br \/>\n          \/\/alert(itwo);<br \/>\n          var isp=0;<br \/>\n          var jsp=0;<br \/>\n          if (eval('' + itwo.length) == 2) {<br \/>\n            if (xif &gt;= -180 && yif &gt;= -90) {<br \/>\n            if (lastiizoom != iizoom) {<br \/>\n              var huhrect=document.getElementById('ifcountries').getBoundingClientRect();<br \/>\n              var ospancount=spancount;<br \/>\n              newone=eval(1 + spancount);<br \/>\n              while (document.getElementById('span' + isp)) {<br \/>\n                if (isp &lt; ospancount) {<br \/>\n                waszoom=document.getElementById('span' + isp).getAttribute('data-zoom');<br \/>\n                if (waszoom != iizoom) {<br \/>\n                  xlatdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[0]);<br \/>\n                  xlongdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[1]);<br \/>\n                  xxif=eval(iizoom * eval(180 + eval('' + xlongdeg)));<br \/>\n                  yyif=eval(iizoom * eval(90 - eval('' + xlatdeg)));<br \/>\n                  if (1 == 1) {<br \/>\n            document.getElementById('plots').innerHTML+='&lt;span id=sspan' + spancount + '&gt;&lt;span oncontextmenu=\"event.stopPropagation(); event.preventDefault(); storeaway(this);\" data-zoom=\"' + iiizoom + '\" data-iframepos=\"' + huhrect.left + ',' + huhrect.top + '\" data-geo=\"' + xlatdeg + ',' + xlongdeg + '\" title=\"' + decodeURIComponent(document.getElementById('span' + isp).title) + '\" id=span' + spancount + ' style=\"font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yyif) + 'px;left:' + eval(eval('' + huhrect.left) + xxif) + 'px;\"&gt;x&lt;\/span&gt;&lt;\/span&gt;';<br \/>\n            nodiv(isp, spancount);<br \/>\n            spancount++;<br \/>\n            jsp++;<br \/>\n            document.getElementById('span' + isp).style.display='none';<br \/>\n                  } else {<br \/>\n                  document.getElementById('span' + isp).style.top='' + eval(eval('' + huhrect.top) + yyif) + 'px';<br \/>\n                  document.getElementById('span' + isp).style.left='' + eval(eval('' + huhrect.left) + xxif) + 'px';<br \/>\n                  document.getElementById('span' + isp).setAttribute('data-zoom', '' + iizoom);<br \/>\n                  document.getElementById('span' + isp).setAttribute('data-iframepos', '' + huhrect.left + ',' + huhrect.top);<br \/>\n                  document.getElementById('sspan' + isp).innerHTML=document.getElementById('span' + isp).outerHTML;<br \/>\n                  }<br \/>\n                }<br \/>\n                }<br \/>\n                isp++;<br \/>\n              }<br \/>\n            }<br \/>\n            spancount=eval(isp + jsp);<br \/>\n            if (jjans == jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'')) {<br \/>\n            document.getElementById('plots').innerHTML+='&lt;span id=sspan' + spancount + '&gt;&lt;span oncontextmenu=\"event.stopPropagation(); event.preventDefault(); storeaway(this);\" data-zoom=\"' + iizoom + '\" data-iframepos=\"' + huhrect.left + ',' + huhrect.top + '\" data-geo=\"' + xlatdeg + ',' + xlongdeg + '\" title=\"' + decodeURIComponent(lastr) + '\" id=span' + spancount + ' style=\"font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yif) + 'px;left:' + eval(eval('' + huhrect.left) + xif) + 'px;\"&gt;x&lt;\/span&gt;&lt;\/span&gt;';<br \/>\n            spancount++;<br \/>\n            setTimeout(nospan, 30000);<br \/>\n            }<br \/>\n            }<br \/>\n            var ars=zaconto.getElementsByTagName('area');<br \/>\n            for (var iars=0; iars&lt;ars.length; iars++) {<br \/>\n               while (('' + ars[iars].getAttribute('data-iso2')) == itwo) {<br \/>\n            \/\/document.title='' + iars + ' ... ' + ('' + ars[iars].getAttribute('data-iso2'));<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.top='385px';<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.left='0px';<br \/>\n                 if (ars[iars].outerHTML.indexOf(' onclick=\"') != -1) {<br \/>\n                    \/\/itwo=' ';<br \/>\n                    sparear=ars[iars];<br \/>\n                    document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().substring(0,220);<br \/>\n                    if (9 == 9) {<br \/>\n                      sparear.click();<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'sparear.').replace(\/this\\,\/g,'sparear,'));<br \/>\n                    } else {<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'sparear.').replace(\/this\\,\/g,'sparear,'));<br \/>\n                    }<br \/>\n                 }<br \/>\n                 iars++;<br \/>\n                 \/\/itwo='';<br \/>\n               }<br \/>\n               if (sparear) { itwo='';  }<br \/>\n            }<br \/>\n<br \/> <br \/>\n          }<br \/>\n          jjans=jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n          if (!zoomdone) {<br \/>\n          lastiizoom=iizoom;<br \/>\n          zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          } else {<br \/>\n          lastiizoom=sein(iizoom);<br \/>\n          }<br \/>\n          if (itwo == '') {<br \/>\n zaconto.getElementsByTagName('canvas')[0].dispatchEvent(new Event(\"click\", {<br \/>\n  bubbles: true, \/\/ only bubbles and cancelable<br \/>\n  cancelable: true, \/\/ work in the Event constructor<br \/>\n  clientX: xif,<br \/>\n  clientY: yif<br \/>\n }));<br \/>\nif (1 == 2) {<br \/>\nif (zaconto.elementsFromPoint) {<br \/>\n  var elements = zaconto.elementsFromPoint(xif, yif);<br \/>\n  elements.forEach((elt, i) =&gt; {<br \/>\n    if (i &lt; elements.length - 1) {<br \/>\n zaconto.body.dispatchEvent(new Event(\"click\", {<br \/>\n  bubbles: true, \/\/ only bubbles and cancelable<br \/>\n  cancelable: true, \/\/ work in the Event constructor<br \/>\n  clientX: xif,<br \/>\n  clientY: yif<br \/>\n }));<br \/>\n    }<br \/>\n  });<br \/>\n} else {<br \/>\n          zaconto.elementFromPoint(xif, yif).click();<br \/>\n}<br \/>\n}<br \/>\n       }<br \/>\n          }<br \/>\n       }<br \/>\n       } catch(hgjgs) {  }<br \/>\n       }<br \/>\n       jjans=jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n       return true;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function nodiv(wasid, newid) {<br \/>\n      var divsoarr=document.getElementsByTagName('div');<br \/>\n      for (var idivs=0; idivs&lt;divsoarr.length; idivs++) {<br \/>\n        if (('' + divsoarr[idivs].id).indexOf('line_' + wasid + '_') == 0) {<br \/>\n           divsoarr[idivs].style.display='none';<br \/>\n           spanos.push(document.getElementById('span' + newid));<br \/>\n        \/\/alert('here ' + wasid + ' ' + spanos.length + ' ' + newone);<br \/>\n           if (eval('' + spanos.length) &gt; newone) {<br \/>\n        \/\/alert('here2');<br \/>\n             drawlinebetween(spanos[eval(-2 + spanos.length)], spanos[eval(-1 + spanos.length)]);<br \/>\n           }<br \/>\n        } else if (('' + divsoarr[idivs].id).indexOf('line_') == 0 && ('' + divsoarr[idivs].id + '~').indexOf('_' + wasid + '~') != -1) {<br \/>\n           divsoarr[idivs].style.display='none';<br \/>\n           spanos.push(document.getElementById('span' + newid));<br \/>\n        \/\/alert('there ' + wasid + ' ' + spanos.length + ' ' + newone);<br \/>\n           if (eval('' + spanos.length) &gt; newone) {<br \/>\n        \/\/alert('there2');<br \/>\n             drawlinebetween(spanos[eval(-2 + spanos.length)], spanos[eval(-1 + spanos.length)]);<br \/>\n           }<br \/>\n        }<br \/>\n      }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-----------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-----------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-trip-leg-tutorial\/'>Region Picker GeoJson Trip Leg Tutorial<\/a>.<\/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='#d62502' onclick='var dv=document.getElementById(\"d62502\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bearing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62502' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Nice legs! Regarding the trips, of course. Trip planning? GeoJson? Region Picker? Yes, yesterday&#8217;s Region Picker GeoJson Trip Planning Tutorial&#8216;s progress had us starting to allow for a Trip Planner subset of functionality for our Google Image Chart Map Chart &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-trip-leg-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,1,37],"tags":[2914,2915,51,2824,1669,88,1885,112,1970,174,184,208,211,212,4286,224,4506,227,230,2105,2246,2081,281,290,2084,2147,1727,2848,354,359,367,385,3192,1929,400,4295,3330,2242,452,1550,1619,4198,485,486,4206,518,2969,524,2229,557,573,576,587,590,4562,599,3101,614,652,673,3272,2795,1992,3656,3862,1943,2371,770,795,830,2921,860,861,3987,1666,870,2219,876,894,932,4616,967,968,970,997,1761,4649,4648,1620,4643,1997,1059,1069,1094,1866,3097,1126,4653,4640,1198,1226,1254,1675,1693,1292,1294,1311,1694,1319,1345,4654,2450,1404,1433,3171,2811,1496,1498],"class_list":["post-62502","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-uncategorised","category-tutorials","tag-_get","tag-_post","tag-above-the-fold","tag-absolute","tag-address-bar","tag-api","tag-argument","tag-attribute","tag-bearing","tag-button","tag-canvas","tag-circle","tag-click","tag-client","tag-clientside","tag-colour","tag-colour-code","tag-colour-matching-2","tag-column","tag-context","tag-continent","tag-country","tag-css","tag-data","tag-data-attributes","tag-delimiter","tag-distance","tag-document-getelementsbytagname","tag-dom","tag-double-click","tag-dropdown","tag-emoji","tag-emoji-flag","tag-error","tag-event","tag-event-stoppropagation","tag-fill","tag-flag","tag-form","tag-gd","tag-geo-chart","tag-geojson","tag-gesture","tag-getelementbyid","tag-global-data-attributes","tag-google-chart","tag-google-directions","tag-google-earth","tag-hash","tag-hashtag","tag-hotkey","tag-html","tag-iframe","tag-image","tag-image-chart","tag-img","tag-inhouse","tag-integration","tag-javascript","tag-keyboard","tag-left","tag-leg","tag-legend","tag-length","tag-lookup","tag-margin-left","tag-margin-top","tag-menu","tag-mobile","tag-navigation","tag-offset","tag-onblur","tag-onclick","tag-oncontextmenu","tag-ondblclick","tag-onload","tag-onmousemove","tag-opacity","tag-overlay","tag-php","tag-picker","tag-popup","tag-popup-window","tag-post","tag-programming","tag-prompt","tag-pulldown","tag-pulldown-menu","tag-region","tag-regional","tag-request","tag-resize","tag-right-click","tag-scale","tag-select","tag-setattribute","tag-settimeout","tag-shade","tag-shading","tag-sticky","tag-svg","tag-text","tag-textbox","tag-timezone","tag-top","tag-touch","tag-trip","tag-trip-planner","tag-tutorial","tag-url","tag-vertical-bar","tag-view","tag-web-browser","tag-window-open","tag-workflow","tag-world","tag-z-index","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62502"}],"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=62502"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62502\/revisions"}],"predecessor-version":[{"id":62511,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62502\/revisions\/62511"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}