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

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

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

}

});

Trouver plus de publications taguées avec

Accepted answers

All comments

ChristopherSchreiber

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.

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

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

Pa_Lotus

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

ThomasSolow

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.

Pa_Lotus

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

}

RobertScheitlin__GISP

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

PanagiotisPapadopoulos54

Try this Terraformer

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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