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 |
|
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:
- TC1.22a: Create and configure a Snap4City SVG Custom Widget for real-time interaction (https://www.snap4city.org/drupal/node/595)
- TC1.22b: Create and configure a Snap4City SVG Custom Widget for real-time interaction (https://www.snap4city.org/drupal/node/651)
- Custom Widgets: Table explanation, as SVG (https://www.snap4city.org/drupal/node/663)
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==