How to Use Interactive Map on Wearable App

#harmonyos #mapkit #smartwatchdevelopment #wearableapps

Read the original article：How to Use Interactive Map on Wearable App

Introduction

In this article, we’ll explore how to build interactive map experiences in HarmonyOS wearable apps using Map Kit — a powerful and flexible SDK designed to provide personalized map capabilities. From showing nearby stores to launching detailed product pages, interactive maps can transform how users engage with your wearable app.

Whether you’re creating a store locator, a fitness route tracker, or a navigation tool, Map Kit allows developers to deliver rich, location-based features directly on smartwatches. Let’s dive in! 😎

What Is Map Kit?

Map Kit provides robust and convenient mapping capabilities tailored for HarmonyOS. It empowers developers to effortlessly build customized, interactive maps by offering features such as:

Personalized map displays
Interactive gestures (zoom, rotate, move, tilt)
Real-time location services
POI-based search and route planning
Marker and overlay drawing
Map picking and static image export
Coordinate conversion tools

⚡You can review the official documentation of Map Kit for more detailed information.

Real-World Scenarios for Interactive Maps

Fitness and Outdoor Apps Display routes, track movement, or show current location.
Delivery or Task-Based Apps Guide users to checkpoints or task destinations on foot or by bike.
Retail & Store Locator Apps Show all branch locations on a map and let users explore the one nearest to them.
Tourism or Travel Guides Allow users to find points of interest and start directions from the map.
Emergency/Utility Apps Indicate the nearest service station, hospital, or assistance point.

Case Study: Brand Store Locator on Smartwatch

In our actual implementation, we developed a wearable app using Map Kit to showcase the locations of a brand’s physical stores:

🎯 Custom markers were placed on each store location with the brand’s name.

🎯 Each marker was clickable, allowing the user to open a store details page.

🎯 From there, users could browse the store’s products online directly on the watch.

🎯 A simple and smooth interaction design ensured the experience was comfortable on a small screen.

this.callback = async (err, mapController) => {
      if (!err) {
        this.selectedStores.forEach(async (mainStore)=>{
          mainStore.stores.forEach(async (store)=> {
            console.info(`selected stores_ = `, store.name);
            let markerOptions: mapCommon.MarkerOptions = {
              position: {
                latitude: store.latitude,
                longitude: store.longitude,
              },
              rotation: 0,
              visible: true,
              zIndex: 0,
              alpha: 1,
              anchorU: 0.5,
              anchorV: 1,
              clickable: true,
              draggable: true,
              flat: false,
              title: mainStore.id,
              snippet: store.id,
              annotations:  [{
                // Define the title content.
                content: store.name,
                color: store.color
              }],
            };

            this.marker = await mapController.addMarker(markerOptions);
          })
        })

        this.mapController = mapController;
        this.mapEventManager = this.mapController.getEventManager();
        let callback = (marker: map.Marker) => {
          console.info(`on-markerClick marker = ${marker.getTitle()} -- ${marker.getSnippet()}`);
          Router.navigateToCategorySelection(this.allStores[Number(marker.getTitle())].stores[Number(marker.getSnippet())]);
        };
        this.mapEventManager.on("markerClick", callback);

      }
    };


//    --------------------------

      MapComponent({
        mapOptions: this.mapOptions,
        mapCallback: this.callback
      }).width('100%').height('100%');

Conclusion

Map Kit brings powerful, flexible, and interactive maps to HarmonyOS wearable devices. Combined with gesture support, POI data, route planning, and WantAgent navigation, you can build apps that are not only smart but deeply engaging — all from the user’s wrist.