Map Journal Customizations — Part 2: Basemap Switch 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.
In this part we will talk about the basemap switch button.
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.
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:
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.
