TABLE OF CONTENTS


Before you start


Adding the Map widget

Follow the steps given below to add the Map widget in your website.


Get Started


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


<vdz-mashup-map class="map" data-widget="true"></vdz-mashup-map>


Note: Make sure to data-widget is set to 'true' as this applies the VIDZMO default styling to the widget.


Step 2: Add the following JS into the body section of your web application to consume and bind the available events for the Map widget.


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

Other available events for the Map widget can be found below.


Events


Event NameDataScenario
on-downloadmashupIdWhen 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>