Before you start

Follow the instructions mentioned in this article to consume the VIDIZMO Map Widget: How to use VIDIZMO Widgets


Adding the Map Widget

Following the below-given steps will add the Map Widget to your website.


Get Started


Step 1: Add the following HTML tag into the body section of your Web App code to add the Map Widget.

<vdz-mashup-map class="map" data-widget="true"></vdz-mashup-map> 
Note: Make sure data-widget is set to 'true' as this applies the VIDIZMO default styling to the widget.



Step 2: Following are few sample events against this Map widget that can be added into the body section of your web application. More events can be found below in the table.

document.querySelector(".map").addEventListener('on-download', (evt) => {
    });

Events


Event NameEvent DataScenario
on-downloadnumberWhen mashup map download starts, this event will be raised.


Sample Code

<html>
    <head>
        <meta charset="UTF-8" />

        <!-- VIDIZMO Imports -->
        <script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js">
        </script>
        <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
        <script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js">
        </script>
    </head>
    <body>
        <vdz-mashup-map class="map" data-widget='true' mashup-id={mashup-id}></vdz-mashup-map>
        <script>
            document.querySelector("map").addEventListener("on-download", (event) => {
    });
        </script> 
    </body>
</html>