How To Highlight or outline a Region ( Cities) in Esri GIS Maps

Question

Hi I am Newbie in Using ESRI Maps . I have latitude and longitude of all cities stored in my database Now Based on latitude and longitude values I need to highlight the region in the maps .

Can anyone show me some code /point me a articles on highlighting a specific region (Cities) in maps using Javascript

Answer 1

The Javascript API documention is located at the following link so if you haven't already, check it out:

https://developers.arcgis.com/en/javascript/

If you already have the city locations in an ArcGIS Service, you can simply create a Dynamic Layer for it and add it to your map. Here is an exmaple from the Samples section of the website to do just that:

https://developers.arcgis.com/en/javascript/jssamples/map_dynamic.html

If your city locations aren't coming from an ArcGIS service and instead just in a basic table of lats and longs then you'll want to add them manually to the map as graphics. Essentially the way to do this would be retrieve the locations from your DB using your prefered method (a web service probably being the most robust, or you could render them into the page as a javascript array when the page is retrieved if you are using ASP.Net / PHP etc), then loop through the array of locations, create a graphic for each one and add to the map. Something like:

require([  
"esri/geometry/Point", 
"esri/symbols/SimpleMarkerSymbol",  
"dojo/_base/Color", 
"esri/graphic", ... ], 
function(Point, SimpleMarkerSymbol, Color, Graphic) {  

// assuming cities is an array of city objects with lat and lon attributes
var cities = /*get your array of city locations*/

// Define a symbol to use
var citySymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255,0,0,0.5]));

// Loop through each city   
for (n = 0; n < cities.length; n++) {

    // Create a point geometry
    var pt = new Point(cities[n].x,cities[n].y,map.spatialReference)

    // Create a graphic using the point and symbol
    var graphic = new Graphic(pt,citySymbol);

    // add the graphic to the map
    map.graphics.add(graphic);

} 

});

I haven't actually run it so likely contains a bug or two but hopefully a starting point. Check out Graphics on the Javascript API reference for more information.