{"id":57945,"date":"2023-01-02T03:01:08","date_gmt":"2023-01-01T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57945"},"modified":"2023-01-04T20:13:51","modified_gmt":"2023-01-04T10:13:51","slug":"geojson-world-coastline-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-primer-tutorial\/","title":{"rendered":"GeoJson World Coastline Primer 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 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","protected":false},"excerpt":{"rendered":"<p>We&#8217;re keen to further explore the possibilities of GeoJson public data sets, further to yesterday&#8217;s Swift Playgrounds on macOS Map Emoji Tutorial. And then we remembered some of the methodologies we used with Responsive Web Design Landing Page Image Map &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-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,29,33,37],"tags":[99,184,4198,576,590,592,599,652,664,745,861,894,932,997,1319,1496],"class_list":["post-57945","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-operating-system","category-software","category-tutorials","tag-area","tag-canvas","tag-geojson","tag-html","tag-image","tag-image-map","tag-img","tag-javascript","tag-json","tag-map","tag-onclick","tag-overlay","tag-php","tag-programming","tag-tutorial","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57945"}],"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=57945"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57945\/revisions"}],"predecessor-version":[{"id":58000,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57945\/revisions\/58000"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}