Before you start

Adding the Map Widget

Following the below given steps will add the Map Widget in 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) => {


Event NameEvent DataScenario
on-downloadnumberWhen 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) => {