Rellenando Tus Cosas

ReneRubalcava

<\/HEAD>

<\/P>

Otra característica interesante que forma parte de la ArcGIS API for JavaScript 4.0beta1<\/A> es este concepto de view padding<\/A>. A primera vista, puede que te preguntes exactamente qué hace view padding.<\/P>

<\/P>

Aquí hay un ejemplo<\/A> de la documentación que es una buena demostración de lo que realmente hace view padding. Al observar este ejemplo ves Liberty Island y un elemento DOM con algo de texto a la derecha.<\/P>

<\/P>

Lo que puede no parecer obvio<\/EM> es que el centro del mapa se estableció como la ubicación de Liberty Island, pero al establecer el view padding, el view<\/EM> desplazará el centro del mapa por esa cantidad de padding<\/STRONG>. Recuerda,

es el view el que controla cómo se dibuja el mapa<\/A>. Esto te permite agregar barras laterales, pies de página o encabezados a tu mapa, pero aún así poder utilizar tanto del mapa como sea posible. Piénsalo casi como un marco alrededor del mapa donde cada lado puede redimensionarse según sea necesario.<\/P>

<\/P>

Quizás has hecho paneles laterales en tu aplicación que ocupan mucho espacio, cubren el mapa en ciertas situaciones cuando no deberían, o redimensionas el mapa para permitir que la barra lateral encaje. Ahora tienes otra opción para simplemente ajustar el padding del view para compensar esto por ti<\/EM>.<\/P><\/P>Esto también significa que puedes ajustar cómo interactúan el mapa y los elementos de la interfaz cuando algo se actualiza. Tal vez quieras redimensionar el panel lateral cuando no esté en uso, por lo que probablemente querrás ajustar el view padding al mismo tiempo.<\/P><\/P>Puedes hacer eso ajustando un poco el ejemplo anterior.<\/P><\/P>require([\n  "esri\/Map",\n  "esri\/views\/SceneView",\n  "esri\/widgets\/Search",\n  "dojo\/on",\n  "dojo\/domReady!"\n], function(\n  Map,\n  SceneView,\n  Search,\n  on\n) {\n  \/\/_Create the map_\n  var map = new Map({\n    basemap: "topo"\n  });\n\n  \/\/_Create the view set the view padding to be 320 px_\n  var view = new SceneView({\n    container: "viewDiv",\n    map: map,\n    center: [-118, 34],\n    zoom: 9,\n    padding: {\n      right: 320\n    }\n  });\n  \n  view.then(function() {\n    var searchWidget = new Search({\n      view: view\n    }, "searchDiv");\n    searchWidget.startup();\n  });\n  \n  var resize = document.getElementById("resize");\n  on(resize, "click", function() {\n    if (view.padding.right === 320) {\n      view.padding = { right: 18 };\n    } else {\n      view.padding = { right: 320 };\n    }\n  });\n\n  \/\/_Using the view.padding to update the css_\n  var updatePadding = function(padding) {\n    var right = padding.right + "px";\n    var paddingRight = document.querySelector("#padding").style;\n    paddingRight.width = right;\n    paddingRight.visibility = "visible";\n  };\n  \n  updatePadding(view.padding);\n  \n  \/\/_ watch for view padding updates_\n  view.watch('padding', function(val) {\n    updatePadding(val);\n  });\n});<\/PRE><\/P>En este caso, estamos observando un clic en un botón y ajustando el view padding, lo que a su vez redimensionará el panel lateral. No es tan difícil lograr esto en la beta de EsriJS.<\/P><\/P>Puedes ver una

demostración de esta aplicación aquí<\/A>.<\/P>

<\/P>

El view padding en la versión beta actual es uno de esos pequeños detalles agradables en la API que te brinda mucha flexibilidad como desarrollador. Te permite ser creativo con tu interfaz de usuario y cómo eso impacta la interacción de tus usuarios con el mapa. Así que diviértete con ello<\/EM>.<\/P><\/P>Para más consejos y trucos geodev,

visita mi blog<\/A>.<\/P><\/BODY><\/HTML>