{"id":1710,"date":"2013-02-01T08:32:40","date_gmt":"2013-02-01T07:32:40","guid":{"rendered":"http:\/\/jgeo.nl\/o\/?p=1710"},"modified":"2016-03-17T09:47:23","modified_gmt":"2016-03-17T08:47:23","slug":"overlay-maps-the-browser-does-it-all","status":"publish","type":"post","link":"https:\/\/jgeo.nl\/o\/2013\/02\/01\/overlay-maps-the-browser-does-it-all\/","title":{"rendered":"Overlay maps: the browser does it all!"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1716\" title=\"overlay\" src=\"http:\/\/jgeo.nl\/o\/wp-uploads\/jgeo.nl\/2013\/02\/overlay.jpg\" alt=\"\" width=\"312\" height=\"764\" srcset=\"\/o\/wp-uploads\/jgeo.nl\/2013\/02\/overlay.jpg 312w, \/o\/wp-uploads\/jgeo.nl\/2013\/02\/overlay-122x300.jpg 122w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/>I created something similar before, but I simplified the code a bit, and the result is still exciting. I put some JavaScrtipting in my weblog, to overlay maps with each other. The result you can see on <a title=\"KOVZ training april 2012: Zelf de kaart tekenen\" href=\"http:\/\/jgeo.nl\/o\/2012\/04\/14\/kovz-training-april-2012-zelf-de-kaart-tekenen\/#overlay\">this blog entry from a past training<\/a>, when we had to draw our own map, and my <a title=\"Midwinterrun 2013: een marathon door de sneeuw\" href=\"http:\/\/jgeo.nl\/o\/2013\/01\/30\/midwinterrun-2013-2\/#overlay\">latest post about the Midwinterrun<\/a>, where I overlayed an ancient map we got with the current topographic map.<\/p>\n<p>The fun is that you can change the opacity of the different layers. In the <a title=\"KOVZ training april 2012: Zelf de kaart tekenen\" href=\"http:\/\/jgeo.nl\/o\/2012\/04\/14\/kovz-training-april-2012-zelf-de-kaart-tekenen\/#overlay\">first example<\/a>, you can change the view to the map of the different runners, with and without the real, complete orienteering map underneath, or with the map semi-transparent.<\/p>\n<p>In the <a title=\"Midwinterrun 2013: een marathon door de sneeuw\" href=\"http:\/\/jgeo.nl\/o\/2013\/01\/30\/midwinterrun-2013-2\/#overlay\">second example<\/a>, you can hover with your mouse over a slider, that changed the opacity-ratio of the two different maps.<\/p>\n<p>It is nice to see that some features in the landscape still remain visible, while others have completely gone. And it is remarkable that some features were apparenty not correctly mapped, one-and-a-half century ago, as they have not moved, for sure, in the mean time, but are shown on the map on a significantly deviating location. I tend to believe that the present map is correct.<\/p>\n<div style=\"clear: both;\">The JavaScript code is shown below:<\/div>\n<pre lang=\"javascript\">\r\n<p><a name=\"overlay\"><\/a>nieuwe kaart <span id=\"slider\">\u2190 <\/span> \u2192 oude kaart<br \/>\r\n(ga met je muis over het balkje om de kaart te wisselen)<\/p>\r\n<div id=\"kaarten\" style=\"position: relative;\">\r\n <a href=\"http:\/\/jgeo.nl\/o\/wp-uploads\/jgeo.nl\/2013\/01\/oude_kaart.jpg\">\r\n  <img loading=\"lazy\" decoding=\"async\" id=\"overlay_oud\" style=\"position: absolute; left: 0pt;\" alt=\"\" src=\"http:\/\/jgeo.nl\/o\/wp-uploads\/jgeo.nl\/2013\/01\/oude_kaart.jpg\" width=\"640\" height=\"533\" \/>\r\n <\/a>\r\n<\/div>\r\n<p>\r\n <a href=\"http:\/\/jgeo.nl\/o\/wp-uploads\/jgeo.nl\/2013\/01\/nieuwe_kaart.jpg\">\r\n  <img loading=\"lazy\" decoding=\"async\" id=\"overlay_nieuw\" alt=\"\" src=\"http:\/\/jgeo.nl\/o\/wp-uploads\/jgeo.nl\/2013\/01\/nieuwe_kaart.jpg\" width=\"640\" height=\"533\" \/>\r\n <\/a>\r\n <br \/>\r\n <script type='text\/javascript'>\r\n\/* <![CDATA[ *\/\r\n\/\/gebruik geen lege regels want die worden als paragraph tag aangemerkt door de editor \r\n  var max=20;\r\n  for (var i=0; i<=max; i++) { \r\n    jQuery(\"#slider\").append(\"<span id='sliderstep\"+i+\"'>&equiv;<\/span>\"); \r\n  };\r\n  jQuery(\"[id*=sliderstep]\").hover(function () { \r\n    jQuery(\"#overlay_oud\").fadeTo(0,parseFloat(jQuery(this).attr('id').match(\/[0-9]+\/))\/max); \r\n  });\r\n  jQuery(\"#overlay_oud\").fadeTo(\"slow\", 1);\r\n\/* ]]&gt; *\/\r\n <\/script>\r\n<\/p>\r\n<\/pre>\n<p>I first create overlaying images, in the plain HTML code. With the style setting, I ensure they overlap. The images should all have the same pixel-size. Just above them, I placed a placeholder for the slider.<\/p>\n<p>Then, I use a bit of JavaScript to create the actual slider, and the handles that change the opacity of the image layers.<\/p>\n<p>Finally, I select which image is shown initially.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I created something similar before, but I simplified the code a bit, and the result is still exciting. I put some JavaScrtipting in my weblog, to overlay maps with each other. The result you can see on this blog entry from a past training, when we had to draw our own map, and my latest &hellip; <a href=\"https:\/\/jgeo.nl\/o\/2013\/02\/01\/overlay-maps-the-browser-does-it-all\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Overlay maps: the browser does it all!<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1711,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[29,8],"tags":[],"class_list":["post-1710","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-english","category-website"],"_links":{"self":[{"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/posts\/1710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/comments?post=1710"}],"version-history":[{"count":11,"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/posts\/1710\/revisions"}],"predecessor-version":[{"id":3916,"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/posts\/1710\/revisions\/3916"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/media\/1711"}],"wp:attachment":[{"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/media?parent=1710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/categories?post=1710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jgeo.nl\/o\/wp-json\/wp\/v2\/tags?post=1710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}