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

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

Pa_Lotus

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

Find more posts tagged with

Accepted answers

thejuskambi

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.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> addQueryResult<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addQueryResult</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>markers <SPAN class="operator token">&&</SPAN> markers<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">for</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> markers<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN>i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> lat <SPAN class="operator token">=</SPAN> markers<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>lat<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> long <SPAN class="operator token">=</SPAN> markers<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>long<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleMarkerSymbol<SPAN class="punctuation token">.</SPAN>STYLE_CIRCLE<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">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="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">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">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> pt <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN>long<SPAN class="punctuation token">,</SPAN> lat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="comment token">// Adding the graphics to map, you could instead </SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="comment token">// create a GraphicsLayer and add it to them</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

Pa_Lotus

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

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?

Pa_Lotus

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

}

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

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.