HP.com Design System HP.com Design System HP.com Design System

Map Component

The Map Component is a versatile module that allows users to zoom in and out from a worldview perspective down to countries and provinces. It features hotspots and popups that pinpoint the focus of interest.

Product recycling centers

Explore the map below to find a product recycling center near you.

Zoom

Use ctrl/cmd + scroll to zoom

Use two fingers to zoom

Usage

Our map component can scale from a world view down to the level of provinces. It is equipped with hotspots that work with our modals to provide an extra layer of detail to a specific map region.

Module specifications

Minimum of 1 hotspots
Scale level: world view, country, province
Background color configurable
Map selection color configurable
Map outline color and thickness are configurable
Modal configurable
Equipped with label on hover

Character counts (with spaces)

Modal character count: unlimited

Example layouts

Desktop view

Tablet Variation

Mobile Variation

Map Component simplified.

Suitable for a small amount of hotspots. Equipped with zooming, and nesting capabilities.

Tablet Variation

Mobile Variation

Alternative adaptations

The Map Component can be applied to other use cases, like a high-level product inspection.

Resources

For Zeplin access contact the UX Design Manager

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.