Image for post
Image for post

Map Journal Customizations — Part 2: Basemap Switch Button

Tim Witt
Tim Witt
Jun 21, 2016 · 4 min read

Hey everybody, my name is Tim and I love coding! By day I am a E911 GIS Analyst and by night I try to teach myself coding. When I code, I mostly work with the ArcGIS Javascript API, which I use to create fun and sometimes even useful applications. You can find some of them on my website.

The ESRI story map team has asked me to write a series of guest posts on the Story Maps Developer’s blog. I have created a heavily customized Map Journal Story Map and will talk about each customization. If you missed part 1, “Adding Audio to a Section”, click here.

In this part we will talk about the basemap switch button.

Image for post
Image for post

Whenever there is a map in your mainstage, you will be able to click on the basemap switch button that is located below the zoom in/out navigator.

Image for post
Image for post

Where do we start?

You will need the following:

  • Have access to a web server to host your customized story.

To find out how to setup the customized version of your Story map, please follow the instructions under the “Getting Started” section in this post.

Download and install Font Awesome

To style the button, we will use Font Awesome. You can download the needed files here.

Once you have downloaded the files, unzip them and place the unzipped folder in the following location: YourStoryMapName/resources/lib

It should look like this:

Image for post
Image for post

Let’s Customize!

Once you have created your story map and hosted it on your server, open the index.html file again and go to the following line (59).

Between the style tags we will need to place the code which will style our basemap switch button. It should look like this:

Now we need to add the reference to the font awesome style. Go to line 14 that looks like this:

After those two lines we will add the reference to the font awesome style and it will look like this:

Next we will need to add the button to the mainstage container. This should be around line 144.

Once you have placed the code there, it should look like this:

Almost done!

In the last part we will be adding the Magic (javascript code)! Go to line 337, which looks like this:

We will replace the code that is in between the script tags with the following so it will look like this:

Depending on what topo basemap you are using in your story map, you need to uncomment the right “newbase” between line 38 and 42. Don’t forget to only have one “newbase” uncommented.

If you want to use a bing map as your aerial basemap, uncomment line 45 to 52 and delete line 53. You will also need to input your bing map key on line 50 and 83.

Do you have an example?

Sure I do! I have created a simple example so you can see how everything will look in a live story map. You can find this example here. To view the source code, which you can also use as a starting off point can be viewed here.

What else is there?

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new…

Tim Witt

Written by

Tim Witt

What can I say I like to code! Check out my webpage https://timw1984.github.io

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Tim Witt

Written by

Tim Witt

What can I say I like to code! Check out my webpage https://timw1984.github.io

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store