<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!--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>Basemaps with an Opacity Slider</title> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/nihilo/nihilo.css"> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding: 0; } #sliderWrapper { position:absolute; right: 30px; top:30px; z-Index: 40; width: 250px; height: 50px; background: #fff; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; } #sliderLabels { position: relative; top: -1px; height: 1.2em; font-size: 80%; font-weight: bold; font-family: arial; color: #444; padding: 3px; margin: 5px 10px 0 10px; } </style> <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script> <script type="text/javascript" src="http://js.arcgis.com/3.8/"></script> <script type="text/javascript"> require([ "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/on", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRuleLabels"], function (Map, ArcGISTiledMapServiceLayer, on, registry) { var map = new esri.Map("map", { center: [-80,20], zoom: 3 }); var oceans = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"); map.addLayer(oceans); var streets = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(streets); //wire an event handler for the dojo slider map.on("load", function() { on(registry.byId('sliderOpacity'), 'change', changeOpacity); }); function changeOpacity(op) { var newOp = (op / 100); streets.setOpacity(1.0 - newOp); oceans.setOpacity(newOp); } }); </script> </head> <body class="nihilo"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0;"> <div id="sliderWrapper"> <!-- slider divs --> <div id="sliderOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="showButtons:'true', value:0, minimum:0, maximum:100, discreteValues:101, intermediateChanges:true"> <ol id="sliderLabels" data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props="container:'topDecoration'"> <li>Streets</li> <li>Oceans</li> </ol> </div> </div> <!-- end slider divs --> </div> </div> </body> </html>
<!doctype html> <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>Basemaps with an Opacity Slider</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/nihilo/nihilo.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding: 0; } #sliderWrapper { position:absolute; right: 30px; top:30px; z-Index: 40; width: 250px; height: 50px; background: #fff; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; } #sliderLabels { position: relative; top: -1px; height: 1.2em; font-size: 80%; font-weight: bold; font-family: arial; color: #444; padding: 3px; margin: 5px 10px 0 10px; } </style> <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); // one global for all app vars var app = {}; function init() { var ext = new esri.geometry.Extent({"xmin":-14628212,"ymin":714227,"xmax":7718305,"ymax":9832858,"spatialReference":{"wkid":102100}}); app.map = new esri.Map("map", { extent: ext }); app.imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); app.map.addLayer(app.imagery); app.streets = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); app.map.addLayer(app.streets); dojo.connect(dijit.byId('sliderOpacity'), 'onChange', changeOpacity); var resizeTimer; dojo.connect(app.map, 'onLoad', function(theMap) { dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized clearTimeout(resizeTimer); resizeTimer = setTimeout( function() { app.map.resize(); app.map.reposition(); }, 500); }); }); } function changeOpacity(op) { var newOp = (op / 100); app.streets.setOpacity(1.0 - newOp); app.imagery.setOpacity(newOp); } dojo.ready(init); </script> </head> <body class="nihilo"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <div id="sliderWrapper"> <!-- slider divs --> <div id="sliderOpacity" data-dojo-type="dijit.form.HorizontalSlider" data-dojo-props="showButtons:'true', value:0, minimum:0, maximum:100, discreteValues:101, intermediateChanges:true"> <ol id="sliderLabels" data-dojo-type="dijit.form.HorizontalRuleLabels" data-dojo-props="container:'topDecoration'"> <li>Streets</li> <li>Satellite</li> </ol> </div> </div> <!-- end slider divs --> </div> </div> </body> </html>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.