Je spullen opvullen

ReneRubalcava

<\/HEAD>

<\/P>

Een andere handige functie die deel uitmaakt van de ArcGIS API for JavaScript 4.0beta1<\/A> is dit concept van view padding<\/A>. Op het eerste gezicht vraag je je misschien af wat view padding precies doet.<\/P>

<\/P>

Hier is een voorbeeld<\/A> uit de documentatie dat goed laat zien wat view padding eigenlijk doet. Als je naar dit voorbeeld kijkt, zie je Liberty Island en een DOM-element met wat tekst aan de rechterkant.<\/P>

<\/P>

Wat misschien niet meteen duidelijk is<\/EM>, is dat het midden van de kaart was ingesteld als de locatie van Liberty Island, maar door het instellen van de view padding, zal de view<\/EM> het midden van de kaart verschuiven met die padding-waarde<\/STRONG>. Onthoud,

het is de view die bepaalt hoe de kaart wordt getekend<\/A>. Dit stelt je in staat om zijbalken, voetteksten of kopteksten aan je kaart toe te voegen, maar toch zoveel mogelijk van de kaart te gebruiken. Zie het bijna als een frame rond de kaart waar elke zijde naar behoefte kan worden aangepast.<\/P>

<\/P>

Misschien heb je in je applicatie zijpanelen gemaakt die veel ruimte innemen, de kaart bedekken in bepaalde situaties wanneer dat niet nodig is, of pas je de kaartgrootte aan om het zijpaneel te laten passen. Nu heb je een andere optie om gewoon de padding van de view aan te passen om dit voor je te compenseren<\/EM>.<\/P><\/P>Dit betekent ook dat je kunt aanpassen hoe de kaart en UI-elementen met elkaar omgaan wanneer iets wordt bijgewerkt. Misschien wil je het zijpaneel verkleinen wanneer het niet in gebruik is, dus wil je waarschijnlijk tegelijkertijd de view padding aanpassen.<\/P><\/P>Je zou dat kunnen doen door het bovenstaande voorbeeld een beetje aan te passen.<\/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  \/\/_Maak de kaart aan\n  var map = new Map({\n    basemap: "topo"\n  });\n\n  \/\/_Maak de view en stel de view padding in op 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  \/\/_Gebruik de view.padding om de css bij te werken\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  \/\/_ kijk uit naar updates van view padding \n  view.watch('padding', function(val) {\n    updatePadding(val);\n  });\n});<\/PRE><\/P>In dit geval kijken we naar een knopklik en passen we de view padding aan, wat op zijn beurt het zijpaneel zal aanpassen. Dat is niet zo moeilijk te realiseren in de EsriJS beta.<\/P><\/P>Je kunt hier een

demo van deze applicatie bekijken<\/A>.<\/P>

<\/P>

View padding in de huidige beta-release is een van die fijne kleine details in de API die veel flexibiliteit biedt aan jou als ontwikkelaar. Het stelt je in staat creatief te zijn met je gebruikersinterface en hoe dat invloed heeft op de interactie van gebruikers met de kaart. Dus veel plezier ermee<\/EM>.<\/P><\/P>Voor meer geodev tips en trucs,

bekijk mijn blog<\/A>.<\/P><\/BODY><\/HTML>