{"id":2431,"date":"2013-06-18T19:33:40","date_gmt":"2013-06-19T02:33:40","guid":{"rendered":"http:\/\/eloine.com\/blog\/?p=2431"},"modified":"2016-03-10T19:38:31","modified_gmt":"2016-03-11T03:38:31","slug":"design-process-for-building-an-interactive-map","status":"publish","type":"post","link":"https:\/\/eloine.com\/blog\/archives\/2431","title":{"rendered":"Design process for building an interactive map"},"content":{"rendered":"<p>This isn&#8217;t really a tutorial of how to create an interactive map as this blog post would be way too long and too complex. It&#8217;s more about the process of taking various resources and putting them together to create something. As I write this post this map is a work in progress. <strong><a href=\"http:\/\/www.losmedanos.edu\/maps\/buildinglocator.html\" target=\"_blank\">View Demo<\/a><\/strong><\/p>\n<p>The first step was to create the map. This was mostly done taking a screen grab from a satellite view of our campus off of Google maps. Then the buildings were traced using the pen too for each panel and curve. Shading was applied to give the buildings a 3D look.<\/p>\n<p><a href=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/header.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2432 alignnone\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/header.png\" alt=\"header\" width=\"591\" height=\"100\" srcset=\"https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/header.png 591w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/header-300x50.png 300w\" sizes=\"auto, (max-width: 591px) 100vw, 591px\" \/><\/a><\/p>\n<p>For masthead where the text looks like chalkboard type I used the rough texture of paper overlay into white type. I then outlined the type and the arrow that I drew with a rough brush.<\/p>\n<p>The map below is using several different technologies.<\/p>\n<ul>\n<li>Image maps to make hot regions using Adobe Dreamweaver to define the coordinates on mouse hover.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2433 alignnone\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map1.png\" alt=\"map1\" width=\"600\" height=\"461\" srcset=\"https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map1.png 600w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map1-300x230.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><!--more--><\/p>\n<ul>\n<li>A jQuery trigger was applied to the text to light up the various buildings in the image map. Using <strong><a href=\"http:\/\/davidlynch.org\/projects\/maphilight\/docs\/\">jQuery maphilight.<\/a><\/strong><\/li>\n<\/ul>\n<p><a href=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2434\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map2.png\" alt=\"map2\" width=\"600\" height=\"464\" srcset=\"https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map2.png 600w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/map2-300x232.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<ul>\n<li>Then I added used the spry tooltips to create a bubble that appears on the hover over the text or the building giving information as to the location of the building and a link for more details. I styled the bubble using CSS.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/detail.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2435\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/detail.png\" alt=\"detail\" width=\"600\" height=\"381\" srcset=\"https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/detail.png 600w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/detail-300x190.png 300w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/detail-330x210.png 330w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Then when you click on either the words or the building there is a window that dims the map and pops up with more information about the program and a closeup detail of the map. For this I used the <a href=\"http:\/\/orangoo.com\/labs\/greybox\/examples.html\"><strong>greybox popup window script &#8220;that doesn&#8217;t suck&#8221;<\/strong><\/a><\/p>\n<p><a href=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/popup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2436\" src=\"http:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/popup.png\" alt=\"popup\" width=\"600\" height=\"423\" srcset=\"https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/popup.png 600w, https:\/\/eloine.com\/blog\/wp-content\/uploads\/2013\/06\/popup-300x211.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Getting everything to link up and trigger all the other elements across these various scripts was a challenge but in the end I know what to modify to make it work. At least I hope so when I put this down for a couple months!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This isn&#8217;t really a tutorial of how to create an interactive map as this blog post would be way too long and too complex. It&#8217;s more about the process of taking various resources and putting them together to create something. As I write this post this map is a work in progress. View Demo The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[143,13,123,124,8],"tags":[],"class_list":["post-2431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-graphic-design","category-tutorial","category-tutorials","category-web-design"],"_links":{"self":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/2431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/comments?post=2431"}],"version-history":[{"count":10,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/2431\/revisions"}],"predecessor-version":[{"id":3402,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/2431\/revisions\/3402"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/media\/2434"}],"wp:attachment":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/media?parent=2431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/categories?post=2431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/tags?post=2431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}