topic Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map? in ArcGIS JavaScript Maps SDK Questions

I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 01:36:12 GMT

var map;

require([

"esri/map",

"esri/symbols/SimpleLineSymbol",

"esri/graphic",

"esri/symbols/SimpleMarkerSymbol",

"esri/Color",

"dojo/on",

"dojo/dom",

"esri/geometry/Point",

"dojo/domReady!"

], function (

Map, SimpleLineSymbol, Graphic, SimpleMarkerSymbol, Color, on, dom, Point

) {

var markers = JSON.parse('<%=ConvertDataTabletoString() %>');

map = new Map("map", {

basemap: "osm",

center: [-122.9007, 47.0379],

zoom: 9

//scale

});

map.on("load", function () {

map.infoWindow.resize(250, 100);

});

map.on("click", addPoint);

function addPoint(evt) {

var lat = evt.mapPoint.getLatitude();

var long = evt.mapPoint.getLongitude();

document.getElementById("ContentPlaceHolder1_txtLat").value = lat;

document.getElementById("ContentPlaceHolder1_txtLng").value = long;

//map.infoWindow.setTitle("Coordinates");

//map.infoWindow.setContent(

// "lat/lon : " + latitude.toFixed(2) + ", " + longitude.toFixed(2) +

// "<br>screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y

//);

// map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));

}

});

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

PanagiotisPapadopoulos — Tue, 20 Jun 2017 07:08:49 GMT

Try this Terraformer

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

RobertScheitlin__GISP — Tue, 20 Jun 2017 13:09:12 GMT

Malla,

I don't see anywhere in your code where you are attempting to parse through your json result to create graphics to add to the map?...

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 15:51:43 GMT

I have written that in backend c#

using (SqlCommand cmd = new SqlCommand("SearchByRadiusMap", con))

{

cmd.CommandType = CommandType.StoredProcedure;

SqlParameter distancevalue = new SqlParameter("@distance", distance);

cmd.Parameters.Add(distancevalue);

SqlParameter latitudevalue = new SqlParameter("@lat", latitude);

cmd.Parameters.Add(latitudevalue);

SqlParameter longitudevalue = new SqlParameter("@long", longitude);

cmd.Parameters.Add(longitudevalue);

con.Open();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(dt);

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

Dictionary<string, object> row;

foreach (DataRow dr in dt.Rows)

{

row = new Dictionary<string, object>();

foreach (DataColumn col in dt.Columns)

{

row.Add(col.ColumnName, dr[col]);

}

rows.Add(row);

}

return serializer.Serialize(rows);

}

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

ThomasSolow — Tue, 20 Jun 2017 16:02:09 GMT

It looks to me like this code is converting stuff in your database to JSON. Once you've done this and sent the resulting JSON to the client, you need to convert it from JSON into instance of Esri JS API classes. This is done by passing the JSON to a constructor like var graphic = new Graphic(<Esri Graphic JSON>);

Then the graphic(s) can be added to the map. You can't add raw JSON to the map.

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 16:10:38 GMT

As per in the image, i need to show the colored circles on map, I was been stuck with this json from few days, any sample or example will be appreciated.

Thank you

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

ThomasSolow — Tue, 20 Jun 2017 16:40:06 GMT

What is the value of

var markers = JSON.parse('<%=ConvertDataTabletoString() %>');

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 16:46:55 GMT

All sql data converted to json from below code(posted above) and called at client side everytime page accessed or loaded,

with the client side line var markers = JSON.parse('<%=ConvertDataTabletoString() %>');

ConvertDataTabletoString is function called everytime, there are 100's recorded loaded in to json function

System.Web.Script.Serialization.JavaScriptSerializer serializer = newSystem.Web.Script.Serialization.JavaScriptSerializer();

List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

Dictionary<string, object> row;

foreach (DataRow dr in dt.Rows)

{

row = new Dictionary<string, object>();

foreach (DataColumn col in dt.Columns)

{

row.Add(col.ColumnName, dr[col]);

}

rows.Add(row);

}

return serializer.Serialize(rows);

}

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

ThomasSolow — Tue, 20 Jun 2017 16:55:57 GMT

I mean, is markers a JSON array? It seems to me that you want to convert var markers into an array of Graphics, but I don't know how to approach that unless I know the shape of the JSON.

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

RobertScheitlin__GISP — Tue, 20 Jun 2017 17:28:52 GMT

Malla,

This has yet to show what the result json string looks like. Without knowing the structure of the result json there is little help that can be provided.

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 17:31:29 GMT

result json look likes Array

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 17:31:51 GMT

result json look likes Array

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

RobertScheitlin__GISP — Tue, 20 Jun 2017 17:34:05 GMT

What is the arrays structure? Just saying it is an array does not answer the issue of that does the key value pairs of the returned json look like.

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 17:41:37 GMT

It's a dictionary object

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 17:42:32 GMT

I am binding rows in that object

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

Pa_Lotus — Tue, 20 Jun 2017 17:43:17 GMT

column name and data

Re: I have fetched the data from sql server and returned it as a JSon object. How to bind the Json object to Arcgis javascript map?

ChristopherSchreiber — Sat, 11 Dec 2021 21:07:20 GMT

Malla,

Take a look at the Graphics Layer Link in the JS API.

GraphicsLayer | API Reference | ArcGIS API for JavaScript 3.20

There is a property in it that expects an array of graphics. They make up the layer.

Here is the link to the JS API for an individual graphic.

Graphic | API Reference | ArcGIS API for JavaScript 3.20

Here is an example of adding an individual graphic to a map using JSON, notice the "MyPoint" variable is raw JSON, I think this is what rscheitlin‌, is looking for when he asks what your JSON output is.

require([
  "esri/graphic" 
], function(Graphic) {
  var myPoint = {"geometry":{"x":-104.4140625,"y":69.2578125,
    "spatialReference":{"wkid":4326}},"attributes":{"XCoord":-104.4140625,
    "YCoord":69.2578125,"Plant":"Mesa Mint"},"symbol":{"color":[255,0,0,128],
    "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS",
    "style":"esriSMSSquare","outline":{"color":[0,0,0,255],"width":1,
    "type":"esriSLS","style":"esriSLSSolid"}},
    "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/> Longitude: ${XCoord} <br/> Plant Name:${Plant}"}};
  var gra = new Graphic(myPoint);
  ...
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The JSON above includes the point's geometry, Spatial Reference, attributes, symbology, and InfoTemoplate (Popup) information.

NOTE: I used the "Point" example above, but there are also examples for lines and Polygons.

I hope this helps!

Chris