Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>View padding - 4.0 beta 1</title>
<style>
  html, body {
    padding: 0;
    margin: 0;
  }
  #padding {
    z-index: 99;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    visibility: hidden;
  }
  .vertical-center {
    position: relative;
    padding: 2px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  #textbackground {
    height: 60%;
    background: rgba(0,0,0,0.5);
  }
  #text {
    color: white;
    padding: 1em;
  }
  
  #searchDiv {
    margin: 1em;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta1/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta1/dijit/themes/nihilo/nihilo.css">
<script src="https://js.arcgis.com/4.0beta1/"></script>
</head>
​
<body class="nihilo">
<div id="viewDiv">
  <div id="padding">
    <div id="textbackground" class = "vertical-center">
      <button id="resize"></button>
      <div id ="searchDiv">
      </div>
      <div id="text">
      <p>You can do your search stuff in here, add some other widgets, have some fun, knock yourself out.</p>
      </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
​
require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/widgets/Search",
  "dojo/on",
  "dojo/domReady!"
], function(
  Map,
  SceneView,
  Search,
  on
) {
  //Create the map
  var map = new Map({
    basemap: "topo"
  });
​
  //Create the view set the view padding to be 320 px
  var view = new SceneView({
    container: "viewDiv",
    map: map,
    center: [-118, 34],
    zoom: 9,
    padding: {
      right: 320
    }
  });
  
  view.then(function() {
    var searchWidget = new Search({
      view: view
    }, "searchDiv");
    searchWidget.startup();
  });
  
  var resize = document.getElementById("resize");
  on(resize, "click", function() {
    if (view.padding.right === 320) {
      view.padding = { right: 18 };
    } else {
      view.padding = { right: 320 };
    }
  });
​
  //Using the view.padding to update the css
  var updatePadding = function(padding) {
    var right = padding.right + "px";
    var paddingRight = document.querySelector("#padding").style;
    paddingRight.width = right;
    paddingRight.visibility = "visible";
  };
  
  updatePadding(view.padding);
  
  // watch for view padding updates
  view.watch('padding', function(val) {
    updatePadding(val);
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
odoepro
0viewers