Search code examples
javascriptjsonesriesri-javascript-api

converting a json string to one that fits a esri.geometry.Multipoint


I have a webApi that returns a Json string

[{"MapEast":504743,"MapNorth":439624},{"MapEast":504736,"MapNorth":439622},{"MapEast":504775,"MapNorth":439722},{"MapEast":504739,"MapNorth":439738},{"MapEast":504774,"MapNorth":439715},{"MapEast":504739,"MapNorth":439734},{"MapEast":504773,"MapNorth":439711},{"MapEast":504739,"MapNorth":439728},{"MapEast":504773,"MapNorth":439705},{"MapEast":504739,"MapNorth":439724},{"MapEast":504773,"MapNorth":439699},{"MapEast":504743,"MapNorth":439718},{"MapEast":504773,"MapNorth":439694},{"MapEast":504743,"MapNorth":439713},{"MapEast":504776,"MapNorth":439688},{"MapEast":504742,"MapNorth":439708},{"MapEast":504773,"MapNorth":439680},{"MapEast":504743,"MapNorth":439703},{"MapEast":504774,"MapNorth":439674},{"MapEast":504742,"MapNorth":439698},{"MapEast":504773,"MapNorth":439668},{"MapEast":504743,"MapNorth":439693},{"MapEast":504773,"MapNorth":439663},{"MapEast":504740,"MapNorth":439688},{"MapEast":504773,"MapNorth":439658},{"MapEast":504742,"MapNorth":439679},{"MapEast":504775,"MapNorth":439653},{"MapEast":504742,"MapNorth":439676},{"MapEast":504743,"MapNorth":439670},{"MapEast":504742,"MapNorth":439665},{"MapEast":504742,"MapNorth":439660},{"MapEast":504741,"MapNorth":439656},{"MapEast":504741,"MapNorth":439650},{"MapEast":504741,"MapNorth":439645},{"MapEast":504740,"MapNorth":439640},{"MapEast":504741,"MapNorth":439634},{"MapEast":504740,"MapNorth":439631}]`

I need to figure out how to put this data to create a layer in an arcMap javascript api

function updateExtent(){
    var myMultiPoint = {
        "geometry":{
            "points":[[504743,439624],[504736,439622],[504775,439722]],
            "spatialReference":27700
        },
        "symbol":{
            "color":[255,255,255,64],
            "size":12,
            "angle":0,
            "xoffset":0,
            "yoffset":0,
            "type":"esriSMS",
            "style":"esriSMSCircle",
            "outline":{
                "color":[0,0,0,255],
                "width":1,
                "type":"esriSLS",
                "style":"esriSLSSolid"
            }
        }
    };  

    var gra = new esri.Graphic(myMultiPoint);

    myMap.graphics.add(gra);

    var graExtent = esri.graphicsExtent(myMap.graphics.graphics); 
    myMap.setExtent(graExtent); 
}

I have tested the above code an it works to create the layer and it works fine. I just need some guidance on how to get my json data from the webApi into the myMultiPoint variable creation.

Thanks


Solution

  • Use this to convert your JSON data to a points array:

    var myData = JSON.parse('[{"MapEas... ...9631}]');
    
    var points = myData.map(function(x){
        return [x.MapEast, x.MapNorth];
    });
    

    Then, you can simply add it in like this:

    var myMultiPoint = {
        "geometry":{
            "points":points, // Just reference the array, here.
            "spatialReference":27700
        },
        "symbol":{
            "color":[255,255,255,64],
            "size":12,
            "angle":0,
            "xoffset":0,
            "yoffset":0,
            "type":"esriSMS",
            "style":"esriSMSCircle",
            "outline":{
                "color":[0,0,0,255],
                "width":1,
                "type":"esriSLS",
                "style":"esriSLSSolid"
            }
        }
    };