{"id":2587,"date":"2013-10-30T15:26:00","date_gmt":"2013-10-30T22:26:00","guid":{"rendered":"http:\/\/www.esri.com\/about\/newsroom\/insider\/?p=2587"},"modified":"2013-10-30T15:26:00","modified_gmt":"2013-10-30T22:26:00","slug":"creating-and-customizing-a-story-map-from-a-non-giser","status":"publish","type":"insider","link":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser","title":{"rendered":"Creating and Customizing a Story Map \u2014 From a Non-GISer"},"content":{"rendered":"

Our friends at GISi recently published a great post<\/a> about how one of their non-GIS people created a story map. One of our writers had just created a Halloween-themed story map and we thought it would be interesting to learn more about his experience.<\/em>
\nGuest Post by Robby Deming<\/em>
\nAs a writer, I never thought I would create a story map. I have some technical knowledge, but the artistry and rich functionality behind some of our story maps<\/a> just seemed way out of my reach. After creating The Geography of Horror story map<\/a>, I\u2019m now proud to say that I couldn’t have been more wrong. Not only is it easy to create a story map, but it\u2019s also relatively easy to put your own unique touch on one.
\n

\"The<\/a>
The hardest part about creating this map? Collecting data on nearly 250 movies.<\/figcaption><\/figure>\n
\nGetting Started<\/strong>
\nMy initial goal was to create a fun map related to Halloween that we could share on social media. After going through a few different ideas, I finally settled on a map showing where some of the most well-known horror films took place. I found a great list on IMDB<\/a> and I decided to use the Storytelling Shortlist Template<\/a> since there was going to be a lot of information to show on this map.
\nFollowing the steps outlined in Bernie\u2019s walk-through for the Shortlist<\/a>, I set up several different CSV files (one for each tab in my map) and began digging through IMDB and Wikipedia to collect data and images. With some help from my colleagues (thanks Araceli, Stacey, Amanda, and Cassidy!), and a lot of perseverance, we eventually catalogued some 249 films spanning nearly 100 years.
\nBuilding the Map and App<\/strong>
\nI now turned to ArcGIS Online to start building my map. After logging in and looking at the default basemaps, I realized that none of them really fit the Halloween theme of the map. I started searching through ArcGIS Online for different ideas and I eventually found this elegant, yet spooky, dark gray basemap<\/a>. I simply saved a copy of the map (rather than trying to recreate it myself) and added in each of my CSV files as a Layer from File. The result<\/a> was a simple web map with seven different layers and a great basemap. With a web map in place, I could move on to the app itself.
\n\"The<\/a>
\nOne of the best things about the story map templates is just how easy it is to convert a relatively plain web map into a polished mapping application. Once I downloaded and installed the template to my inetpub\\wwroot folder (again, following the instructions from Bernie\u2019s walkthrough), I navigated to the index.html file for the template and opened it with a text editor (I highly recommend Notepad++<\/a>). From there, I found the config section of the file and replaced the default WEBMAP_ID with the ID from my map above, and saved. Voila, a perfectly functional story map.
\nCustomizing the App <\/strong>
\nI received positive feedback on the concept when I showed it around, but people wanted to know if we could tweak the map in subtle ways to really bring out the Halloween theme. Could we change some of the colors? Was there a way to make the images show up larger in the pop-ups? What about a custom banner?
\nI wanted to say yes, but I really didn\u2019t know how or even if some of those things were possible. After some encouragement from the story maps team and our designers, I created a backup of the app and started to dig in to the application files.
\nThis next part gets a little technical. Proceed, if you dare. *cue evil Halloween laughter*<\/em>
\nSince the app works great out-of-the-box, most of my \u201ccustomization\u201d ended up being cosmetic changes to existing values in either the CSS file (located in the template folder under css\/style) or the index.html file noted earlier. Both of those files can be daunting, but utilities like Chrome\u2019s built-in \u201cInspect Element\u201d tool can help you understand the link between different lines of code and the components of your story map. In many cases, when I decided I wanted to change something, I would right-click that area of the app and inspect it. Once I figured out how the app referenced that component (for example, the tabs with the years are simply referenced as “tab”), I found them in the CSS or the HTML file and began changing values to see how the app would respond.
\n
\"Inspect<\/a>
Want to change something in your app? Inspect it!<\/figcaption><\/figure>\nI won\u2019t go through all of the changes I made, but I\u2019ll cover three that had the most impact.
\nAdding a Custom Banner<\/span>
\nOur designers had created an awesome zombie image that I wanted to incorporate in the upper part of the app. Using the Inspect Element tool in Chrome, I determined that I had to edit the header property in the CSS to add the image as a banner. By editing one line of code and adding another (see below), I was able to easily include a custom banner in the app. This same approach should work for your apps, too.
\n
\"Adding<\/a>
Editing two lines of code in the CSS allows anyone to add a custom banner to their story map.<\/figcaption><\/figure>\nChanging Tab Colors and Size<\/span>
\nWhile the default grays for the tabs are nice, I wanted to emphasize the horror factor of the map by incorporating red throughout the app in specific places. I also needed to adjust the default tab size anyway, so I decided to make changes there. Using the Inspect Element tool again, I was directed to the tab portion of the CSS file. And just like the header, changing two lines of code resulted in a big difference. For the tab size, it was a matter of trial-and-error to see what would best fit the tab names. For the colors, a simple web search for \u201chex colors\u201d returned a variety of sites dedicated to HTML colors.
\n
\"Changing<\/a>
Simple changes to existing values resulted in big changes to the app.<\/figcaption><\/figure>\nMaking Images Bigger in the Pop-ups<\/span>
\nAfter hours of data collection, I was disappointed that the images I had found weren\u2019t showing up larger in the popups. Inspect Element again led me back to the CSS file, though there were actually two different elements that related to the image in the pop-ups. The pop-up is referenced as \u201cdetails\u201d and the elements that related to the size of the image are \u201cdetails .pictureFrame\u201d and \u201cdetails img.\u201d Like the tab sizes, it was a matter of trial and error to see what would best fit the images, but I eventually settled on this:
\n
\"Making<\/a>
Make your images pop with a few small changes.<\/figcaption><\/figure>\nThat\u2019s it. If you\u2019re familiar with any sort of application like Word or Notepad, you too can make little changes to your apps that really help them stand apart.<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[276562],"tags":[277752,278442],"class_list":["post-2587","insider","type-insider","status-publish","format-standard","hentry","category-storytelling-maps","tag-story-map","tag-story-map-templates"],"acf":[],"yoast_head":"\nCreating and Customizing a Story Map \u2014 From a Non-GISer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating and Customizing a Story Map \u2014 From a Non-GISer\" \/>\n<meta property=\"og:description\" content=\"Our friends at GISi recently published a great post about how one of their non-GIS people created a story map. One of our writers had just created a Halloween-themed story map and we thought it would be interesting to learn more about his experience. Guest Post by Robby Deming As a writer, I never thought […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/themes\/esri_newsroom\/placeholders\/Newsroom-Keyart-Wide.jpg\" \/><meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/themes\/esri_newsroom\/placeholders\/Newsroom-Keyart-Wide.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser\",\n\t \"name\": \"Creating and Customizing a Story Map \u2014 From a Non-GISer\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t },\n\t \"primaryImageOfPage\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#primaryimage\"\n\t },\n\t \"image\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#primaryimage\"\n\t },\n\t \"thumbnailUrl\": \"http:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/files\/2013\/10\/entire-map.jpg\",\n\t \"datePublished\": \"2013-10-30T22:26:00+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#primaryimage\",\n\t \"url\": \"\",\n\t \"contentUrl\": \"\"\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Creating and Customizing a Story Map \u2014 From a Non-GISer\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t \"name\": \"Esri\",\n\t \"description\": \"Esri Newsroom\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t },\n\t \"query-input\": {\n\t \"@type\": \"PropertyValueSpecification\",\n\t \"valueRequired\": true,\n\t \"valueName\": \"search_term_string\"\n\t }\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating and Customizing a Story Map \u2014 From a Non-GISer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser","og_locale":"en_US","og_type":"article","og_title":"Creating and Customizing a Story Map \u2014 From a Non-GISer","og_description":"Our friends at GISi recently published a great post about how one of their non-GIS people created a story map. One of our writers had just created a Halloween-themed story map and we thought it would be interesting to learn more about his experience. Guest Post by Robby Deming As a writer, I never thought […]","og_url":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/themes\/esri_newsroom\/placeholders\/Newsroom-Keyart-Wide.jpg","type":"","width":"","height":""},{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/themes\/esri_newsroom\/placeholders\/Newsroom-Keyart-Wide.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser","url":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser","name":"Creating and Customizing a Story Map \u2014 From a Non-GISer","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#primaryimage"},"image":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#primaryimage"},"thumbnailUrl":"http:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/files\/2013\/10\/entire-map.jpg","datePublished":"2013-10-30T22:26:00+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/insider\/creating-and-customizing-a-story-map-from-a-non-giser#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Creating and Customizing a Story Map \u2014 From a Non-GISer"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/insider\/2587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/insider"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/insider"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/insider\/2587\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=2587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=2587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=2587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}