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.


Event NameDataScenario
on-downloadmashupIdWhen mashup map download starts, this event will be raised.

Sample Code

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