nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Convert a graphicsLayer to JSON

SowjanyaSunkara

Is there a way to convert an entire GraphicsLayer to JSON?
I was able to use dojo.toJson(graphics.toJson()) and convert individual graphics from a GraphicsLayer to JSON, so could anyone throw light on how to convert the entire layer to JSON?
I'm trying to store/save the JSON format of a graphics layer and then re-load it back to the user.

Thnx in adavance,
SS.

Find more posts tagged with

Accepted answers

All comments

ashrafsalim

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReadJosn.aspx.cs" Inherits="ReadJosn" %>

<!doctype html>

<html>

<head>

dojo.require("esri.map");

dojo.require("esri.layers.FeatureLayer");

dojo.require("esri.layers.graphics");

var map;

function init() {

//var startExtent = new esri.geometry.Extent({ "xmin": -12505511, "ymin": 2230016, "xmax": -3699965, "ymax": 8100380, "spatialReference": { "wkid": 102100 } });

map = new esri.Map("mapDiv");

//create and add new layer

var layer = new esri.layers.ArcGISTiledMapServiceLayer("");

var sketchLayer = "";

map.addLayer(layer);

var jsonFS =

{ "geometry": { "rings": [[[663791.8729519134, 2760558.7151297885], [663791.8729519134, 2760492.5691641634], [667099.1712331766, 2749776.9227328706], [656118.9409393826, 2749247.7550078686], [652547.0587956184, 2755994.6435016454], [663791.8729519134, 2760558.7151297885]]], "spatialReference": { "wkid": 32638, "latestWkid": 32638 } }, "symbol": { "color": [0, 0, 0, 64], "outline": { "color": [0, 0, 0, 255], "width": 1, "type": "esriSLS", "style": "esriSLSSolid" }, "type": "esriSFS", "style": "esriSFSSolid" } }

;

// var temp = eval("(" + jsonFS + ")");

//var sk = new esri.Graphic(eval("(" + jsonFS + ")"));

alert("0");

map.getLayer("sketchLayer").add(new esri.Graphic(eval("(" + jsonFS + ")")));

map.addLayer(new esri.Graphic(eval("(" + jsonFS + ")")));

alert("addLayer" + sk);

//console.log(jsonFS.features);

//var fs = new esri.tasks.FeatureSet(jsonFS);

//var featureCollection = {

// layerDefinition: {

// "geometryType": "esriGeometryPoint",

// "fields": [

// {

// }

// ]

// },

// featureSet: fs

//};

//var jsonfl = new esri.layers.FeatureLayer(featureCollection, {

// mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,

// 'id': 'jsonfl'

//});

//map.addLayer(jsonfl);

}

dojo.ready(init);

</script>

</head>

</body>

</html>

no Graphic appear to map any idea ??? Help

RobertMEIER

Just thought I'd chime in on this, writing multiple Graphics as JSON to a file.

I spent the last couple of hours looking around at the forums and other online sources and came up with this:

//using jquery to loop through the graphics:

        var jsonval = "{";

        $.each(markupGrfLayer.graphics, function (index, grf) {
            var junk = grf.toJson();
            jsonval += "\"" + index + "\":" + dojo.toJson(junk) + ",";
        });

        jsonval = jsonval.substring(0, jsonval.length - 1); //trim comma
        jsonval += "}";

// this creates a string that looks like this:

"{"0":{"geometry":{"x":-12659674.40398411,"y":5195776.256527749,"spatialReference":{"wkid":102100}},
"symbol":{"color":[204,153,204,255],"size":3.75,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle",
"outline":{"color":[153,255,153,255],"width":2.25,"type":"esriSLS","style":"esriSLSSolid"}}},
"1":{"geometry":{"x":-12547159.098348362,"y":5210452.165958499,"spatialReference":{"wkid":102100}},"symbol":{"color":[204,153,204,255],
"size":3.75,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle","outline":{"color":[153,255,153,255],"width":2.2,
"type":"esriSLS","style":"esriSLSSolid"}}}}"

Write this to a file how ever you'd like.

Read the string from file however you'd like, recreate the graphics and add the to the graphics layer:

              var jsString = stringFromFile;
               var val = $.parseJSON(jsString);

               $.each(val, function (key, value) {
                  var gra = new esri.Graphic(value);
                  markupGrfLayer.add(gra);
               });

That's it!

I hope someone finds this useful!

-bert

hcgis

OK, how to store it as geometry or geography type in SQL server
thank you for your reply

RRubalcava

I just store them as strings in a SQL table. No spatial or gdb. In this case, it wasn't needed.

hcgis

Are you storing graphics in a geodatabase or in other spatial databases

RRubalcava

I don't really use dojo.xhr too often to do my CRUD, but it should look similar to this.

updateData = function(graphic) {
 var _args, attr, data, geom;
 attr = graphic.attributes;
 // JSON methods may not be available in all browsers
 // I think dojo.toJson(obj).toString() will
 // do the same thing.
 geom = JSON.stringify(graphic.geometry.toJson());
 data = {
  "Geometry": geom
 };
 _args = {
  // my .net service will handle the writing
  // to sql server
  url: "api/service/" + attr.id,
  postData: data,
  handleAs: "json"
 };
 // I think you'd use xhrRawPost for json data,
 // I'm not clear on this one.
 return dojo.xhrRawPost(_args);
};

Then to read the updated data at a later time.

graphics = []; // array that will hold my graphics
// results would be the response from
// from a REST request via dojo xhr or jquery ajax
dojo.forEach(results, function(result) {
 var g, res_geom, res_obj;
 // result is JSON, but Geometry is a string field
 // convert string field to JSON object
 res_obj = dojo.fromJson(result.Geometry);
 // convert json to geometry
 res_geom = esri.geometry.fromJson(res_obj);
 //create my graphic
 g = new esri.Graphic(res_geom, symbolHelper.lineSymbol(), {
   "Id": attribute.Id,
   "WorkOrderId": attribute.WorkOrderId
 });
 return graphics.push(g);
});
// In this case, I update a FeatureLayer, but you can easily just add
// graphics to a GraphicsLayer
prev_graphics = lineFeatures.graphics;
lineFeatures.applyEdits(graphics, null, prev_graphics);

Hope that helps a bit, I tweaked some stuff from a project for this example to simplify it a bit, but not too much.

hcgis

hi Rene,
thank you for your help, can you explain deeply how to save in the SQL table from the javascript application an can you provide a sample for that
many thanks

RRubalcava

I actually do this a lot.
Geometry has a toJson() method, notice the lowercase "son", you guys just had to be different 😉
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/geometry.htm#toJson
I then do a jsonObject.toString() and store this in a string field that gets saved in a SQL table field along with any other data that's required.

Then when I get my results from the db, I take that field and convert it to JSON using dojo or jquery or JSON.parse(). I'd avoid using eval if a public facing site, too risky, but once you have the JSON object of the geometry you saved, you can now convert it to a real Geometry with esri.geometry.fromJson.
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/namespace_geometry.htm#fromJson

Then you can create your graphics to show on the map.
t's fast, simple and efficient for basic needs.

hcgis

Hi Sowjanya,
How did you store graphics in the database, can you explain more details?
thanks

derekswingley1

Nevermind then.

SowjanyaSunkara

After converting the sketches to Json, I store each graphic as a datatable inside a XML dataset on the server.
And to read the Json back, I'm reading the XML file contents to a string variable.

derekswingley1

How are you getting the JSON from the server? If you use dojo.io.script.get or dojo.xhrGet (with handleAs: "json") you wouldn't need to do the eval (it's done inside the dojo functions).

SowjanyaSunkara

I fixed it. I had to do a eval on the json returned so geometry and symbol are not null.

var temp = eval("("+ sketches + ")");
var sk = new esri.Graphic(temp);
map.getLayer("sketchLayer").add(sk);

SowjanyaSunkara

There are no errors. I donot see the graphics on the map.
In debug, I noticed that geometry values for sk is returned as "null" after the assignment
var sk = new esri.Graphic(sketches);

where

sketches={"geometry":{"rings":[[[2479931.879726085,7106033.410997431],[2480065.4169330294,7106050.981682555],[2480110.222180096,7105950.828777347],[2480014.461946169,7105920.958612636],[2479931.879726085,7106033.410997431]]],"spatialReference":{"wkid":2276}},"attributes":{"sketchType":"shape"},"symbol":{"color":[255,255,102,255],"outline":{"color":[192,0,0,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}

my map.SpatialReference wkid: 2276

derekswingley1

That looks like it should work. What's the spatial reference for your map? Are there any errors after you call add()?

SowjanyaSunkara

So, I successfully saved all map graphics (sketches/pushpins) on the server but was having no luck re-drawing them back on the map.
var sk = new esri.Graphic(sketches);
map.getLayer("importSketchLayer").add(sk);

and a sample sk ={"geometry":{"rings":[[[2479931.879726085,7106033.410997431],[2480065.4169330294,7106050.981682555],[2480110.222180096,7105950.828777347],[2480014.461946169,7105920.958612636],[2479931.879726085,7106033.410997431]]],"spatialReference":{"wkid":2276}},"attributes":{"sketchType":"shape"},"symbol":{"color":[255,255,102,255],"outline":{"color":[192,0,0,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}

Am I missing something?

SowjanyaSunkara

Thanks Derek.

derekswingley1

If you want to stick with a graphics layer, then you'll have to loop through the array of graphics and call dojo.toJson(graphic.toJson()) to get a text string you can push back to the server to be saved.

SowjanyaSunkara

Derek - Thanks for the prompt response. The reason for using a graphics layer is to save the user drawn graphics (Sketch/Pushpins), on the server and load it back when needed.
So do I have to convert individual graphics and save them on the server or is there an other way around?

derekswingley1

Unfortunately, no, graphics layers do not have a toJson() method.

Can you switch to using a feature layer? Those do have a toJson() method which would do exactly what you want.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.