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 documents 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 document. It also offers a configuration option for the image to display. This allows you to store image map configurations in documents 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 document'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 document 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 document. The map configuration is stored at the source document's localSettings property.

Enabling validation

Configure the ImageMapAreasValidator in the Studio server's Spring application context to enable validation of the image map document. 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 document type CMImageMap and its subtypes. The image is stored in the blob property data of the first document of link list property pictures of the image map document. The image map configuration is stored in the struct property localSettings.