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?

1325
16
06-19-2017 06:36 PM
MRReddy
Occasional Contributor

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));

}

});

Tags (1)
0 Kudos
16 Replies
PanagiotisPapadopoulos
Esri Regular Contributor

Try this Terraformer 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?...

0 Kudos
MRReddy
Occasional Contributor

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);

}

0 Kudos
ThomasSolow
Regular Contributor

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.

0 Kudos
MRReddy
Occasional Contributor

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

Sample image

0 Kudos
ThomasSolow
Regular Contributor

What is the value of

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

 

0 Kudos
MRReddy
Occasional Contributor

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);

}

0 Kudos
ThomasSolow
Regular Contributor

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.

RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos