Article

Adding a Map

Show geographic information with a map.

Overview

By including visual, geographic information in your article, you can help your users contextualize information.

You can include maps in an article by using map components or place components.

On this page, you’ll learn how to:

  • Create a map component.

  • Adjust the visible area covered by the map.

  • Add a captioned pin.

Add a Map in Your Article

In Positioning Text Components, you created some ComponentLayout objects. You’ll refer to those ComponentLayout objects in this code.

  1. Copy the example code Map: Copy This Code.

  2. Paste the code inside the components array of your article, after the closing brace and comma (},) that end the body component whose text begins with Consequatur aut doloribus.

Your code should look like the example code Map: Result.

After you make this change in your code, you can preview your working article.json file in News Preview to see the map in your article.

Map: Copy This Code

    {
      "role": "heading2",
      "layout": "fullMarginAboveHalfBelowLayout",
      "text": "MAP HEADING"
    },
    {
      "role": "map",
      "layout": "noMarginLayout",
      "mapType": "hybrid",
      "latitude": 35.065908,
      "longitude": -109.781623
    },

Map: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "components": [
    ...
    {
      "role": "heading2",
      "layout": "fullMarginAboveHalfBelowLayout",
      "text": "MAP HEADING"
    },
    {
      "role": "map",
      "layout": "noMarginLayout",
      "mapType": "hybrid",
      "latitude": 35.065908,
      "longitude": -109.781623
    },
    ...
  ],
  ...
}

Adjust Your Map to Show More Area

The map that you just added in Add a Map in Your Article shows a small geographical area. In these steps, you’ll change the map span so that the map displays more area.

  1. Copy the example code Map Span: Copy This Code.

  2. Paste the code inside the components array of your article, at the end of this line: "longitude": -109.781623

Your code should look like the example code Map Span: Result.

After you make this change in your code, you can preview your working article.json file in News Preview to see that the map displays a larger area.

Map Span: Copy This Code

,
      "span": {
        "latitudeDelta": 5,
        "longitudeDelta": 5
      }

Map Span: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "components": [
    ...
    {
      "role": "map",
      "layout": "noMarginLayout",
      "mapType": "hybrid",
      "latitude": 35.065908,
      "longitude": -109.781623,
      "span": {
        "latitudeDelta": 5,
        "longitudeDelta": 5
      }
    },
    ...
  ],
  ...
}

Add a Pin

You can mark a specific set of coordinates using a pin like the one shown here.

  1. Copy the example code Map Items: Copy This Code.

  2. Paste the code inside the components array of your article, after the closing brace (}) of the "span" property that you added in Adjust Your Map to Show More Area.

Your code should look like the example code Map Items: Result.

After you make this change in your code, you can preview your working article.json file in News Preview to see a pin at the specified coordinates.

Map Items: Copy This Code

,
      "items": [
        {
          "latitude": 35.065908,
          "longitude": -109.781623
        }
      ]

Map Items: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "components": [
    ...
    {
      "role": "map",
      "layout": "noMarginLayout",
      "mapType": "hybrid",
      "latitude": 35.065908,
      "longitude": -109.781623,
      "span": {
        "latitudeDelta": 5,
        "longitudeDelta": 5
      },
      "items": [
        {
          "latitude": 35.065908,
          "longitude": -109.781623
        }
      ]
    },
    ...
  ],
  ...
}

Add a Pin Caption

In Add a Pin, you marked a specific location on your map. Now you can also add a caption to the pin as shown in the previous figure. When the user taps the pin in the full-screen version of the map, the caption is displayed. It’s a good idea to caption your map pins for accessibility reasons.

  1. Copy the line "caption": "A caption for this map pin",

  2. Paste the line into the first item in the items array of your map component, after the opening bracket and brace ([{) as shown in the example code Pin Caption: Result.

After you make this change in your code, you can preview your working article.json file in News Preview. Tap the map and then tap the pin to see the caption in the full-screen view.

Pin Caption: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "components": [
    ...
    {
      "role": "map",
      "layout": "noMarginLayout",
      "mapType": "hybrid",
      "caption": "Map caption",
      "latitude": 35.065908,
      "longitude": -109.781623,
      "span": {
        "latitudeDelta": 5,
        "longitudeDelta": 5
      },
      "items": [
        {
          "caption": "A caption for this map pin",
          "latitude": 35.065908,
          "longitude": -109.781623
        }
      ]
    },
    ...
  ],
  ...
}

Further Exploration

At any time, you can try changing property values in your article.json file and then use News Preview to see how these changes affect the look of your article.

For example, try using a standard map instead of the hybrid map that includes satellite images:

  1. In your article.json file, find the map component.

  2. Replace the value of the component’s mapType property ("hybrid") with "standard".

  3. Preview your article.json file in News Preview.

The map now shows the standard map instead of the hybrid map.

Previous

Next

See Also

Introductory Design Tutorial

Setting Up the Introductory Tutorial

Download the tutorial files, and learn about what you’ll create in the introductory tutorial.

Creating Your First Article

Create an article with text components and component text styles.

Positioning Text Components

Adjust the positions of the text components in your article—for example, place the article body off-center.

Adding a Divider

Create a horizontal, styled divider that extends to the right edge of the display.

Adding an Image and Captions

Create a photo that extends to both edges of the display, with captions that appear in the article layout and in full-screen view.

Adding a Pull Quote

Break an existing body component into two components, and then insert a pull quote between them.

Adding a Gallery of Images

Display three images as a sequential gallery.

Adding a Mosaic of Images

Display five images as mosaic tiles.

Adding a Tweet

Include a tweet in an article.