The image map editor comes as a panel component embedding an image view. The editor allows users to create hot zones (image map areas) and to attach content items to hot zones via drag and drop. The image map editor uses a configurable struct property name to store the image map configurations to a struct property of an image map content item. It also offers a configuration option for the image to display. This allows you to store image map configurations in content item that do not have an image blob property themselves.

To enable image map editing in your project, include an image map editor component in your content item's TypeScript form (Blueprint shows this in its CMImageMapForm.ts definition).

Config(ImageMapEditor, {
        imageBlobValueExpression: config.bindTo.extendBy("properties.pictures.0.properties.data"),
        structPropertyName: "localSettings",
        })

In the example above, the source content item has a link list property name pictures of cardinality 1. So the image editor component is bound to the image stored at the data property of the linked image content item. The map configuration is stored at the source content item's localSettings property.

Enabling validation

Configure the ImageMapAreasValidator in the Studio server's Spring application context to enable validation of the image map content item. The validator generates an error issue if there is no image blob or if at least one of the defined image map areas does not have a valid link target. See also Section 9.21.1, “Validators” for validation in general.

  @Bean
  @ConditionalOnProperty(name = "validator.enabled.image-map-areas-validator.cm-image-map", matchIfMissing = true)
  ImageMapAreasValidator cmImageMapAreasValidator(CapConnection connection) {
    return new ImageMapAreasValidator(type(connection, "CMImageMap"), true, "localSettings", "pictures.data");
  }

In the example above, the validator is configured for the content type CMImageMap and its subtypes. The image is stored in the blob property data of the first content item of link list property pictures of the image map content item. The image map configuration is stored in the struct property localSettings.