Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
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 '13 at 9:22
    
@Gunner thanks for the reply..Could you please post the code? –  Sunil Mar 5 '13 at 9:26
add comment

1 Answer

up vote 2 down vote accepted
<!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.

share|improve this answer
    
thanks for your code .It works fine for Firefox (Not in IE) but I will research and let you know...thanks : ) –  Sunil Mar 5 '13 at 10:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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