<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Geometry operator - proximity analysis | Sample | ArcGIS Maps SDK for JavaScript</title>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<arcgis-map basemap="topo-vector" zoom="10" center="-0.1402, 51.4889">
<calcite-segmented-control id="proximity-selector-control">
<calcite-segmented-control-item value="vertex" checked>
</calcite-segmented-control-item>
<calcite-segmented-control-item value="coordinate"
>Nearest coordinate</calcite-segmented-control-item
</calcite-segmented-control>
// Get a reference to the map component
const viewElement = document.querySelector("arcgis-map");
const proximitySelectorControl = document.getElementById("proximity-selector-control");
] = await $arcgis.import([
"@arcgis/core/geometry/Polygon.js",
"@arcgis/core/geometry/Polyline.js",
"@arcgis/core/geometry/Multipoint.js",
"@arcgis/core/Graphic.js",
"@arcgis/core/geometry/operators/proximityOperator.js",
"@arcgis/core/symbols/SimpleMarkerSymbol.js",
"@arcgis/core/symbols/SimpleFillSymbol.js",
"@arcgis/core/symbols/SimpleLineSymbol.js",
const fillSymbol = new SimpleFillSymbol({
// autocasts as new SimpleLineSymbol()
const redMarkerSymbol = new SimpleMarkerSymbol({
// autocasts as new SimpleLineSymbol()
const simpleLineSymbol = new SimpleLineSymbol({
// autocasts from LineSymbolMarker
const polygon = new Polygon({
[-12077.050469056441, 6744024.446579335],
[-5962.088206245302, 6742495.706013632],
[-1681.6146222774987, 6741884.209787351],
[3516.103301111987, 6741884.209787351],
[10548.309903344809, 6743718.698466195],
[16051.775939874846, 6741884.209787351],
[20026.501410702098, 6736992.239977102],
[25835.715560372686, 6733017.514506275],
[31644.929710043274, 6722927.826772637],
[30727.68537062162, 6713755.38337842],
[29504.692918059387, 6707946.169228749],
[29504.692918059387, 6703971.443757921],
[26447.21178665379, 6699690.970173954],
[26447.21178665379, 6696633.489042548],
[22778.234428967116, 6691130.023006018],
[20026.501410702098, 6687766.793761472],
[16969.02027929653, 6684403.564516926],
[15746.027826734295, 6680428.839046099],
[16051.775939874846, 6675842.61734899],
[16051.775939874846, 6672479.388104444],
[1681.6146222686511, 6668810.410746758],
[-7796.576885088638, 6668198.914520476],
[-13300.042921618675, 6666058.677728493],
[-20943.745750132628, 6666364.425841633],
[-24612.7231078193, 6666364.425841633],
[-30116.189144349337, 6669727.655086179],
[-31033.43348377102, 6671867.891878163],
[-36536.899520301056, 6674925.373009569],
[-41734.61744369054, 6674008.128670147],
[-49989.8164984856, 6677065.609801552],
[-52130.053290469485, 6679511.594706677],
[-55493.282535015634, 6685626.556969488],
[-58245.01555328065, 6690212.778666597],
[-60691.00045840509, 6699690.970173954],
[-56410.52687443729, 6706417.428663046],
[-56410.52687443729, 6716201.368283544],
[-57327.77121385897, 6723845.071112058],
[-48155.32781964223, 6731488.773940572],
[-51518.55706418838, 6733934.758845696],
[-57022.02310071842, 6737603.736203383],
[-56410.52687443729, 6740661.217334788],
[-52435.801403610036, 6744330.194692476],
[-49072.572159063915, 6746776.1795976],
[-42651.861783112196, 6747693.423937022],
[-34090.91461517659, 6749222.164502724],
[-27364.45612608432, 6748304.920163303],
[-23389.730655257066, 6744941.690918757],
[-18192.01273186761, 6744024.446579335],
[-14828.783487382301, 6743565.824409593],
[-12077.050469056441, 6744024.446579335],
spatialReference: { wkid: 102100 },
const multipoint = new Multipoint();
multipoint.spatialReference = { wkid: 102100 };
for (var p = 0; p < polygon.rings[0].length; p++) {
multipoint.addPoint(polygon.getPoint(0, p));
const polygonGraphic = new Graphic({
const multiPointGraphic = new Graphic({
// Listen for when the component is ready
await viewElement.viewOnReady();
viewElement.graphics.addMany([polygonGraphic, multiPointGraphic]);
// Listen for pointer-move events on the view
viewElement.view.on("pointer-move", (event) => {
const point = viewElement.view.toMap({ x: event.x, y: event.y });
if (proximitySelectorControl.selectedItem.value === "vertex") {
proximityResult = proximityOperator.getNearestVertex(polygon, point);
proximityResult = proximityOperator.getNearestCoordinate(polygon, point, {
testPolygonInterior: false,
viewElement.graphics.remove(lineGraphic);
const polyline = new Polyline({
[proximityResult.coordinate.x, proximityResult.coordinate.y],
spatialReference: { wkid: 102100 },
lineGraphic = new Graphic({
symbol: simpleLineSymbol,
viewElement.graphics.add(lineGraphic);