[GIS] Change symbol size in legend for FeatureLayer (ArcGIS API for JavaScript)

arcgis-javascript-apiarcgis-serverlegendweb-mapping

I'm learning how to create web applications using the ArcGIS API for JavaScript. I have a map that is displaying both an ArcGISDynamicMapServiceLayer (which includes two layers) and a FeatureLayer. I have successfully added a Legend using esri/dijit/legend, and it shows all the information I want. I then added code to my CSS file to further format the legend (to change font/size etc for titles and names). Ex:

.esriLegendLayer {
     font-size: 12px;
     font-family: 'Roboto', serif;
}

I was also able to successfully change the size of the legend symbols for the ArcGISDynamicMapServiceLayer using the following css code:

.esriLegendLayer img {
    width: 20px;
}

However, this does NOT effect the legend symbols for the FeatureLayer.

enter image description here

I want the symbols sizes to be the same throughout the legend. In the image above, you can see they are not, because the code is only altering the size for ArcGISDynamicMapServiceLayer symbols (top) but not FeatureLayer symbols (bottom).

I have tried unsuccessfully to find a way to change the symbol size for the FeatureLayer as well. I don't want to change the size of the symbol as displayed on the map, just on the legend, and I want to be able to set the size regardless of the size that was used when the service was created. This is important so we can have a general template that will result in the same general consistant look for the legend regardless of what layers/services are included.

Best Answer

Sorry for taking so long to respond to this - I forgot all about it!

In the end I discovered too many other limitations with the Dijit Legend widget, so ultimately I created my own, using an ajax call to the legend on the REST endpoint (.../MapServer/legend?f=pjson) to obtain the necessary info, including the symbol, which I was then able to style however I wanted.

It took some learning to create my own widgets, but it's been worth it for the increased freedom it allows me to get it just the way I want it!

Related Solutions

[GIS] Controlling “Fill Properties” in ArcGIS, so that that symbols are visible in legend

The only solution we've found to date is one you've already rejected: convert to graphics. (Though I've not experienced the "move label, marker disapeared" problem you mention.) We just sigh, curse a little, suck it up and keep going. On the bright side this allows us to do things not otherwise possible. In this example below any given polygon on the map can have one, two or all three of the line types shown. Collapsing all the possibilities to one legend patch does wonders for conserving real estate, and makes it easier for the map reader to comprehend in the process. It's a gain worth the pain. Thanks go to Gary Stronghill for the design idea.

legend example of nested, stacked line types

map detail

[GIS] Changing a legend elements from vertical to horizontal in ArcGIS Java Script API (version 3.2/3.3)

<!DOCTYPE html>

Map with legend

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" href="css/esri.css">
<style> 
  html, body { height: 97%; width: 98%; margin: 1%; }
  #rightPane{
    width:60%;
  }
  #legendPane{
    border: solid #97DCF2 1px;
  }
</style> 

<script>var dojoConfig = { parseOnLoad: true };</script> 
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script> 
<script> 
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.AccordionContainer");
  dojo.require("esri.map");
  dojo.require("esri.dijit.Legend");
  dojo.require("esri.layers.FeatureLayer");

  var map;

  function init() {
    map = new esri.Map("map", { 
      basemap: "topo",
      center: [-96.53, 38.374],
      zoom: 13
    });

    var rivers = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", {
      mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
      outFields: ["*"]
    });
    var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {
      mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
      outFields: ["*"]
    });

    //add the legend
    dojo.connect(map,'onLayersAddResult',function(results){
      var layerInfo = dojo.map(results, function(layer,index){
        return {layer:layer.layer,title:layer.layer.name};
      });
      if(layerInfo.length > 0){
        var legendDijit = new esri.dijit.Legend({
          map:map,
          layerInfos:layerInfo ,
          style: "display:inline"
        },"legendDiv");
        legendDijit.startup();
      }
    });

    map.addLayers([waterbodies,rivers]);


    dojo.connect(map, 'onLoad', function(theMap) {
      //resize the map when the browser resizes
      dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
    });
  }

  dojo.ready(init);
</script>

  <div id="map" 
       data-dojo-type="dijit.layout.ContentPane" 
       data-dojo-props="region:'center'" 
       style="overflow:hidden;"> 
  </div> 


  <div id="rightPane" 
       data-dojo-type="dijit.layout.ContentPane" 
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit.layout.AccordionContainer" class="esriLegendLayer">
      <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" 
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content
      </div>
    </div>
  </div>


</div>

and I have changed ESRi CSS class .esriLegendLayer .esriLegendLayer { display:inline; }

I have also send the attachment to your javascript forum Changing a legend from vertical to horizontal in ArcGIS Java Script API (3.2/3.3)

Hope this is helpful.

Best Answer

Related Solutions

[GIS] Controlling “Fill Properties” in ArcGIS, so that that symbols are visible in legend

[GIS] Changing a legend elements from vertical to horizontal in ArcGIS Java Script API (version 3.2/3.3)

Related Question