This sample demonstrates how to use the time slider from the toolkit to visualize temporal data by applying a specific time extent. When viewing feature layers that contain a large amount of data with timestamps, you may want to filter the data to only show data relevant to a specific time range. This can help visualize changes in the data over time and aid in making better interpretations and predictions of future trends.

Use case
When viewing layers that contain a large amount of data with timestamps, you may want to filter the data to only show data relevant to a specific time range.
How to use the sample
Use the slider at the bottom of the map to customize the date range for which you want to view the data. Once the start and end date have been selected, the mapview will update to only show the relevant data that falls in the time extent selected. Use the play button to step through the data one day at a time. Use the previous and next buttons to manually step through the data in one day increments.
How it works
- Create a
MapViewwith aMap. - Create a
ServiceFeatureTablefrom a URL (the feature layer from the url in this sample includes time-enabled data). - Create a feature layer from the service feature table.
- Add the feature layer that includes time-enabled data to the map’s list of operational layers.
- Create a
TimeSliderfrom the ArcGIS Maps SDK for Qt Toolkit to allow users to show data only from the given date range. This sets up all necessary calls to visualize and step through the temporal data.
Relevant API
- FeatureLayer
- Map
- MapView
- ServiceFeatureTable
Additional information
This sample uses Atlantic hurricane data from the National Hurricane Center (NOAA / National Weather Service) and the TimeSlider toolkit component which requires the toolkit to be cloned and set up locally. For information about setting up the toolkit, see the repository’s root README.md here.
Tags
animate, data, filter, time, time extent, time frame, toolkit
Sample Code
// [WriteFile Name=ControlTimeExtentTimeSlider, Category=Features]// [Legal]// Copyright 2021 Esri.//// Licensed under the Apache License, Version 2.0 (the "License");// you may not use this file except in compliance with the License.// You may obtain a copy of the License at// http://www.apache.org/licenses/LICENSE-2.0//// Unless required by applicable law or agreed to in writing, software// distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.// See the License for the specific language governing permissions and// limitations under the License.// [Legal]
#ifdef PCH_BUILD#include "pch.hpp"#endif // PCH_BUILD
// sample headers#include "ControlTimeExtentTimeSlider.h"
// ArcGIS Maps SDK headers#include "FeatureLayer.h"#include "LayerListModel.h"#include "Map.h"#include "MapQuickView.h"#include "MapTypes.h"#include "ServiceFeatureTable.h"
using namespace Esri::ArcGISRuntime;
ControlTimeExtentTimeSlider::ControlTimeExtentTimeSlider(QObject* parent /* = nullptr */): QObject(parent), m_map(new Map(BasemapStyle::ArcGISTopographic, this)){ ServiceFeatureTable* featureTable = new ServiceFeatureTable(QUrl("https://services5.arcgis.com/N82JbI5EYtAkuUKU/ArcGIS/rest/services/Hurricane_time_enabled_layer_2005_1_day/FeatureServer/0"), this); FeatureLayer* featureLayer = new FeatureLayer(featureTable, this); m_map->operationalLayers()->append(featureLayer);}
ControlTimeExtentTimeSlider::~ControlTimeExtentTimeSlider() = default;
void ControlTimeExtentTimeSlider::init(){ // Register the map view for QML qmlRegisterType<MapQuickView>("Esri.Samples", 1, 0, "MapView"); qmlRegisterType<ControlTimeExtentTimeSlider>("Esri.Samples", 1, 0, "ControlTimeExtentTimeSliderSample");}
MapQuickView* ControlTimeExtentTimeSlider::mapView() const{ return m_mapView;}
// Set the view (created in QML)void ControlTimeExtentTimeSlider::setMapView(MapQuickView* mapView){ if (!mapView || mapView == m_mapView) return;
m_mapView = mapView; m_mapView->setMap(m_map);
emit mapViewChanged();}// [WriteFile Name=ControlTimeExtentTimeSlider, Category=Features]// [Legal]// Copyright 2021 Esri.//// Licensed under the Apache License, Version 2.0 (the "License");// you may not use this file except in compliance with the License.// You may obtain a copy of the License at// http://www.apache.org/licenses/LICENSE-2.0//// Unless required by applicable law or agreed to in writing, software// distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.// See the License for the specific language governing permissions and// limitations under the License.// [Legal]
#ifndef CONTROLTIMEEXTENTTIMESLIDER_H#define CONTROLTIMEEXTENTTIMESLIDER_H
// Qt headers#include <QObject>
namespace Esri::ArcGISRuntime{class Map;class MapQuickView;}
Q_MOC_INCLUDE("MapQuickView.h")
class ControlTimeExtentTimeSlider : public QObject{ Q_OBJECT
Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)
public: explicit ControlTimeExtentTimeSlider(QObject* parent = nullptr); ~ControlTimeExtentTimeSlider();
static void init();
signals: void mapViewChanged();
private: Esri::ArcGISRuntime::MapQuickView* mapView() const; void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
Esri::ArcGISRuntime::Map* m_map = nullptr; Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;};
#endif // CONTROLTIMEEXTENTTIMESLIDER_H// [WriteFile Name=ControlTimeExtentTimeSlider, Category=Features]// [Legal]// Copyright 2021 Esri.//// Licensed under the Apache License, Version 2.0 (the "License");// you may not use this file except in compliance with the License.// You may obtain a copy of the License at// http://www.apache.org/licenses/LICENSE-2.0//// Unless required by applicable law or agreed to in writing, software// distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.// See the License for the specific language governing permissions and// limitations under the License.// [Legal]
import QtQuickimport QtQuick.Controlsimport Esri.ArcGISRuntime.Toolkitimport Esri.Samples
Item {
// add a mapView component MapView { id: view anchors.fill: parent focus: true
// Add a TimeSlider from the toolkit to the MapView TimeSlider { anchors { left: parent.left right: parent.right bottom: parent.bottom }
geoView: view } }
// Declare the C++ instance which creates the map etc. and supply the view ControlTimeExtentTimeSliderSample { id: model mapView: view }}// [Legal]// Copyright 2021 Esri.//// Licensed under the Apache License, Version 2.0 (the "License");// you may not use this file except in compliance with the License.// You may obtain a copy of the License at// http://www.apache.org/licenses/LICENSE-2.0//// Unless required by applicable law or agreed to in writing, software// distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.// See the License for the specific language governing permissions and// limitations under the License.// [Legal]
// sample headers#include "ControlTimeExtentTimeSlider.h"
// ArcGIS Maps SDK headers#include "ArcGISRuntimeEnvironment.h"
// Qt headers#include <QCommandLineParser>#include <QDir>#include <QGuiApplication>#include <QQmlApplicationEngine>
// Other headers#include "Esri/ArcGISRuntime/Toolkit/register.h"
// Platform specific headers#ifdef Q_OS_WIN#include <Windows.h>#endif
int main(int argc, char *argv[]){ Esri::ArcGISRuntime::ArcGISRuntimeEnvironment::setUseLegacyAuthentication(false); QGuiApplication app(argc, argv); app.setApplicationName(QString("ControlTimeExtentTimeSlider"));
// Use of ArcGIS location services, such as basemap styles, geocoding, and routing services, // requires an access token. For more information see // https://links.esri.com/arcgis-runtime-security-auth.
// The following methods grant an access token:
// 1. User authentication: Grants a temporary access token associated with a user's ArcGIS account. // To generate a token, a user logs in to the app with an ArcGIS account that is part of an // organization in ArcGIS Online or ArcGIS Enterprise.
// 2. API key authentication: Get a long-lived access token that gives your application access to // ArcGIS location services. Go to the tutorial at https://links.esri.com/create-an-api-key. // Copy the API Key access token.
const QString accessToken = QString("");
if (accessToken.isEmpty()) { qWarning() << "Use of ArcGIS location services, such as the basemap styles service, requires" << "you to authenticate with an ArcGIS account or set the API Key property."; } else { Esri::ArcGISRuntime::ArcGISRuntimeEnvironment::setApiKey(accessToken); }
// Initialize the sample ControlTimeExtentTimeSlider::init();
// Initialize application view QQmlApplicationEngine engine; // Add the import Path engine.addImportPath(QDir(QCoreApplication::applicationDirPath()).filePath("qml"));
#ifdef ARCGIS_RUNTIME_IMPORT_PATH_2 engine.addImportPath(ARCGIS_RUNTIME_IMPORT_PATH_2);#endif
Esri::ArcGISRuntime::Toolkit::registerComponents(engine);
// Set the source engine.load(QUrl("qrc:/Samples/Features/ControlTimeExtentTimeSlider/main.qml"));
return app.exec();}// Copyright 2021 Esri.
// Licensed under the Apache License, Version 2.0 (the "License");// you may not use this file except in compliance with the License.// You may obtain a copy of the License at// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software// distributed under the License is distributed on an "AS IS" BASIS,// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.// See the License for the specific language governing permissions and// limitations under the License.
import QtQuick.Controlsimport Esri.Samples
ApplicationWindow { visible: true width: 800 height: 600
ControlTimeExtentTimeSlider { anchors.fill: parent }}