# 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

## Tags

analysis, coordinate, geometry, nearest, proximity, vertex

## Sample Code

``````import QtQuick 2.6
import QtQuick.Controls 2.4
import Esri.ArcGISRuntime 100.9

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 { wkid: 3857 }
}

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);
}

Map {
BasemapTopographic {}

ViewpointCenter {
Point {
x: -4487263.495911
y: 3699176.480377
SpatialReference {wkid: 3857}
}
targetScale: 50000000
}
}
}

MouseArea {
anchors.fill: parent
onClicked: {
const clickedPoint = mapView.screenToLocation(mouseX, mouseY);
// 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/1000.0).toFixed()} km
Coordinate distance: \${(nearestCoordinateResult.distance/1000.0).toFixed()} km` ;
}
}

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