<!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>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
