Images
With Icon Map Pro, you can place images on the map. Images can be sized and rotated based on fields in your data.
Data setup
In order to display an image on the screen the following fields must be provided:
- ID - a unique identifier for this item
- Longitude
- Latitude
- WKT / WKT / GeoJSON - this field should contain the URL of an image.
Sample data
| ID | Longitude | Latitude | Destination Longitude | Destination Latitude | Circle Size | Cluster Group | H3 Weight | Heatmap Weight | Image / WKT / GeoJSON | Feature Reference | Feature Weight |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Image1 | -2.576 | 51.481 | null | null | null | null | null | null | https://www.publicsite.com/imageurl1.png | null | null |
| Image2 | -2.576 | 51.481 | null | null | null | null | null | null | https://www.publicsite.com/imageurl2.png | null | null |
When WebGL Rendering is enabled, it is possible to include images in clusters. In this case, it is possible to additionally specify a cluster group.
| ID | Longitude | Latitude | Destination Longitude | Destination Latitude | Circle Size | Cluster Group | H3 Weight | Heatmap Weight | Image / WKT / GeoJSON | Feature Reference | Feature Weight |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Image1 | -2.576 | 51.481 | null | null | null | Cluster 1 | null | null | https://www.publicsite.com/imageurl1.png | null | null |
| Image2 | -2.576 | 51.481 | null | null | null | Cluster 2 | null | null | https://www.publicsite.com/imageurl2.png | null | null |
Remotely hosted images
Images hosted on public facing websites can be displauyed within your report. All images need to have an https URL. eg:
https://www.publicwebsite.com/imageurl.png
png, jpg and svg images are supported.
Locally hosted images
Should you not wish to host your images externally, they can be stored either in your dataset, or as a Power BI measure and referenced via a data URL:
PNG images can be 64bit encoded and represented as a measure such as:
Small Icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPcSURBVDhPZVRbbBtFFJ3ZXXu9trN+xK84jlM1MakTtwSTghScNH0k/WirFgmFRuIHiQgkUMUPPyAhgfitEAWJxwdV/0IlhJAIqBFqm5TSysUoiZK2DsQtduL3I068dtb74q6dpFScHe1Kc+fce+bumcEvTbzr6emXJQntgiSJVL48+zD/3rDT185KskxggiBwMyrLCjwkSf4Z+YPqDg77B8ckUWzGCIy368Livdhxj/z6eZ+N1SkIbfMCV+UR0BVk0NM6WkNRlF5voGRZkiURRpMsIxR+kLhf4r6c6LYaNYIoIIQvf3/nr7WyjaXzm3x3u+mtiRDHcankOgUEBZI3ANqS2fIvseLlk+0HvGZRUuWtxNKZYvXrD8/RWk29Lnzw2bUfp2/EHoZ/vvarSt4D7CfyT2HCawh49J9fuSmIQMa3HuQvvjNiYGhYQDH0a6cODUxeOd9XsdnbnpAxxjW+frdQnTzinF9Y/YQ36gL7BQVJxaUqV9tZhFClWjc6dTRNK7L8VGWMMK0hFlbzi/Fc7+kTjJ6BlOkh6qvp2890tTE6bY0XvvkhctSyiTHI/A9ZURRo41mv9dKdKLZrgjo1N8w7TezUlhJ+/yeTXlviJbGUD7VwhUxeqJXJZ0fHbZ4uRVHXwb+wW4wdZia3/Bi5LZSJVTCuPk5sRVPlYDDpcFVcro0y1yOVTh4fZE2Wp2RD10GPv8tN1f3fXp1F+2zqbDxv6fNrtBoQAmbJejvoTcGzrzueSBANlgpoWBOSJC0/Ss+8OZC8EILxxYnOUqkC8wgTam6Os7dQSLWZskOGmCiKPFhJEOKJVMgsHQsF2lxWGK+cGjhYzmRSuVxpI5vKOlPrz/c6gKIgRZXdqCbPXb+7mi7TGnIlU7n0sg8c3kiL2BYmYCaHUVKHKKTFlTZeETmEDBBSyeD69Hrq+qOittML4pBR+Hgmdm70UIe7FaJz4RV/p/WN8UFoKsZEqVT8bmqKPWyBkmT/2KsWV+fszfCa3syC1wmsp7WFbSE1H12Krs3cjl6di709/gJr1IH/AEajkWHopeUloS482XPjo74aPVfWddaP/qZSSsvFC8dcdhb2pcYQgtb09h20Wdj7y4sEJKM0muBzB1A2V+HrVVEsVSo+xGvNrcigmxzzuR3mvZOzhyMjR00GummS/XoDQ2wUpGzOVq+2blccbsfsFvHpYetQwA5na4exC6jHMHo4rRRBkARJQh9HRkNDogTyJVmZno+fJaQzL3aQFIXl/9VVbxuKghFb+F3ga3ANNWyguoCvi5HFtf4e9rcbq7tld+6gRkMAGM555F74X30ewZd5ZPhqAAAAAElFTkSuQmCC"
There are many websites available that can encode your images for you.
SVG images can be represented as follows. Note spaces and special characters have been URL encoded:
star = "data:image/svg+xml;utf-8,%3Csvg%20width%3D'263'%20height%3D'224'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20xml%3Aspace%3D'preserve'%20overflow%3D'hidden'%3E%3Cg%20transform%3D'translate(-627%20-404)'%3E%3Cpath%20d%3D'M635.5%20491.713%20729.464%20491.713%20758.5%20411.5%20787.536%20491.713%20881.5%20491.713%20805.481%20541.287%20834.518%20621.5%20758.5%20571.925%20682.482%20621.5%20711.519%20541.287Z'%20stroke%3D'%2344676A'%20stroke-width%3D'4.58333'%20stroke-miterlimit%3D'8'%20fill%3D'%23A7F5FB'%20fill-rule%3D'evenodd'/%3E%3C/g%3E%3C/svg%3E"
Dynamic SVG images with DAX
One of the benefits of using SVG images, is that they can be dynamically constructed with DAX. For example the color of the star in this example is set using a variable in DAX:
Star =
VAR StarColor = "FF0000"
RETURN
"data:image/svg+xml;utf-8,%3Csvg%20width%3D'263'%20height%3D'224'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20xmlns%3Axlink%3D'http%3A//www.w3.org/1999/xlink'%20xml%3Aspace%3D'preserve'%20overflow%3D'hidden'%3E%3Cg%20transform%3D'translate(-627%20-404)'%3E%3Cpath%20d%3D'M635.5%20491.713%20729.464%20491.713%20758.5%20411.5%20787.536%20491.713%20881.5%20491.713%20805.481%20541.287%20834.518%20621.5%20758.5%20571.925%20682.482%20621.5%20711.519%20541.287Z'%20stroke%3D'%2344676A'%20stroke-width%3D'4.58333'%20stroke-miterlimit%3D'8'%20fill%3D'%23" & StarColor & "'%20fill-rule%3D'evenodd'/%3E%3C/g%3E%3C/svg%3E"
Images configuration
In order for images to render, the "Images" toggle must be enabled the "Data Layers" section of the Power BI formatting settings for Icon Map Pro. This section describes the configuration options for images:
Use WebGL Rendering
WebGL rendering displays large numbers of images with better performance.
Image Rotation
This should represent a number between 0 and 359 and represents the number of degrees to rotate the image. This can be hardcoded, or set using conditional formatting from a DAX measure or field value. This is particularly useful when your image represents a vehicle and you need it to point in the direction of travel.
Image Width and Height
These settings allow you to set the size of the image and represent the width and height in pixels.
Transparency
Represents the percentage transparency of the image and should be a numeric value between 0 and 100.
Cluster Images (Only available with WebGL Rendering)
Enables the same clustering options as available with Web GL circle layers. When images and circles both have clustering enabled, the same clusters are used. See the documentation for circles for information on how to configure the clusters.
Include in Auto Zoom
Add this image to the auto zoom of the map, whem your data updates. Can be set to yes or no using conditional formatting to apply to specific images.
Include Tooltip
Enable tooltips on this image. Can be set to yes or no using conditional formatting to apply to specific images.
Selectable
Whether the image can be selected for cross-highlighting or drilldown. Can be set to yes or no using conditional formatting to apply to specific images.
EPSG (Coordinate Reference System)
Allows you to specify a specific reference system for your coordinates. The default used is EPSG:4326 / WGS84 and expects longitude and latitude coordinates. You can use other coordinate systems by specifying the relevant EPSG number. For example, to use British National Grid coordinates, enter 27700. Other EPSG codes can be found here.
Minimum & Maximum Zoom
The zoom levels between which this layer should be displayed.