# Nearest vertex

Find the closest vertex and coordinate of a geometry to a point.

## Use case

Determine the shortest distance between a location and the boundary of an area. For example, developers can snap imprecise user clicks to a geometry if the click is within a certain distance of the geometry.

## How to use the sample

Click anywhere on the map. A yellow cross will show at that location. A blue circle will show the polygon's nearest vertex to the point that was clicked. A red diamond will appear at the coordinate on the geometry that is nearest to the point that was clicked. If clicked inside the geometry, the red and yellow markers will overlap. The information box showing distance between the clicked point and the nearest vertex/coordinate will be updated with every new location clicked.

## How it works

1. Get a `Geometry` and a `Point` to check the nearest vertex against.
2. Call `GeometryEngine.nearestVertex(inputGeometry, point)`.
3. Use the returned `ProximityResult` to get the `Point` representing the polygon vertex, and to determine the distance between that vertex and the clicked point.
4. Call `GeometryEngine.nearestCoordinate(inputGeometry, point)`.
5. Use the returned `ProximityResult` to get the `Point` representing the coordinate on the polygon, and to determine the distance between that coordinate and the clicked point.

## Relevant API

• GeometryEngine
• ProximityResult

The value of `ProximityResult.distance()` is planar (Euclidean) distance. Planar distances are only accurate for geometries that have a defined projected coordinate system, which maintain the desired level of accuracy. The example polygon in this sample is defined in California State Plane Coordinate System - Zone 5 (WKID 2229), which maintains accuracy near Southern California. Accuracy declines outside the state plane zone.

## Tags

analysis, coordinate, geometry, nearest, proximity, vertex

## Sample Code

NearestVertex.qml
Use dark colors for code blocksCopy
``````// [WriteFile Name=NearestVertex, Category=Geometry]
// [Legal]
// Copyright 2020 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

// 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 Esri.ArcGISRuntime

Rectangle {
id: rootRectangle
clip: true
width: 800
height: 600

MapView {
id: mapView
anchors.fill: parent

GraphicsOverlay {
id: graphicsOverlay
}

Graphic {
id: polygonGraphic
SimpleFillSymbol {
style: Enums.SimpleFillSymbolStyleForwardDiagonal
color: "lime"
SimpleLineSymbol {
style: Enums.SimpleLineSymbolStyleSolid
color: "lime"
width: 2.0
}
}
}

PolygonBuilder {
id: polygonBuilder
spatialReference: statePlaneCaliforniaZone5SpatialReference
}

Graphic {
id:  clickedPointGraphic
SimpleMarkerSymbol {
style: Enums.SimpleMarkerSymbolStyleX
color: "yellow"
size: 15
}
}

Graphic {
id: nearestVertexGraphic
SimpleMarkerSymbol {
style: Enums.SimpleMarkerSymbolStyleCircle
color: "blue"
size: 15
}
}

Graphic {
id: nearestCoordinateGraphic
SimpleMarkerSymbol {
style: Enums.SimpleMarkerSymbolStyleDiamond
color: "red"
size: 10
}
}

Component.onCompleted: {
// create polygon in middle of Atlantic Ocean
polygonGraphic.geometry = polygonBuilder.geometry;

// append graphics to overlay
graphicsOverlay.graphics.append(polygonGraphic);
graphicsOverlay.graphics.append(clickedPointGraphic);
graphicsOverlay.graphics.append(nearestVertexGraphic);
graphicsOverlay.graphics.append(nearestCoordinateGraphic);

mapView.map.basemap.baseLayers.append(usStatesGeneralizedLayer);
mapView.setViewpointCenterAndScale(polygonGraphic.geometry.extent.center, 8e6);

// Set the focus on MapView to initially enable keyboard navigation
forceActiveFocus();
}

Map {
id: map
spatialReference: SpatialReference {
wkid: 2229
}
}

SpatialReference {
id: statePlaneCaliforniaZone5SpatialReference
wkid: 2229
}

FeatureLayer {
id: usStatesGeneralizedLayer
PortalItem {
itemId: "99fd67933e754a1181cc755146be21ca"
}
}

onMouseClicked: mouse => {
anchors.fill = parent;
const clickedPoint = mapView.screenToLocation(mouse.x, mouse.y);
// normalizing the geometry before performing geometric operations
const normalizedPoint = GeometryEngine.normalizeCentralMeridian(clickedPoint);
clickedPointGraphic.geometry = normalizedPoint;

const nearestVertexPoint = GeometryEngine.nearestVertex(polygonBuilder.geometry, normalizedPoint);
nearestVertexGraphic.geometry = nearestVertexPoint.coordinate;

const nearestCoordinateResult = GeometryEngine.nearestCoordinate(polygonBuilder.geometry, normalizedPoint);
nearestCoordinateGraphic.geometry = nearestCoordinateResult.coordinate;

distancesLabel.text = `Vertex distance: \${(nearestVertexPoint.distance/5280.0).toFixed()} mi
Coordinate distance: \${(nearestCoordinateResult.distance/5280.0).toFixed()} mi` ;

}
}

// create box to display label with distances to nearest vertex and coordinate
Rectangle
{
id: labelRectangle
width: childrenRect.width
height: childrenRect.height
anchors {
top: parent.top
left: parent.left
}
visible: true
color: "white"
border.color: "black"
border.width: 2
Label {
id: distancesLabel
font.pointSize: 14