Image for post
Image for post

Map Journal Customizations — Part 3: Street View Button

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, or if you missed part 2, “Basemap Switch Button”, click here.

In this part we will talk about the Google Street View button.

Image for post
Image for post

Whenever there is a map in your mainstage, you will be able to click on the Google Street View button that is located below the zoom in/out navigator. After you click the button click on a street on your map and a street view tab will pop-up. Make sure to allow pop-ups in your browser settings.

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.
  • Create a Story Map Journal.
  • Basic understanding of HTML/CSS/JavaScript.

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

Download street view cursor Images

When you click on the street view button, your cursor will change to a street view cursor, as seen below.

You can download the cursor images here. Once you have downloaded the files, unzip them and place them in your story map folder.

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 street view 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 images that our street view button will use. This should be around line 114.

It is important to place the images there, or else there will be an offset. It should look like this:

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

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 340, 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:

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?

Written by

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

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