<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Map with legend</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> <style> html, body { height: 98%; width: 98%; margin: 0; padding: 5px; } #rightPane{ width:20%; } #legendPane{ border: solid #97DCF2 1px; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> <script type="text/javascript"> 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() { var initialExtent = new esri.geometry.Extent({"xmin":-10753431,"ymin":4624151,"xmax":-10737799,"ymax":4635884,"spatialReference":{"wkid":102100}}); map = new esri.Map("map", { extent: initialExtent}); //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); 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 },"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.addOnLoad(init); </script> </head> <body class="claro"> <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;"> <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right"> <div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true" > <div id="legendDiv"></div> <button dojoType="dijit.form.Button" type="button" onClick="require(['dojo/dom-style'], function(domStyle){domStyle.set('legendDiv', 'display', 'none');});">Hide legend</button> <button dojoType="dijit.form.Button" type="button" onClick="require(['dojo/dom-style'], function(domStyle){domStyle.set('legendDiv', 'display', 'inline');});">Show legend</button> </div> <div dojoType="dijit.layout.ContentPane" title="Pane 2" > This pane could contain tools or additional content </div> </div> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> </div> </div> </body> </html>
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
