how to bind markers on map in asp.net, based on XY values coming from sql database

[MRReddy]

taking XY values from textbox and loading nearby industries. How to diplay data from stored procedure. with colored circles

require([
"esri/map",
"dojo/domReady!"
], function (
Map
) {
map = new Map("map", {
basemap: "osm",
center: [-122.9007, 47.0379],
zoom: 9,
scaleControl: true
});
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;
}
});

[RobertScheitlin__GISP]

Malla,

   Your title says "XY values coming from sql database". I don't see anything in the code you posted that has anything about SQL XY values?...

[MRReddy]

converted that into json, written in backend, in json all data is succesfully loaded in data table dt

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

}

[thejuskambi]

What rscheitlin‌ meant is, the javascript you have shared in the post does not have any implementation where you are reterieving any kind of SQL value from the database. All you are doing is adding a map and handling a map click event. How are you getting the SQL values to the client side? esriRequest or some ajax calls?

[MRReddy]

I added this line in client side

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

convertdataatble tostring in backend  i have written c# ccoding, I have posted above, and it is called everytime page loads

[thejuskambi]

Thats not an ideal way to do. But, if it works for you, good.

Below I have modified your script to add point from the map click, but you would have to use the "markers" values can create graphics after the map has loaded.

require([ "esri/map", "esri/Graphic", "esri/symbols/SimpleMarkerSymbol", 
     "esri/symbols/SimpleLineSymbol", "esri/Color", "esri/geometry/Point", "dojo/domReady!"],
function (Map, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color, Point) {
     map = new Map("map", {
          basemap: "osm",
          center: [-122.9007, 47.0379],
          zoom: 9,
          scaleControl: true
     });
     
     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;
          
          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
               new Color([255,0,0]), 1),
               new Color([0,255,0,0.25]));

          var pt = new Point(long, lat);
          var graphic = new Graphic(pt, symbol);
          
          // Adding the graphics to map, you could instead 
          // create a GraphicsLayer and add it to them
          map.graphics.add(graphic);
     }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Take a look at the sample as well Add graphics to a map | ArcGIS API for JavaScript 3.20 

[thejuskambi · Accepted solution]

I cannot write the whole application here, but can give you directions.

select lat and long by click on map, and select radius 5,10, 15 miles - You have the part where you can click the map and get lat long, You would need UI where the user can select radius.

then the button click event ->and data comes from sql is converted to json-> from json - this is tricker. Usually, I would have a REST service which will receive the response and return the JSON. But you have codebehid do this for you. So I am guessing The page will be a post request to the server. which will update the "var markers = JSON.parse('<%=ConvertDataTabletoString() %>');" value

how to add circles on map - That is what I have shown you in my previous snippet. You would have to loop through all the markers and then create new Graphic for each of the record in the markers. I am not sure what the structure of the "markers" is. But say if it is an array of lat and long. You will have to do something like below.

     map.on("load", addQueryResult);
     
     function addQueryResult(){
          if(markers && markers.length > 0){
               for(var i = 0; i < markers.length;i++){
                    var lat = markers[i].lat;
                    var long = markers[i].long;
                    
                    var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
                         new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                         new Color([255,0,0]), 1),
                         new Color([0,255,0,0.25]));

                    var pt = new Point(long, lat);
                    var graphic = new Graphic(pt, symbol);
                    
                    // Adding the graphics to map, you could instead 
                    // create a GraphicsLayer and add it to them
                    map.graphics.add(graphic);
                    
               }
          }
     }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍