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