1. Home
  2. TC1.26: Use customised SVG pins in a map

TC1.26: Use customised SVG pins in a map

Test Case Title

 TC1.26: Use customised SVG pins in a map

Goal

Show customised SVG pins in the map representing a selected service

Prerequisites

  • To be logged in the Snap4city platform;

  • To know how to create dashboards;

  • To have a multi-data selector map widget instantiated in a dashboard in edit mode.

Expected successful result

A SVG custom image is used as a pin in a map to show a specific service selected.

Steps

See details below

 

In Snap4City it is possible to customize the images of the pins shown in a map.

This features is available for the Multi Data selector with map widget identified in the Dashboard Wizard tool by the following icon .

The pin to be shown has to be previously available on the platform, this means that the SVG custom widget has to  be previously loaded on the platform as custom widget template and it is necessary that only one variable is specified in the SVG data-siow structure. For more information about the SVG Custom Widget Template and the custom widgets available on the platform, please refer to the following articles:

To change the image of a pin in a map, click the More Option item in the selector menu list available on the top right corner.

In the “Alternative View Mode” column, select “Custom Pin” in the drop down list;

Wait for the completion of the list of variables in the "Variable name" field;

Select the variable from the drop down list to be represented on the custom pin on the map;

Click the Confirm button on the bottom right;

Now if is necessary to select again the More Option item in the selector widget menu list. The available custom widgets will be shown in the “Symbol choice” column;

Select the custom icon to be shown on the map and click the Confirm button on the bottom right;

Now the pins on the map will be shown according to the select custom pin.

https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MzAzOQ==

Other example: https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjk5MA==

 

  • Share