Show grid | ArcGIS Maps SDK for Qt

View on GitHub

Sample viewer app

Display and customize coordinate system grids including Latitude/Longitude, MGRS, UTM and USNG on a map view or scene view.

Use case

Grids are often used on printed maps, but can also be helpful on digital 2D maps or 3D scenes, to identify locations.

How to use the sample

Tap on the Change Grid button in the toolbar to open a settings view. You can change the view from 2D or 3D, select the type of grid from Grid Type (LatLong, MGRS, UTM, and USNG) and modify its properties like label visibility, grid line color, grid label color, label formatting, and label offset.

How it works

Create an instance of one of the Grid types.
Grid lines and labels can be styled per grid level with setLineSymbol(gridLevel, lineSymbol) and setTextSymbol(gridLevel, textSymbol) methods on the grid.
The label position can be set with setLabelPosition(labelPosition) method on the grid.
- Note that as of 200.6, MGRS, UTM, and USNG grids in a SceneView only support the Geographic label position.
For the LatitudeLongitudeGrid type, you can specify a label format of DECIMAL_DEGREES or DEGREES_MINUTES_SECONDS.
For all screen-aligned label placement strategies, you can set the labels’ offset in device-independent pixels (DIPs) from the screen edge with setLabelOffset(offset).
To set the grid, use the setGrid(grid) method on the map view or scene view.

Relevant API

ArcGISGrid
LatitudeLongitudeGrid
MapView
MGRSGrid
SceneView
SimpleLineSymbol
TextSymbol
USNGGrid
UTMGrid

Sample Code

ShowGrid.cpp

ShowGrid.h

ShowGrid.qml

main.cpp

main.qml

// [WriteFile Name=ShowGrid, Category=DisplayInformation]
// [Legal]
// Copyright 2024 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

#include "ShowGrid.h"

#include "ArcGISTiledElevationSource.h"
#include "ElevationSourceListModel.h"
#include "LatitudeLongitudeGrid.h"
#include "Map.h"
#include "MapTypes.h"
#include "MapQuickView.h"
#include "MapViewTypes.h"
#include "MGRSGrid.h"
#include "Point.h"
#include "Scene.h"
#include "SceneQuickView.h"
#include "SimpleLineSymbol.h"
#include "SpatialReference.h"
#include "Surface.h"
#include "TextSymbol.h"
#include "USNGGrid.h"
#include "UTMGrid.h"
#include "Viewpoint.h"

#include <QFuture>

using namespace Esri::ArcGISRuntime;

ShowGrid::ShowGrid(QObject* parent /* = nullptr */):
  QObject(parent),
  m_map(new Map(BasemapStyle::ArcGISImagery, this)),
  m_scene(new Scene(BasemapStyle::ArcGISImagery, this))
{
  // create a new elevation source from Terrain3D REST service
  ArcGISTiledElevationSource* elevationSource = new ArcGISTiledElevationSource(
        QUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"), this);

  // add the elevation source to the scene to display elevation
  m_scene->baseSurface()->elevationSources()->append(elevationSource);

  // Set the sample's initial GeoView type to MapView
  m_currentViewType = s_mapView;

  // Set the initial viewpoint of the map
  constexpr double targetScale = 6450785;
  m_map->setInitialViewpoint(Viewpoint(Point(-10336141.70018318, 5418213.05332071, SpatialReference::webMercator()), targetScale));

  // Set the initial grid to LatitudeLongitudeGrid
  m_grid = new LatitudeLongitudeGrid(this);

  // Most values are populated from the UI, but we need to set some initial values
  m_currentLabelOffset = m_grid->labelOffset();
}

ShowGrid::~ShowGrid() = default;

void ShowGrid::init()
{
  // Register classes for QML
  qmlRegisterType<MapQuickView>("Esri.Samples", 1, 0, "MapView");
  qmlRegisterType<SceneQuickView>("Esri.Samples", 1, 0, "SceneView");
  qmlRegisterType<ShowGrid>("Esri.Samples", 1, 0, "ShowGridSample");
}

MapQuickView* ShowGrid::mapView() const
{
  return m_mapView;
}

// Set the view (created in QML)
void ShowGrid::setMapView(MapQuickView* mapView)
{
  if (!mapView || mapView == m_mapView)
    return;

  m_mapView = mapView;
  m_mapView->setMap(m_map);

  m_mapView->setGrid(m_grid);

  emit mapViewChanged();
}

SceneQuickView* ShowGrid::sceneView() const
{
  return m_sceneView;
}

// Set the view (created in QML)
void ShowGrid::setSceneView(SceneQuickView* sceneView)
{
  if (!sceneView || sceneView == m_sceneView)
    return;

  m_sceneView = sceneView;
  m_sceneView->setArcGISScene(m_scene);

  // Set the SceneView initially to be invisible
  m_sceneView->setVisible(false);

  emit sceneViewChanged();
}


void ShowGrid::setViewType(const QString& viewType)
{
  if (m_currentViewType == viewType)
    return;

  m_currentViewType = viewType;

  // MapView and SceneView share the same inherited class GeoView
  GeoView* newGeoView = viewType == s_mapView ? dynamic_cast<GeoView*>(m_mapView) : dynamic_cast<GeoView*>(m_sceneView);
  GeoView* oldGeoView = viewType != s_mapView ? dynamic_cast<GeoView*>(m_mapView) : dynamic_cast<GeoView*>(m_sceneView);

  // Set the viewpoint of the new view to the current viewpoint of the old view
  newGeoView->setViewpointAsync(oldGeoView->currentViewpoint(ViewpointType::BoundingGeometry), 0);

  // The Grid cannot be shared between a MapView and a SceneView so we need to unset it first
  oldGeoView->setGrid(nullptr);
  newGeoView->setGrid(m_grid);

  emit viewTypeChanged();
}

void ShowGrid::setGridType(const QString& gridType)
{
  if (m_currentGridType == gridType)
    return;

  m_currentGridType = gridType;

  if (m_grid)
  {
    delete m_grid;
    m_grid = nullptr;
  }

  // Create a new Grid of the selected type
  if (gridType == s_latLong)
    m_grid = new LatitudeLongitudeGrid(this);
  else if (gridType == s_mgrs)
    m_grid = new MGRSGrid(this);
  else if (gridType == s_utm)
    m_grid = new UTMGrid(this);
  else if (gridType == s_usng)
    m_grid = new USNGGrid(this);

  // Set the grid on the current view
  if (m_currentViewType == s_mapView)
    m_mapView->setGrid(m_grid);
  else
    m_sceneView->setGrid(m_grid);

  // Set properties from current UI values
  setGridVisible(m_gridVisible);
  setLabelsVisible(m_labelsVisible);
  setLineColor(m_currentLineColor);
  setLabelColor(m_currentLabelColor);
  setLabelPosition(m_currentLabelPosition);
  setLabelFormat(m_currentLabelFormat);
  setLabelOffset(m_currentLabelOffset);

  emit gridTypeChanged();
}

void ShowGrid::setGridVisible(bool visible)
{
  if (m_grid->isVisible() == visible)
    return;

  m_gridVisible = visible;
  m_grid->setVisible(visible);

  emit gridVisibleChanged();
}

void ShowGrid::setLabelsVisible(bool visible)
{
  if (m_grid->isLabelsVisible() == visible)
    return;

  m_labelsVisible = visible;
  m_grid->setLabelsVisible(visible);

  emit labelsVisibleChanged();
}

void ShowGrid::setLineColor(const QString& lineColor)
{
  m_currentLineColor = lineColor;

  SimpleLineSymbol* lineSymbol = static_cast<SimpleLineSymbol*>(m_grid->lineSymbol(0));
  lineSymbol->setColor(lineColor.toLower());

  // Some grids have multiple levels, in this sample we set the same symbol for all levels
  for (int level = 0; level < m_grid->levelCount(); ++level)
    m_grid->setLineSymbol(level, lineSymbol);

  emit lineColorChanged();
}

void ShowGrid::setLabelColor(const QString& labelColor)
{
  m_currentLabelColor = labelColor;

  TextSymbol* labelSymbol = static_cast<TextSymbol*>(m_grid->textSymbol(0));
  labelSymbol->setColor(labelColor.toLower());

  // Some grids have multiple levels, in this sample we set the same symbol for all levels
  for (int level = 0; level < m_grid->levelCount(); ++level)
    m_grid->setTextSymbol(level, labelSymbol);

  emit labelColorChanged();
}

void ShowGrid::setLabelPosition(const QString& labelPosition)
{
  m_currentLabelPosition = labelPosition;

  if (labelPosition == s_geographic)
    m_grid->setLabelPosition(GridLabelPosition::Geographic);
  else if (labelPosition == s_bottomLeft)
    m_grid->setLabelPosition(GridLabelPosition::BottomLeft);
  else if (labelPosition == s_bottomRight)
    m_grid->setLabelPosition(GridLabelPosition::BottomRight);
  else if (labelPosition == s_topLeft)
    m_grid->setLabelPosition(GridLabelPosition::TopLeft);
  else if (labelPosition == s_topRight)
    m_grid->setLabelPosition(GridLabelPosition::TopRight);
  else if (labelPosition == s_center)
    m_grid->setLabelPosition(GridLabelPosition::Center);
  else if (labelPosition == s_allSides)
    m_grid->setLabelPosition(GridLabelPosition::AllSides);

  emit labelPositionChanged();
}

void ShowGrid::setLabelFormat(const QString& labelFormat)
{
  m_currentLabelFormat = labelFormat;

  // Only LatitudeLongitudeGrid supports label formats
  if (m_grid->gridType() != GridType::LatitudeLongitudeGrid)
    return;

  if (labelFormat == s_decimalDegrees)
    static_cast<LatitudeLongitudeGrid*>(m_grid)->setLabelFormat(LatitudeLongitudeGridLabelFormat::DecimalDegrees);
  else if (labelFormat == s_degreesMinutesSeconds)
    static_cast<LatitudeLongitudeGrid*>(m_grid)->setLabelFormat(LatitudeLongitudeGridLabelFormat::DegreesMinutesSeconds);

  emit labelFormatChanged();
}

void ShowGrid::setLabelOffset(double offset)
{
  m_currentLabelOffset = offset;
  m_grid->setLabelOffset(offset);
  emit labelOffsetChanged();
}

// [WriteFile Name=ShowGrid, Category=DisplayInformation]
// [Legal]
// Copyright 2024 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 SHOWGRID_H
#define SHOWGRID_H

#include <QObject>

namespace Esri::ArcGISRuntime
{
class Grid;
class Map;
class MapQuickView;
class Scene;
class SceneQuickView;
class SimpleLineSymbol;
class TextSymbol;
}

Q_MOC_INCLUDE("MapQuickView.h");
Q_MOC_INCLUDE("SceneQuickView.h");

class ShowGrid : public QObject
{
  Q_OBJECT

  Q_PROPERTY(Esri::ArcGISRuntime::MapQuickView* mapView READ mapView WRITE setMapView NOTIFY mapViewChanged)
  Q_PROPERTY(Esri::ArcGISRuntime::SceneQuickView* sceneView READ sceneView WRITE setSceneView NOTIFY sceneViewChanged)
  Q_PROPERTY(QString currentViewType MEMBER m_currentViewType NOTIFY viewTypeChanged)
  Q_PROPERTY(QStringList viewTypes MEMBER m_viewTypes CONSTANT)
  Q_PROPERTY(QString currentGridType MEMBER m_currentGridType NOTIFY gridTypeChanged)
  Q_PROPERTY(QStringList gridTypes MEMBER m_gridTypes CONSTANT)
  Q_PROPERTY(bool gridVisible MEMBER m_gridVisible NOTIFY gridVisibleChanged)
  Q_PROPERTY(bool labelsVisible MEMBER m_labelsVisible NOTIFY labelsVisibleChanged)
  Q_PROPERTY(QString currentLineColor MEMBER m_currentLineColor NOTIFY lineColorChanged)
  Q_PROPERTY(QStringList lineColors MEMBER m_lineColors CONSTANT)
  Q_PROPERTY(QString currentLabelColor MEMBER m_currentLabelColor NOTIFY labelColorChanged)
  Q_PROPERTY(QStringList labelColors MEMBER m_labelColors CONSTANT)
  Q_PROPERTY(QString currentLabelPosition MEMBER m_currentLabelPosition NOTIFY labelPositionChanged)
  Q_PROPERTY(QStringList labelFormats MEMBER m_labelFormats CONSTANT)
  Q_PROPERTY(QString currentLabelFormat MEMBER m_currentLabelFormat NOTIFY labelFormatChanged)
  Q_PROPERTY(QStringList labelPositions MEMBER m_labelPositions CONSTANT)
  Q_PROPERTY(double currentLabelOffset MEMBER m_currentLabelOffset NOTIFY labelOffsetChanged)

public:
  explicit ShowGrid(QObject* parent = nullptr);
  ~ShowGrid() override;

  static void init();

  Q_INVOKABLE void setGridVisible(bool visible);
  Q_INVOKABLE void setLabelsVisible(bool visible);
  Q_INVOKABLE void setViewType(const QString& viewType);
  Q_INVOKABLE void setGridType(const QString& gridType);
  Q_INVOKABLE void setLineColor(const QString& lineColor);
  Q_INVOKABLE void setLabelColor(const QString& labelColor);
  Q_INVOKABLE void setLabelPosition(const QString& labelPosition);
  Q_INVOKABLE void setLabelFormat(const QString& labelFormat);
  Q_INVOKABLE void setLabelOffset(double offset);

signals:
  void mapViewChanged();
  void sceneViewChanged();
  void viewTypeChanged();
  void gridTypeChanged();
  void gridVisibleChanged();
  void labelsVisibleChanged();
  void lineColorChanged();
  void labelColorChanged();
  void labelPositionChanged();
  void labelFormatChanged();
  void labelOffsetChanged();

private:
  // Declare private methods
  Esri::ArcGISRuntime::MapQuickView* mapView() const;
  void setMapView(Esri::ArcGISRuntime::MapQuickView* mapView);
  Esri::ArcGISRuntime::SceneQuickView* sceneView() const;
  void setSceneView(Esri::ArcGISRuntime::SceneQuickView* sceneView);

  // Declare private members
  Esri::ArcGISRuntime::Grid* m_grid = nullptr;
  Esri::ArcGISRuntime::Map* m_map = nullptr;
  Esri::ArcGISRuntime::MapQuickView* m_mapView = nullptr;
  Esri::ArcGISRuntime::Scene* m_scene = nullptr;
  Esri::ArcGISRuntime::SceneQuickView* m_sceneView = nullptr;

  // Properties
  QString m_currentViewType;
  QString m_currentGridType;
  bool m_gridVisible = true;
  bool m_labelsVisible = true;
  QString m_currentLineColor;
  QString m_currentLabelColor;
  QString m_currentLabelPosition;
  QString m_currentLabelFormat;
  double m_currentLabelOffset = 0.0;

  // Constants
  const QString s_mapView = QStringLiteral("MapView");
  const QString s_sceneView = QStringLiteral("SceneView");
  const QStringList m_viewTypes = {s_mapView, s_sceneView};

  const QString s_latLong = QStringLiteral("LatLong");
  const QString s_mgrs = QStringLiteral("MGRS");
  const QString s_utm = QStringLiteral("UTM");
  const QString s_usng = QStringLiteral("USNG");
  const QStringList m_gridTypes = {s_latLong, s_mgrs, s_utm, s_usng};

  const QString s_white = QStringLiteral("White");
  const QString s_red = QStringLiteral("Red");
  const QString s_blue = QStringLiteral("Blue");
  const QString s_black = QStringLiteral("Black");
  const QStringList m_lineColors = {s_white, s_red, s_blue};
  const QStringList m_labelColors = {s_black, s_red, s_blue};

  const QString s_geographic = QStringLiteral("Geographic");
  const QString s_topLeft = QStringLiteral("Top Left");
  const QString s_topRight = QStringLiteral("Top Right");
  const QString s_bottomLeft = QStringLiteral("Bottom Left");
  const QString s_bottomRight = QStringLiteral("Bottom Right");
  const QString s_center = QStringLiteral("Center");
  const QString s_allSides = QStringLiteral("All sides");
  const QStringList m_labelPositions = {s_geographic, s_topLeft, s_topRight, s_bottomLeft, s_bottomRight, s_center, s_allSides};

  const QString s_decimalDegrees = QStringLiteral("Decimal Degrees");
  const QString s_degreesMinutesSeconds = QStringLiteral("Degrees Minutes Seconds");
  const QStringList m_labelFormats = {s_decimalDegrees, s_degreesMinutesSeconds};
};

#endif // SHOWGRID_H

// [WriteFile Name=ShowGrid, Category=DisplayInformation]
// [Legal]
// Copyright 2024 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 QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Esri.Samples

Item {
    id: root
    property real centerWindowY: (root.height / 2) - (styleWindow.height / 2)

    MapView {
        id: mapQuickView
        anchors.fill: parent
        visible: gridSample.currentViewType == "MapView"
        Component.onCompleted: {
            // Set and keep the focus on SceneView to enable keyboard navigation
            forceActiveFocus();
        }
    }

    SceneView {
        id: sceneQuickView
        anchors.fill: parent
        visible: gridSample.currentViewType == "SceneView"
    }

    // Declare the C++ instance which creates the map, scene etc. and supply the views
    ShowGridSample {
        id: gridSample
        mapView: mapQuickView
        sceneView: sceneQuickView

        onCurrentViewTypeChanged: {
            if (gridSample.currentViewType === "MapView")
                mapQuickView.forceActiveFocus();
            else
                sceneQuickView.forceActiveFocus();
        }
    }

    Row {
        id: viewButtonsRow
        anchors {
            top: parent.top
            horizontalCenter: parent.horizontalCenter
            topMargin: 5
        }

        spacing: 2

        Rectangle {
            id: mapViewButton
            property bool selected: gridSample.currentViewType === "MapView"

            width: 100
            height: 30

            color: selected ? "#959595" : "#D6D6D6"
            radius: 8
            border {
                color: selected ? "#7938b6" : "#585858"
                width: selected ? 2 : 1
            }

            Text {
                anchors.centerIn: parent
                text: "Map View"
                font.pixelSize: 14
                color: "#474747"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    gridSample.setViewType("MapView");
                    positionCombo.enabled = true;
                }
            }
        }

        Rectangle {
            id: sceneViewButton
            property bool selected: gridSample.currentViewType === "SceneView"

            width: 100
            height: 30

            color: selected ? "#959595" : "#D6D6D6"
            radius: 8
            border {
                color: selected ? "#7938b6" : "#585858"
                width: selected ? 2 : 1
            }

            Text {
                anchors.centerIn: parent
                text: "Scene View"
                font.pixelSize: 14
                color: "#474747"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    gridSample.setViewType("SceneView");
                    if (gridTypeComboBox.currentText !== "LatLong") {
                        positionCombo.currentIndex = 0;
                        positionCombo.enabled = false;
                    } else {
                        positionCombo.enabled = true;
                    }
                }
            }
        }
    }

    // Button to view the styling window
    Rectangle {
        id: styleButton
        property bool pressed: false
        anchors {
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
            bottomMargin: 23
        }

        width: 150
        height: 30
        color: pressed ? "#959595" : "#D6D6D6"
        radius: 8
        border {
            color: "#585858"
            width: 1
        }

        Text {
            anchors.centerIn: parent
            text: "Change grid style"
            font.pixelSize: 14
            color: "#474747"
        }

        MouseArea {
            anchors.fill: parent
            onPressed: styleButton.pressed = true
            onReleased: styleButton.pressed = false
            onClicked: {
                background.visible = true;
                showAnimation.restart()
            }
        }
    }

    // background fade rectangle
    Rectangle {
        id: background
        anchors.fill: parent
        color: "gray"
        opacity: 0.7
        visible: false
        border {
            width: 0.5
            color: "black"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: mouse => mouse.accepted = true;
        }
    }

    Rectangle {
        id: styleWindow
        anchors {
            horizontalCenter: parent.horizontalCenter
        }
        y: parent.height // initially display below the page
        height: childrenRect.height
        width: childrenRect.width

        color: "lightgray"
        radius: 4
        border {
            color: "black"
            width: 1
        }

        SequentialAnimation {
            id: showAnimation
            NumberAnimation { target: styleWindow; property: "y"; to: centerWindowY; duration: 200 }
        }

        SequentialAnimation {
            id: hideAnimation
            NumberAnimation { target: styleWindow; property: "y"; to: root.height; duration: 200 }
        }

        GridLayout {
            id: grid
            columns: 2

            Text {
                Layout.leftMargin: 10
                text: "Grid type"
            }

            ComboBox {
                id: gridTypeComboBox
                property int modelWidth: 0
                Layout.minimumWidth: modelWidth + leftPadding + rightPadding + (indicator ? indicator.width : 10)
                Layout.rightMargin: 10
                Layout.fillWidth: true
                model: gridSample.gridTypes
                onCurrentTextChanged: {
                    gridSample.setGridType(currentText)
                    if (currentText !== "LatLong" && gridSample.currentViewType === "SceneView") {
                        positionCombo.currentIndex = 0;
                        positionCombo.enabled = false;
                    } else {
                        positionCombo.enabled = true;
                    }
                }
                Component.onCompleted : {
                    for (let i = 0; i < model.length; ++i) {
                        metricsGridTypeComboBox.text = model[i];
                        modelWidth = Math.max(modelWidth, metricsGridTypeComboBox.width);
                    }
                }
                TextMetrics {
                    id: metricsGridTypeComboBox
                    font: gridTypeComboBox.font
                }
            }

            Text {
                Layout.leftMargin: 10
                text: "Grid visible"
            }

            Switch {
                id: gridVisibleSwitch
                Layout.rightMargin: 10
                checked: gridSample.gridVisible
                onCheckedChanged: gridSample.setGridVisible(checked);
            }

            Text {
                text: "Labels visible"
                Layout.leftMargin: 10
                enabled: gridVisibleSwitch.checked
                color: enabled ? "black" : "gray"
            }

            Switch {
                id: labelVisibleSwitch
                Layout.rightMargin: 10
                checked: gridSample.labelsVisible
                enabled: gridVisibleSwitch.checked
                onCheckedChanged: gridSample.setLabelsVisible(checked);
            }

            Text {
                Layout.leftMargin: 10
                text: "Grid color"
            }

            ComboBox {
                id: colorCombo
                property int modelWidth: 0
                Layout.minimumWidth: modelWidth + leftPadding + rightPadding + (indicator ? indicator.width : 10)
                Layout.rightMargin: 10
                Layout.fillWidth: true
                model: gridSample.lineColors
                onCurrentTextChanged: gridSample.setLineColor(currentText);
                Component.onCompleted : {
                    for (let i = 0; i < model.length; ++i) {
                        colorComboMetrics.text = model[i];
                        modelWidth = Math.max(modelWidth, colorComboMetrics.width);
                    }
                }
                TextMetrics {
                    id: colorComboMetrics
                    font: colorCombo.font
                }
            }

            Text {
                Layout.leftMargin: 10
                text: "Label color"
            }

            ComboBox {
                id: colorCombo2
                property int modelWidth: 0
                Layout.minimumWidth: modelWidth + leftPadding + rightPadding + (indicator ? indicator.width : 10)
                Layout.rightMargin: 10
                Layout.fillWidth: true
                model: gridSample.labelColors
                onCurrentTextChanged: gridSample.setLabelColor(currentText);
                Component.onCompleted : {
                    for (let i = 0; i < model.length; ++i) {
                        colorCombo2Metrics.text = model[i];
                        modelWidth = Math.max(modelWidth, colorCombo2Metrics.width);
                    }
                }
                TextMetrics {
                    id: colorCombo2Metrics
                    font: colorCombo2.font
                }
            }

            Text {
                Layout.leftMargin: 10
                text: "Label position"
                enabled: positionCombo.enabled
                color: enabled ? "black"  : "gray"
            }

            ComboBox {
                id: positionCombo
                property int modelWidth: 0
                Layout.minimumWidth: modelWidth + leftPadding + rightPadding + (indicator ? indicator.width : 10)
                Layout.rightMargin: 10
                Layout.fillWidth: true
                model: gridSample.labelPositions
                onCurrentTextChanged: gridSample.setLabelPosition(currentText);
                Component.onCompleted : {
                    for (let i = 0; i < model.length; ++i) {
                        positionComboMetrics.text = model[i];
                        modelWidth = Math.max(modelWidth, positionComboMetrics.width);
                    }
                }
                TextMetrics {
                    id: positionComboMetrics
                    font: positionCombo.font
                }
            }

            Text {
                Layout.leftMargin: 10
                text: "Label format"
                enabled: formatCombo.enabled
                color: enabled ? "black"  : "gray"
            }

            ComboBox {
                id: formatCombo
                property int modelWidth: 0
                Layout.minimumWidth: modelWidth + leftPadding + rightPadding + (indicator ? indicator.width : 10)
                Layout.rightMargin: 10
                Layout.fillWidth: true
                model: gridSample.labelFormats
                enabled: gridSample.currentGridType === "LatLong"
                onCurrentTextChanged: gridSample.setLabelFormat(currentText);
                Component.onCompleted : {
                    for (let i = 0; i < model.length; ++i) {
                        formatComboMetrics.text = model[i];
                        modelWidth = Math.max(modelWidth, formatComboMetrics.width);
                    }
                }
                TextMetrics {
                    id: formatComboMetrics
                    font: formatCombo.font
                }
            }

            Text {
                Layout.leftMargin: 10
                text: "Label offset"
                enabled: offsetSlider.enabled
                color: enabled ? "black"  : "gray"
            }

            Slider {
                id: offsetSlider
                Layout.minimumWidth: leftPadding + rightPadding
                Layout.rightMargin: 10
                Layout.fillWidth: true
                from: 0
                to: 150
                value: gridSample.currentLabelOffset
                enabled: (gridSample.currentLabelPosition !== "Geographic" && gridSample.currentLabelPosition !== "Center")
                onValueChanged: {
                    if (value !== gridSample.currentLabelOffset)
                        gridSample.setLabelOffset(value);
                }

                handle: Rectangle {
                    x: offsetSlider.leftPadding + offsetSlider.visualPosition * (offsetSlider.availableWidth - width)
                    y: offsetSlider.topPadding + offsetSlider.availableHeight / 2 - height / 2
                    implicitWidth: 26
                    implicitHeight: 26

                    color: offsetSlider.enabled ? "white" : "lightgrey"
                    border.color: "gray"
                    Text {
                        anchors.centerIn: parent
                        text: offsetSlider.value.toFixed(0)
                        font.pixelSize: 14
                        color: offsetSlider.enabled ? "black" : "gray"
                        onWidthChanged: {
                            parent.width = Math.max(width + 10, 26)
                        }
                    }
                }
            }

            // Button to hide the styling window
            Rectangle {
                id: hideButton
                property bool pressed: false
                Layout.alignment: Qt.AlignHCenter
                Layout.columnSpan: 2
                Layout.bottomMargin: 5

                width: 150
                height: 30
                color: pressed ? "#959595" : "#D6D6D6"
                radius: 8
                border {
                    color: "#585858"
                    width: 1
                }

                Text {
                    anchors.centerIn: parent
                    text: "Hide window"
                    font.pixelSize: 14
                    color: "#474747"
                }

                MouseArea {
                    anchors.fill: parent
                    onPressed: hideButton.pressed = true
                    onReleased: hideButton.pressed = false
                    onClicked: {
                        background.visible = false;
                        hideAnimation.restart();
                    }
                }
            }
        }
    }
}

// Copyright 2024 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.

#include "ShowGrid.h"

#include "ArcGISRuntimeEnvironment.h"

#include <QCommandLineParser>
#include <QDir>
#include <QGuiApplication>
#include <QQmlApplicationEngine>

#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("ShowGrid"));

  // 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
  ShowGrid::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

  // Set the source
  engine.load(QUrl("qrc:/Samples/DisplayInformation/ShowGrid/main.qml"));

  return app.exec();
}

// Copyright 2024 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.Controls
import Esri.Samples

ApplicationWindow {
    visible: true
    width: 800
    height: 600

    ShowGrid {
        anchors.fill: parent
    }
}

Use case

How to use the sample

How it works

Relevant API

Tags

Sample Code