I am referring an example provided in, https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons for drawing a polygon and move the map to that location. The example is working fine. But when I use my custom details such as the rings values and WKID, the polygon is drawing in the location but the map appears completely zoom out such that all the continents are appearing (Please check the image attached). It is required to zoom to the location by click on the '+' widget. Please find the code below. enter image description here
I have commented the example wkid and ring values.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#mapDiv,
.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/Polygon",
"esri/Graphic",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/support/webMercatorUtils",
"dojo/domReady!"
], function(
Map,
MapView,
FeatureLayer,
Polygon,
Graphic,
SimpleFillSymbol,
webMercatorUtils
) {
var map = new Map({
basemap: "streets-navigation-vector"
});
// 102704 - Custom WKID
// 4326 - Example WKID
var poly = new Polygon({
spatialReference: {
wkid: 102704
},
rings: [
// [
// [-118.38516, 34.0127],
// [-118.38827, 34.01489],
// [-118.38813, 34.01602],
// [-118.38797, 34.01648],
// [-118.3876, 34.01712],
// [-118.38733, 34.01696],
// [-118.38696, 34.01749],
// [-118.38662, 34.01789],
// [-118.38689, 34.01805],
// [-118.38683, 34.01812],
// [-118.38295, 34.01592],
// [-118.38516, 34.0127]
// ],
// [
// [-118.38661, 34.01486],
// [-118.38634, 34.01498],
// [-118.38652, 34.01563],
// [-118.3867, 34.01559],
// [-118.38679, 34.01595],
// [-118.38699, 34.01591],
// [-118.38707, 34.01507],
// [-118.38661, 34.01486]
// ]
[
[
2744913.4668447226,
541568.06113781035
],
[
2744917.4038447142,
541499.65215389431
],
[
2744864.2454864681,
541496.82210706174
],
[
2744813.6648789644,
541494.12952713668
],
[
2744810.2104895562,
541563.64283956587
],
[
2744860.4905727208,
541565.79441006482
],
[
2744913.4668447226,
541568.06113781035
]
]
]
});
var view = new MapView({
container: "mapDiv",
map: map,
// zoom: 18,
// minZoom: 13,
basemap: "satellite",
// extent: webMercatorUtils.geographicToWebMercator(poly.extent.expand(3))
});
var symbol = new SimpleFillSymbol({
style: "solid",
color: [4, 121, 193, 0.5],
outline: {
width: 2,
color: [2, 94, 149, 1]
}
});
var graphic = new Graphic({
geometry: poly,
symbol: symbol
});
view.on("mouse-wheel", function(event) {
event.stopPropagation();
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
window.scroll(0, top + event.deltaY);
});
view.graphics.add(graphic);
});
</script>
<div style="" id="mapDiv"></div>
<mat-button-toggle-group [multiple]="true" name="fontStyle" aria-label="Font Style">
<button id="parcels" value="bold">Parcels</button>
<button id="housenumbers" value="italic">House Numbers</button>
<button id="said" value="underline">Sample Area IDs</button>
</mat-button-toggle-group>
</body>
</html>
The problem is that you need to reproject your custom coordinates (assume we call custom to other coordinate rather than WebMercator 3857 or 102100 and Geographics 4326). In order to do so,
GeometryService to interact with a geometry service of an ArcGIS Server,pojection module to do it in the client.Here you have a working example base on your code, that uses GeometryService.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#mapDiv,
.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"esri/Graphic",
"esri/tasks/GeometryService",
"esri/tasks/support/ProjectParameters",
"dojo/domReady!"
], function (
Map,
MapView,
Polygon,
SpatialReference,
Graphic,
GeometryService,
ProjectParameters
) {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "mapDiv",
map: map
});
// 102704 - Custom WKID
const originalPoly = new Polygon({
spatialReference: {
wkid: 102704
},
rings: [
[
[
2744913.4668447226,
541568.06113781035
],
[
2744917.4038447142,
541499.65215389431
],
[
2744864.2454864681,
541496.82210706174
],
[
2744813.6648789644,
541494.12952713668
],
[
2744810.2104895562,
541563.64283956587
],
[
2744860.4905727208,
541565.79441006482
],
[
2744913.4668447226,
541568.06113781035
]
]
]
});
console.log(`Original Polygon: ${JSON.stringify(originalPoly.toJSON())}`);
const geomSer = new GeometryService(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
);
const outSpatialReference = new SpatialReference({ wkid: 102100 });
const params = new ProjectParameters({
geometries: [originalPoly],
outSpatialReference
});
geomSer.project(params).then(function(result) {
const projectedPoly = result[0];
if (!projectedPoly) {
return;
}
console.log(`Projected Polygon: ${JSON.stringify(projectedPoly.toJSON())}`);
view.graphics.add(new Graphic({
geometry: projectedPoly,
symbol: {
type: "simple-fill",
style: "solid",
color: [255, 0, 0, 0.1],
outline: {
width: 2,
color: [255, 0, 0, 1]
}
}
}));
view.extent = projectedPoly.extent.clone().expand(3);
});
});
</script>
<div id="mapDiv"></div>
</body>
</html>