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

arcgis-javascript-api

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

Best Answer

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

Related Question