You don’t need to be a coding expert to add a bit of flair to your pop-ups with HTML. In this short tutorial, I’ll share step-by-step instructions and explanations suitable for learners who have never used HTML.
I don’t typically craft an entire pop-up with HTML. Instead, I insert small amounts of code to achieve finishing touches that aren’t possible to do otherwise. In the example below, I used HTML to add color highlighting to some text:
Follow the steps below to learn how to make this formatting change with HTML.
1. Open the HTML pop-ups web map.
This map shows the peaks (also known as “fells”) of the Lake District in England. You can learn how to make this map by following the tutorial series Cartographic creations with web maps.
If you want to save your work, you must sign in first. You can also complete the tutorial without saving your work.
2. Optionally, sign in and save a copy of the map. (On the Contents (dark) toolbar, click the Save and open button and click Save as.)
3. On the Contents toolbar, click the Layers button. In the Layers pane, select the Fells layer.
A blue bar appears next to the layer when it’s selected.
4. On the Settings (light) toolbar, click the Pop-ups button to open the Pop-ups pane.
The pop-up for this layer has already been formatted with a title, text, and an image.
You’ll use HTML to add color formatting to the pop-up. Color in pop-ups can help to break up large amounts of text and make it easier and more appealing to read.
5. In the Pop-ups pane, click Text, and click Edit text.
6. On the text editor toolbar, click the Source button.
The text reappears, formatted as HTML.
The first three lines of text look like this:
<p>
Click <a href=”{expression/expr0}”><strong>here</strong></a> to see a photo of {Name}.
</p>
- The <p> tag defines the start of a paragraph. The </p> tag defines the end of the paragraph.
- The <a href=”…”> and </a> tags apply a hyperlink to the text between them. In this case, the hyperlink is {expression/expr0}, which is an Arcade expression defined elsewhere in the web map.
- The <strong> and </strong> tags bold the text between them.
This code equates to a paragraph with the text Click here to see a photo of {Name}. The text here is both bolded and hyperlinked.
You won’t rewrite this HTML; you’ll just insert some extra formatting.
7. Find the second <p> tag, on the fourth line, just before <strong>Height: {Metres} meters</strong>.
This <p> tag indicates the start of a new paragraph. You’ll add inline CSS to change the background color of this paragraph to green.
8. Add a space after the p and type style=”background-color:#bad372;”.
The text you added is referred to as inline CSS. CSS stands for Cascading Style Sheets and is a language that is used to add styling to HTML. Typically, CSS is written in a separate file that the HTML file references, but it can also be added directly to the HTML code, as you are doing here. When it is added directly, it is called inline CSS.
By adding the style=”” attribute to the <p> tag, you are saying that you want to format the paragraph with some kind of style. Specifically, you want to change the background-color property to #bad372, which is the hex code for a pale yellow-green color.
9. On the text editor toolbar, click the Source button to return to the visual editor.
The second line of text is now highlighted in green.
(If the background color is missing, ensure that the code you added uses straight quotes instead of curly quotes.)
You’ll also change the background color of the prominence paragraph.
10. Click the Source button again.
11. Scroll down to find the <p> tag just before <strong>Prominence: {Drop_} meters</strong>.
12. Add a space after the p and type style=”background-color:#76b57d;”.
This is the same code that you added earlier, just with a different shade of green.
13. On the toolbar, click the Source button.
The fourth line of text is now highlighted as well.
14. Add a space before the words Height and Prominence to create a bit of a buffer with their backgrounds.
15. Click the Source button again.
A new bit of code has been inserted: . This is the code for a nonbreaking space.
You’re ready to commit your changes. However, the OK and Cancel buttons are not available.
You need to switch out of source view before you can click them.
16. Click the Source button. Click OK.
The color background formatting is now visible on the pop-up. The two colors match those used in the diagram, making it easier for people to relate the text to the image.
In this example, you used one CSS property: background-color. There are many other HTML and CSS properties that can be used to enhance pop-ups. You can find them all on the W3 Schools website, which is a great resource and reference for learning HTML and CSS.
There’s so much more you can do with HTML in pop-ups. See some great examples in the article Authoring pop-ups using HTML source editing.
Here is the final HTML code that you started with. The parts that you added are shown in bold:
<p>
Click <a href=”{expression/expr0}”><strong>here</strong></a> to see a photo of {Name}.
</p>
<p style=”background-color:#bad372;”>
<strong> Height: {Metres} meters</strong>
</p>
<p>
Height is the change in elevation between a mountain’s peak and sea-level.
</p>
<p style=”background-color:#76b57d;”>
<strong> Prominence: {Drop_} meters</strong>
</p>
<p>
Topographic prominence, or drop, is the change in elevation between a mountain’s peak and the lowest contour line that encircles it, but no other higher peaks.
</p>
Article Discussion: