<!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" /> <!--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> </title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/soria/soria.css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } body{ background-color:white; overflow:hidden; font-family: "Trebuchet MS"; } .roundedCorners{ -moz-border-radius: 4px; } #header { border: solid 2px #7EABCD; background-color:white; color:peru; font-size:18pt; text-align:center; font-weight:bold; height:60px; } #subheader { font-size:small; color: peru; } #rightPane{ background-color:white; color:peru; border: solid 2px cornflowerblue; width:30%; overflow:hidden; } #map { background-color:white; border:solid 2px cornflowerblue; padding:0; } #footer { border: solid 2px #7EABCD; background-color:white;color:peru;font-size:10pt; text-align:center; height:40px; } .soria .dojoxGridHeader .dojoxGridCell { color:peru !important; } </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"> </script> <script type="text/javascript"> dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("esri.map"); dojo.require("esri.toolbars.draw"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.tasks.query"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); var map, toolbar; var featureLayer; function init() { var initialExtent = new esri.geometry.Extent({ "xmin": -13092200, "ymin": 3691751, "xmax": -12538796, "ymax": 3880092, "spatialReference": { "wkid": 102100 } }); map = new esri.Map("map", { extent: initialExtent }); dojo.connect(map, 'onLoad', function(map) { dojo.connect(dijit.byId('map'), 'resize', resizeMap); }); var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"; var featureLayerUrl = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0"; var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); featureLayer = new esri.layers.FeatureLayer(featureLayerUrl, { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ["region,magnitude,depth,objectid"] }); featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([160, 214, 238]))); map.addLayer(basemap); map.addLayer(featureLayer); } function resizeMap() { //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_faq.htm var resizeTimer; clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { map.resize(); map.reposition(); }, 500); } //show map on load dojo.addOnLoad(init); </script> </head> <body class="soria"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="top"> HEADER </div> <div id="map" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center"> </div> <div id="rightPane" dojoType="dijit.layout.TabContainer" region="right" tabStrip="true"> <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true"> Stuff </div> <div dojoType="dijit.layout.ContentPane" title="My second tab"> Lorem ipsum and all around - second... </div> <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true"> Lorem ipsum and all around - last... </div> </div> <!-- end TabContainer --> <div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom"> This is the footer section </div> </div> </body> </html>
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
