I want to change legend style vertical to horizontal in Java script API.

I researched and tried few things on Google but not able to change style. I have published simple map service using ArcGIS Desktop 10.1 and accessing that map service through REST in my java script application.

I tried to set style in Desktop itself but it was not working. I think default order of legend in REST vertical but can we change it to horizontal??

I researched following things:

  1. First I tried through API but no setting in the ESRI Java script API (version 3.2/3.3) and no horizontal legend examples available on ESRI's site.

  2. Gone through few links, I guess it is applicable for desktop only not in the REST service. Link1 , Link2

Software's : ArcGIS Desktop 10.1 & ArcGIS Server 10.1 , ArcGIS Java script API 3.2/3.3

3.Researching on Google + Checking dijit references

4.Please check the screen shots (First is default order screenshot second one is horizontal order screenshot ( I have modified this was in MS paint)

So any help will be great !!! thanks in advance : )

Default order of legend

Want this order

  • 1
    I tried in Firefox to align in horizontal using CSS and worked but it in IE and Chrome is not working.
    – Gunner
    Mar 5, 2013 at 9:22
  • @Gunner thanks for the reply..Could you please post the code?
    – Sunil
    Mar 5, 2013 at 9:26

1 Answer 1

<!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">
  html, body { height: 97%; width: 98%; margin: 1%; }
    border: solid #97DCF2 1px;

<script>var dojoConfig = { parseOnLoad: true };</script> 
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script> 

  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
      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({
          layerInfos:layerInfo ,
          style: "display:inline"


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


  <div id="map" 

  <div id="rightPane" 

    <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 data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content


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.

  • thanks for your code .It works fine for Firefox (Not in IE) but I will research and let you know...thanks : )
    – Sunil
    Mar 5, 2013 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.