I am working with the ArcGIS API for JavaScript 4.3
Everything is going well except this one little issue.
I am trying to allow a user to add a location to our db. When they put in the address the [x,y] coords are created from the address to make a point
I then take the point, make it the center of a circle and then set a radius of that circle and add it to the map.
The problem: No matter what I do I only get a circle on the map without the radius.
Here is my code.
NearbyLocationsMap.prototype.GetPointsNearby = function (x, y, cb) {
var PointsNearbyPromise = new Promise(function (resolve, reject) {
resolve(1);
});
PointsNearbyPromise.then(function () {
return point = nl.MakePointFromXY(x, y);
})
.then(nl.MakeCircleFromPoint)
.then(nl.MakeCircleLayer)
.then(nl.GoToCircle);
}
NearbyLocationsMap.prototype.MakePointFromXY = function (x, y) {
return new nl.Point({
x: x,
y: y
})
};
NearbyLocationsMap.prototype.MakeCircleFromPoint = function (point) {
var radius = 25;
return new nl.Circle(point,{
radius: radius,
radiusUnit: "miles",
geodesic: true
})
};
NearbyLocationsMap.prototype.MakeCircleLayer = function (circle) {
nl.CircleLayer;
nl.CircleLayer = new nl.GraphicsLayer({id: "circles"});
nl.map.add(nl.CircleLayer);
nl.N_graphic = new nl.Graphic({
geometry: circle,
symbol: nl.getRendererCircle()
});
nl.CIRCLE = circle;
nl.CircleLayer.add(nl.N_graphic);
}
NearbyLocationsMap.prototype.GoToCircle = function () {
var c_layer_extent = nl.CIRCLE.extent;
nl.c_layer_extent = c_layer_extent;
return setTimeout(function () {
nl.view.goTo({
target: nl.c_layer_extent,
zoom: 14
}, {
duration: 1000,
easing: "linear"
}, 500)
.then(nl.findLocationsInCircle)
.then(LocationModalLoading);
});
};
NearbyLocationsMap.prototype.getRendererCircle = function () {
return new nl.SimpleMarkerSymbol({
style: "solid",
color: "rgba(255, 255, 255, 0.5)",
outline: {
width: 2,
color: "rgba(24, 69, 59, 1)",
}
});
//return new nl.SimpleLineSymbol({
// color: "rgba(24, 69, 59, 1)",
// width: "2px",
// style: "short-dot"
//});
}