Maps
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 Name
Event Data
Scenario
on-download
number
When the 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>