{"id":57962,"date":"2023-01-03T03:01:21","date_gmt":"2023-01-02T17:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57962"},"modified":"2023-01-04T20:12:51","modified_gmt":"2023-01-04T10:12:51","slug":"geojson-world-coastline-timezone-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-timezone-tutorial\/","title":{"rendered":"GeoJson World Coastline TimeZone Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline TimeZone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_tz.jpg\" title=\"GeoJson World Coastline TimeZone Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline TimeZone Tutorial<\/p><\/div>\n<p>Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance.  As such, given the &#8220;purely coastline&#8221; GeoJson data involved in our fledgling PHP web application of yesterday&#8217;s <a title='GeoJson World Coastline Primer Tutorial' href='#gjwcpt'>GeoJson World Coastline Primer Tutorial<\/a> a useful arrangement for improvement involves &#8230;<\/p>\n<ul>\n<li>document.body onclick event co-ordinates &#8230; able to be converted to &#8230;<\/li>\n<li>longitude, latitude <font size=1>(easily, only because of our simplistic map projection, of course)<\/font> &#8230; onfed to &#8230;<\/li>\n<li>our inhouse <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\">&#8220;TimeZone Places&#8221; web application<\/a> PHP helper<\/li>\n<\/ul>\n<p> &#8230; can have us helping out your curious web &#8220;clicking&#8221; user with the 3 nearest TimeZone places, as a reference as to where they are &#8220;clicking&#8221; in the world.<\/p>\n<p>Feel free to try <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\">our improved<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson PHP web application<\/a> in a new window, or below &#8230;<\/p>\n<p><iframe style='width:100%;height:600px;' src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><\/iframe><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Our efforts in making <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\">our new tweaked<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson PHP web application<\/a> more mobile platform user friendly reminds us about a salutary issue regarding touch gestures &#8230;<\/a><\/p>\n<ul>\n<li>in a discrete click methodology of interest, you could adopt a non-mobile &#8220;onmousedown&#8221; logic set that does not get interfered with by a mobile &#8220;ontouchdown&#8221; logic set (perhaps leaving &#8220;onclick&#8221; event, which both non-mobile and mobile both recognise, for another event logic role) &#8230; and &#8230;<\/li>\n<li>neither will interrupt the mobile gestures associated with swiping and pinching, which refer to the events &#8220;ontouchstart&#8221; and &#8220;ontouchend&#8221; at either end of their lifespan<\/li>\n<\/ul>\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\/new-geojson-world-coastline-primer-tutorial\/'>New GeoJson World Coastline Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcpt'>Previous relevant <a target=_blank title='GeoJson World Coastline Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-primer-tutorial\/'>GeoJson World Coastline Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geojson_coastline.jpg\" title=\"GeoJson World Coastline Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline Primer Tutorial<\/p><\/div>\n<p>We&#8217;re keen to further explore the possibilities of <a target=_blank title='GeoJson information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GeoJSON'>GeoJson<\/a> public data sets, further to yesterday&#8217;s <a target=_blank title='Swift Playgrounds on macOS Map Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/swift-playgrounds-on-macos-map-emoji-tutorial'>Swift Playgrounds on macOS Map Emoji Tutorial<\/a>.<\/p>\n<p>And then we remembered some of the methodologies we used with <a target=_blank title='Responsive Web Design Landing Page Image Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/'>Responsive Web Design Landing Page Image Map Tutorial<\/a>, talking about <a target=_blank title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>image maps<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/'><p>\nAnd so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out \u2026 but not today?! Why not?  We have a funny set of needs, they being \u2026<br \/>\n<\/p>\n<ul>\n<li>our Image Map\u2019s image will have a variable set of width x height dimensions \u2026<\/li>\n<li>our Image Map\u2019s image will be transparent<\/li>\n<li>our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working<\/li>\n<\/blockquote>\n<p> &#8230; the first two ideas of which, along with &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element where the &#8230;<\/li>\n<li>GeoJson coordinates &#8230; thanks to <a target=_blank title=https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson'>https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson<\/a> via <a target=_blank title='http:\/\/geojson.xyz\/' href='HTTP:\/\/geojson.xyz\/'>HTTP:\/\/geojson.xyz\/<\/a> &#8230;<\/li>\n<li>will be plotted &#8230; but the canvas element &#8230;<\/li>\n<li>has a <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a> set below the image and image map above &#8230; meaning &#8230;<\/li>\n<li>we can add some region specific coding into the &#8230;<\/li>\n<li>image map <a target=_blank title='HTML area element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp'>area<\/a> element (shape=poly) onclick logics<\/li>\n<\/ul>\n<p> &#8230; in our &#8220;early days&#8221; &#8220;proof of concept&#8221; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php_GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson PHP web application<\/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='#d57945' onclick='var dv=document.getElementById(\"d57945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geojson\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57945' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d57962' onclick='var dv=document.getElementById(\"d57962\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57962' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance. As such, given the &#8220;purely coastline&#8221; GeoJson data involved in our fledgling PHP web application of yesterday&#8217;s GeoJson World Coastline Primer &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-timezone-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":[99,184,4198,485,576,587,590,592,599,614,652,664,745,861,1919,4204,872,873,894,932,2134,997,1038,1168,1200,1693,1294,4203,1319,2580,1496],"class_list":["post-57962","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-area","tag-canvas","tag-geojson","tag-gesture","tag-html","tag-iframe","tag-image","tag-image-map","tag-img","tag-integration","tag-javascript","tag-json","tag-map","tag-onclick","tag-onmousedown","tag-ontouchdowm","tag-ontouchend","tag-ontouchstart","tag-overlay","tag-php","tag-place","tag-programming","tag-reference","tag-software-integration","tag-stop-press","tag-timezone","tag-touch","tag-touch-gesture","tag-tutorial","tag-where","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57962"}],"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=57962"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57962\/revisions"}],"predecessor-version":[{"id":57999,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57962\/revisions\/57999"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}