Skip to content
Smarter Business SolutionsSmarterBusiness SolutionsSmarter Business Solutions – Home

Getting started with Smarter Image Map

Set up a responsive process landscape, floor plan or interactive diagram in SharePoint in a few steps.

Coming soon on Microsoft Marketplace

Smarter Image Map is being prepared for Microsoft review. Public installation and purchase are not available yet. This guide previews the workflow after approval; we will add direct Marketplace links after publication.

Before you begin

You need access to the SharePoint App Catalog and editing permissions on the site where you want to use the map. A modern PNG, JPG or SVG image with readable labels works best.

1

Install the app after publication

  1. After publication, a SharePoint administrator installs Smarter Image Map from Microsoft Marketplace in the tenant App Catalog.
  2. Deploy the app tenant-wide or add it to the target SharePoint site.
  3. Edit a modern SharePoint page and add the Smarter Image Map web part.
  4. Publish the page. The empty web part shows a short introduction and the Edit image map and Help and instructions actions.

Alternatively, use a SharePoint full-page app

  1. Open Site contents > Site Pages and create a new App page (Single Part App Page).
  2. Select Smarter Image Map, create the page and publish it.
  3. The image map now uses the complete page canvas; configure the map in the same way as the web part on a modern page.

Alternatively, use a Microsoft Teams channel tab

  1. Select Smarter Image Map in the tenant App Catalog and choose Add to Teams or Sync to Teams. The label depends on the App Catalog experience in your tenant.
  2. Wait until SharePoint confirms that synchronization succeeded.
  3. Open Microsoft Teams Desktop, go to the intended team and channel, and select + Add a tab at the top.
  4. Search for Smarter Image Map, add it as a channel tab, and configure the map in the tab.

Teams channel tab, not a personal app

The package supports a configurable tab in a team channel. It does not include a Teams personal app and therefore does not appear as a personal app in the left-hand Teams navigation.

The first map is ready for setup

You do not need to enter a technical name in the web part properties. Use Create new map only for additional or nested maps.

Microsoft explains the general installation process inAdd an app to a site.

2

Create your first map

  1. Open the published page. Until you configure an image, the start screen explains the next steps.
  2. Open Help and instructions if you want the in-product overview. Close the panel with Close help (X) or press Escape.
  3. Select the Edit image map pencil in the top-right corner of the web part. The SharePoint page does not have to be in page-editing mode.
  4. Enter a clear Map title.
  5. Select Select image and choose a file from the site, OneDrive or your organizational assets. You can also upload a file.
  6. Choose a shape, then select Add area.
Smarter Image Map editor in SharePoint with five highlighted process stages and the areas panel open
The editor separates map controls, area controls and detailed settings.

New map or new image?

For your first map, use Select image. After selection, the same action becomes Replace image and changes the current map’s image. Create new map creates a separate additional map. Before replacement, the web part confirms the map name and number of existing areas.

Open help at any time

Help and instructions explains the main actions inside the web part. The panel does not change map data and closes with Close help (X) or Escape.

3

Configure areas and targets

Draw an area directly on the image or create it with Add area. Areas opens the list and the selected area’s settings on the right. Done closes the panel but does not save the map.

Choose a shape

  • Rectangle: for process stages, map sections and clearly bounded elements.
  • Ellipse: for round symbols, people or equipment.
  • Polygon: for irregular buildings, regions or machine parts. Click at least three points, then select Finish polygon.

Set content and destination

  1. Enter a short, distinct name under Label.
  2. Add a Tooltip description that explains the area’s purpose and destination.
  3. Choose URL or Another map (drill-down) as the Target type.
  4. For URL targets, enter an HTTPS address. Enable Open in a new tab for external content or when people need to keep the current context.

Write useful tooltips

Name the destination first, then explain its value. For example: “Work preparation – open templates, roles and approval steps.” Avoid generic instructions such as “Click here.”

4

Save changes safely

  1. Close the Areas panel with Done if it is open.
  2. Select Save map in the editor.
  3. Wait for the Saved. message.
  4. Leave the editor using Close editor.

Map changes and page changes are saved separately

Done only closes the Areas panel. Publishing the SharePoint page does not save open map changes either. Always use Save map. When you close the editor or switch maps, Smarter Image Map warns about unsaved changes and offers Save, Discard or Cancel.

5

Build drill-down maps

  1. Select Create new map in the editor.
  2. Enter a unique technical name, such as maintenance-process, and a visible title.
  3. Choose an image, add areas and save the new map.
  4. Return to the overview map and select the area that should open the detail view.
  5. Choose Another map (drill-down) as the target type and select the new target map.
  6. Save and close the editor. The area now opens the detail map in the same web part.
Overview map drilling down into a detail map with breadcrumb navigation
Breadcrumbs lead from the detail map back to the overview.
6

Keyboard and accessibility

Smarter Image Map supports the WCAG 2.2 AA interaction patterns relevant to the web part. The accessibility of a finished map also depends on the source image, labels and linked content.

Navigate a map

  • Press Tab to move through clickable areas.
  • Press Enter to open links and drill-down maps; the Space key also opens drill-downs.
  • Press Escape to dismiss an open tooltip.
  • A visible focus indicator always identifies the active area.

Edit areas without dragging

  • Add area creates a shape without a drag gesture.
  • Arrow keys move the selected area by one percentage point.
  • Shift + an arrow key changes its width or height.
  • Advanced positioning lets you edit coordinates, size and polygon points numerically.

Content-owner accessibility check

Use an understandable image, distinct area names and descriptive tooltips. Test the completed map at 200% browser zoom and using only a keyboard.

7

Data storage and licensing

  • Maps and images live in SiteAssets/ImageMaps in the current SharePoint site.
  • The app requires no Microsoft Graph permissions.
  • The license check sends only the tenant URL, site-collection URL and product identifier smarterimagemap.
  • Images, map definitions and user data are never sent to the licensing service.
  • After Marketplace publication, a fully functional 14-day trial starts automatically when you first use the app.

Your content is preserved

Maps and images remain stored in SharePoint after the trial ends. Once you activate a license, you can continue without rebuilding anything.

Frequently asked questions

Is Smarter Image Map already available on Microsoft Marketplace?

Not yet. The app and licensing offer are being prepared for Microsoft review. Direct Marketplace links will appear on the product page after approval.

Where are images and map definitions stored?

Smarter Image Map stores them in the current SharePoint site’s SiteAssets/ImageMaps folder. The app creates this folder automatically on first use.

Can I replace the image of an existing map?

Yes. Select Replace image and confirm the prompt. Existing areas keep their percentage-based positions and sizes. Check their alignment on the new image afterwards.

Why can’t I edit a map?

You need permission to edit list items in the site and an active trial or full license. Once a license expires, the map stays visible, but navigation and editing are disabled.

What happens if the licensing service is temporarily unavailable?

The web part shows a warning and remains available. Images and map content are never sent during a license check.

Do the areas work on mobile devices?

Yes. Positions and sizes are stored as percentages and scale with the image.

Questions about this product?

Our support team is happy to help with any questions about Smarter Image Map.

Get in touchsupport@smarterbusiness.at