showItems(items, options)

Adjusts the map’s visible region to bring the specified overlays and annotations into view.

Declaration

showItems(
        items: (Overlay | Annotation)[],
        options?: MapShowItemsOptions,
    ): (Annotation | Overlay)[];

Parameters

items:
An array of annotations and overlays to make visible.
options:
Options that Mapshowitemsoptions defines that let you determine animation, and the framing of the map.

Mentioned in

MapKit JS 5

Return Value

Returns the items array that you pass.

Discussion

The method showItems(items, options) adjusts the map’s region to bring all of the specified items — annotations and overlays — into view. The system only adds items if they’re not already on the map.

The map’s adjusted region covers the smallest longitudinal span possible. For example, passing an array that consists of two annotations for the cities Tokyo and Los Angeles, and a polyline that represents the flight path between them, to showItems(items, options) updates the region to cover the Pacific Ocean.

The showItems(items, options) method factors in the size of the specified annotations when updating the map’s region so the entirety of the annotations are visible. Similarly, it ensures that the map shows an overlay with thick lines in its entirety. In some cases, it’s possible that the map can’t show all items at once, or the actual padding doesn’t match the requested padding. This happens if:

One or more items falls outside of the visible map region, even at the minimum zoom level.
The zoom level, which determines the amount of padding, snaps to a level that has a different amount of padding than you request.

This method throws an Error if the arguments to the method are invalid.

The following example demonstrates how to use showItems:

const park = new mapkit.MarkerAnnotation(new mapkit.Coordinate(37.749581, -119.524212), { title: "Yosemite" }),
    surf = new mapkit.MarkerAnnotation(new mapkit.Coordinate(37.49557, -122.496687), { title: "Mavericks" });
map.showItems([park, surf],
              { animate: true,
                padding: new mapkit.Padding(60, 25, 60, 25)
              });