{"id":14234,"date":"2015-04-16T05:03:45","date_gmt":"2015-04-15T19:03:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=14234"},"modified":"2015-04-23T08:42:01","modified_gmt":"2015-04-22T22:42:01","slug":"html5-canvas-map-clickaround-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-canvas-map-clickaround-primer-tutorial\/","title":{"rendered":"HTML5 Canvas Map Clickaround Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ireland.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML5 Canvas Map Clickaround Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ireland.png\" title=\"HTML5 Canvas Map Clickaround Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Canvas Map Clickaround Primer Tutorial<\/p><\/div>\n<p>HTML5 brought in the incredibly useful <a target=_blank title='HTML5 canvas information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_canvas.asp'>&#8220;canvas&#8221;<\/a> element, for the first time.  Its existence opens up a whole new world of possibilities for web applications that are graphical by nature.<\/p>\n<p>With the canvas element&#8217;s <a target=_blank title='HTML5 canvas drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage()<\/a> method you can draw more than your own geometrical constructs, you can have an image, and that image could be a map, as for today&#8217;s &#8220;Ireland Clickaround&#8221; web application (with access to maps of Brazil and United States of America and the World too), where you click on the map (and thanks to <a target=_blank href='http:\/\/www.mapsofworld.com' title='mapsofworld.com'>mapsofworld.com<\/a> for downloadable free maps here) to show a Google Map of interest via <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Google Chart Map Chart<\/a>.  Maybe you can use the map of Ireland to &#8230;<\/p>\n<ul>\n<li>plan a trip<\/li>\n<li>look up where relatives live<\/li>\n<li>imagine you&#8217;re in O&#8217;Connell Street<\/li>\n<\/ul>\n<p>This web application calls on tiny bits of mapping knowledge, namely the &#8220;orientation&#8221; of your &#8220;map&#8221;, as you are effectively <a target=_blank title='Hard Copy Digitizing for Ordnance Survey' href='http:\/\/www.rjmprogramming.com.au\/MyBusinessEins\/Media\/Pages\/Movie.html'>digitizing<\/a> to show where you want your Google Map to zoom in on.<\/p>\n<p>This is one of those occasions that your (simple) software is a lot more effective using the <a target=_blank title='Mercator map projection information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Mercator_projection'>Mercator<\/a> map projection (that exaggerates the polar areas (like you might have had at school) because the simple latitude and longitude distances everywhere are the same (but relative areas definitely are not (ie. much bigger than reality near the poles))).   Unfortunately, our United States of America projection is not Mercator, but you&#8217;ll still get a &#8220;ball park&#8221; Google Maps feel.<\/p>\n<p>So we can have it that if the user doesn&#8217;t zoom, they need no orientation checks, but otherwise we need to determine a scale, by the user clicking on Dublin, on the map, and from that, we can work out the scaling that needs to be applied, as the top left co-ordinate is arranged to be (0,0) via the <i>style=&#8221;position: absolute; top:0; left:0; &#8220;<\/i> part of &#8230;<\/p>\n<p><code><br \/>\n&lt;canvas id=\"canvaselement\" width=600 height=600 style=\"position: absolute; top:0; left:0; \" \/&gt;<br \/>\n<\/code><\/p>\n<p>Please have a go of our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ireland.html\" title=\"Click picture\">live run<\/a> or download the HTML programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ireland.html_GETME\" title=\"ireland.html\">ireland.html<\/a> (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/brazil.html_GETME\" title=\"brazil.html\">brazil.html<\/a>, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/united_states.html_GETME\" title=\"united_states.html\">united_states.html<\/a>, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.html_GETME\" title=\"world.html\">world.html<\/a>), or do both?!<\/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='#14234' onclick='var dv=document.getElementById(\"d14234\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14234' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 brought in the incredibly useful &#8220;canvas&#8221; element, for the first time. Its existence opens up a whole new world of possibilities for web applications that are graphical by nature. With the canvas element&#8217;s drawImage() method you can draw more &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-canvas-map-clickaround-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,17,21,37],"tags":[163,184,189,332,333,400,513,518,541,576,578,590,636,652,679,745,746,748,772,861,889,997,1095,1319,1338],"class_list":["post-14234","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gui","category-land-surveying","category-tutorials","tag-brazil","tag-canvas","tag-cartogtaphy","tag-digitising","tag-digitizing","tag-event","tag-google","tag-google-chart","tag-graphics","tag-html","tag-html5","tag-image","tag-ireland","tag-javascript","tag-land-surveying","tag-map","tag-map-projection","tag-mapping","tag-mercator","tag-onclick","tag-orientation","tag-programming","tag-scaling","tag-tutorial","tag-united-states-of-america"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14234"}],"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=14234"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14234\/revisions"}],"predecessor-version":[{"id":14457,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14234\/revisions\/14457"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=14234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=14234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=14234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}