---
title: "VertiGIS Studio"
slug: "vertigis-studio"
updated: 2025-04-07T02:15:30Z
published: 2025-04-07T03:46:48Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metromap.com.au/llms.txt
> Use this file to discover all available pages before exploring further.

# VertiGIS Studio Web - TimeSlider Integration

### **Time Slider Integration**

It is easy to configure the Time slider widget and access MetroMap Image Dedicated Time enabled service in VertiGIS Studio Web.

> [!WARNING]
> You need to download the TimeSlider JavaScript Library file from below path before configuring the widget in VertiGIS Studio
> 
> 
> 
> [https://vertigis-web-incubator.netlify.app/timeslider](https://vertigis-web-incubator.netlify.app/timeslider)
> 
> 
> 
> ![DownloadJSFile](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/DownloadJSFile.png)

**Widget Configuration Steps**

Follow these steps to configure Time Slider Widget in the VertiGIS Studio Web.

1. Click on File in the saved app and select Upload Library.

![FileUpload](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/FileUpload.png)

1. Click on select file and select the downloaded **timeslider.js**javaScript file.

![SelectFile](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/SelectFile.png)

![Timeslider(1)](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/Timeslider(1).png)
2. Click on Upload Library and file gets added in the libraries list and click on Save Changes.

![ClickUploadIibrary](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/ClickUploadIibrary.png)

![Added](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/Added.png)
3. Click on **Add component** and click on **Other**tab in the Add New Component.

![AddComonentOther(4)](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/AddComonentOther(4).png)

1. Drag the **TimeSlider** into components.

![DragandPlace](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/DragandPlace.png)

1. TimeSlider widget added in the Map.

![TimeSliderAdded](https://cdn.document360.io/64eb4fa4-1b3d-47a1-871b-be0277fc940e/Images/Documentation/TimeSliderAdded.png)