← Methods 3

Assignment 9

Part 1: HTML & CSS

With an existing or new Carto map, modify your popups and/or legend with some HTML. For example, you might add a link to the data source in your legend or customize the popups.

When adding a link to a legend I'd suggest adding it like this:

  <p>
    <a href="http://example.com">Data via example site</a>
  </p>

Make sure you replace the URL with the URL of the site you want to link to, and the text between the tags will be the text of the link.

If you want to style the link, add style="" with your styles:

  <p>
    <a style="font-size: 12px; color: #3c3c3c;" href="http://example.com">Data via example site</a>
  </p>

In this example, the link will be 12 pixels tall and dark gray. You might also edit your popups to customize their look and feel--it's up to you.

Find more CSS styling options at the Mozilla Developer Network or HTML Dog. The most useful ones for now will be:

margin (to add space around the link)
color (to change the text color)
font-size (to change the text size)
font-weight (to change the font weight and make it bold if you want to)

I've also made a video that talks about editing HTML and CSS in legends and popups in Carto.

Part 2: Mapbox prep

Next week we'll be working with Mapbox to make our own basemaps. To prepare, create a free Mapbox account if you don't have one already. Also take a look at the Mapbox Guide to Map Design. You can skip the early section about how vector maps work and anything else that gets overly technical--we'll be working with Mapbox Studio in class next week, and you don't have to do anything with it for this assignment.

Submitting your work

Please submit the link, and code from Part 1. Please respond with any thoughts and questions you have as usual.