Select to view content in your preferred language

SimpleFillSymbol not showing up

629
2
11-08-2012 08:46 AM
MehulMarolia
New Contributor
Hi,

I am new to ArcGIS and development based on its API. My question may be simple to most so please help me in solving my problem.

I am trying to show a SimpleFillSymbol on a map but without any success. Can you help me in plotting the Symbol.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
   
  <head> 
 <title>Dynamic Layer</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/tundra/tundra.css"> 
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> 
 
 <script type="text/javascript">dojoConfig = { parseOnLoad:true };</script> 
 
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> 
 <style> 
 html, body, #mapDiv, .map.container { padding:0; margin:0; height:100%; } 
 </style> 
 <script type="text/javascript"> 
 dojo.require("esri.map"); 
 
 function init() { 
 
   var initialExtent = new esri.geometry.Extent({"xmin":-88.5483,"ymin":44.221,"xmax":-88.317583,"ymax":44.312247,"spatialReference":{"wkid":4326}}); 
   var map = new esri.Map("mapDiv", { wrapAround180: true, extent: esri.geometry.geographicToWebMercator(initialExtent)}); 
 
   dojo.connect(map, 'onLoad', initOperationalLayer); 
 
   //Add the World Imagery service as a basemap to the map 
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); 
   map.addLayer(basemap); 
  } 
 
 function initOperationalLayer(map) { 
 
  var infoTemplate = new esri.InfoTemplate("Dynamic Layer", "hi"); 
 
  var symb = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]) , 2), new dojo.Color([255,0,0,1.0]));

  var sr = new esri.SpatialReference({"wkid":4326});
  var poly1 = new esri.geometry.Polygon(sr);

  ring1 = new Array();
  ring1.push(new esri.geometry.Point(-88.4432, 44.253, sr));
  
  poly1.addRing(ring1);

  var attr = {"NAME" : "HI" , "SITENUM": "7"};
  var reportLayer1 = new esri.layers.GraphicsLayer({id:"reportLayer1"});
  reportLayer1.add(new esri.Graphic(poly1, symb, attr, infoTemplate));

  map.addLayer(reportLayer1); 
     map.infoWindow.resize(150, 105); 
 
     dojo.connect(window, 'resize', map, map.resize); 
 } 
 dojo.addOnLoad(init); 
 </script> 
  </head> 
  <body class='claro'> 
 <div id="mapDiv"></div> 
  </body> 
</html> 
0 Kudos
2 Replies
MehulMarolia
New Contributor
Hi,

I am new to ArcGIS and development based on its API. My question may be simple to most so please help me in solving my problem.

I am trying to show a SimpleFillSymbol on a map but without any success. Can you help me in plotting the Symbol.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
   
  <head> 
 <title>Dynamic Layer</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/tundra/tundra.css"> 
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> 
 
 <script type="text/javascript">dojoConfig = { parseOnLoad:true };</script> 
 
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> 
 <style> 
 html, body, #mapDiv, .map.container { padding:0; margin:0; height:100%; } 
 </style> 
 <script type="text/javascript"> 
 dojo.require("esri.map"); 
 
 function init() { 
 
   var initialExtent = new esri.geometry.Extent({"xmin":-88.5483,"ymin":44.221,"xmax":-88.317583,"ymax":44.312247,"spatialReference":{"wkid":4326}}); 
   var map = new esri.Map("mapDiv", { wrapAround180: true, extent: esri.geometry.geographicToWebMercator(initialExtent)}); 
 
   dojo.connect(map, 'onLoad', initOperationalLayer); 
 
   //Add the World Imagery service as a basemap to the map 
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); 
   map.addLayer(basemap); 
  } 
 
 function initOperationalLayer(map) { 
 
  var infoTemplate = new esri.InfoTemplate("Dynamic Layer", "hi"); 
 
  var symb = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]) , 2), new dojo.Color([255,0,0,1.0]));

  var sr = new esri.SpatialReference({"wkid":4326});
  var poly1 = new esri.geometry.Polygon(sr);

  ring1 = new Array();
  ring1.push(new esri.geometry.Point(-88.4432, 44.253, sr));
  
  poly1.addRing(ring1);

  var attr = {"NAME" : "HI" , "SITENUM": "7"};
  var reportLayer1 = new esri.layers.GraphicsLayer({id:"reportLayer1"});
  reportLayer1.add(new esri.Graphic(poly1, symb, attr, infoTemplate));

  map.addLayer(reportLayer1); 
     map.infoWindow.resize(150, 105); 
 
     dojo.connect(window, 'resize', map, map.resize); 
 } 
 dojo.addOnLoad(init); 
 </script> 
  </head> 
  <body class='claro'> 
 <div id="mapDiv"></div> 
  </body> 
</html> 



Please tell me where i am making a mistake.
0 Kudos
DerekMiller
Deactivated User
Perhaps I'm missing something, but it appears that you're passing a point to ring1 based on lat/long and then assigning a fill symbol to the point. By default, points don't have fill symbols. You'll need to buffer the point with a geometry service.

Also noticed you have conflicting css (tundra in your style tag, claro in your body class) which results in the red zoom slider.

- d
0 Kudos