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

Question 1

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:

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

Question 2

I tried in Firefox to align in horizontal using CSS and worked but it in IE and Chrome is not working.

Question 3

@Gunner thanks for the reply..Could you please post the code?

Question 4

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

Question 5

thanks for your code .It works fine for Firefox (Not in IE) but I will research and let you know...thanks : )

Gunner Gunner 97413 silver badges36 bronze badges · Accepted Answer · 2013-03-05 09:36:26Z

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

thanks for your code .It works fine for Firefox (Not in IE) but I will research and let you know...thanks : )

Stack Exchange Network

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

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

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

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions