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.
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.
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.
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
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:
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:
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:
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.