0

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

this is my result

1 Answer 1

1

I ended up finding the solution.

It was the render I was using. Here is the updated code.

NearbyLocationsMap.prototype.getRendererCircle = function () {
    return new nl.SimpleFillSymbol();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.