Advanced Model Binding

The scale bar component displays information about a particular map. More specifically, it is dependent on the data of a map model to display its values.

Components express this data dependency through interactions through injecting the MapView. The specific map view that is injected is resolved through a model binding based on the layout hierarchy.

Nested Model Imports#

In previous layout examples, layouts were shown where components related to a map, such as zoom buttons, were nested within a map. It was assumed that the component would bind to the map it was placed in, but why?

<map config="map-1" slot="main">
<stack margin="0.5" slot="bottom-right" halign="end">
<zoom margin="0.8"/>
<geolocate margin="0.5" config="geolocate" / >

Certain components, such as <zoom/> or <geolocate/>, require a Map Model to function. To locate a Map Model, the layout tree hierarchy will be searched upwards, starting at the requesting component. When a element in the layout is found that provides the required model, (in this case, the <map/> component provides a Map Model), the requesting component will import the model. If the correct model is not found on an upwards search, a breadth first search will be performed from the root of the layout tree.

Take this more complicated layout for example.

<?xml version="1.0" encoding="utf-8" ?>
xsi:schemaLocation=" ../../../../../ViewerSpec/layout/layout-mobile.xsd ../../../layout-custom.xsd">
<gxm:taskbar id="taskbar" orientation="vertical">
<!-- Taskbar main content -->
<map config="map1" slot="main">
<gxm:geometry-toolbar slot="top-center-visible" config="geometry" margin="0.8" style="map-widget" active="false" />
<search-new-extent config="search" margin="0.8" slot="top-center-visible" active="false" />
<stack margin="0.8" slot="top-right" halign="end">
<iwtm config="iwtm">
<user slot="bottom"/>
<stack margin="0.5" slot="bottom-right" halign="end">
<zoom margin="0.5"/>
<button config="measure-action" icon="measure" style="map-widget" margin="0.5"/>
<geolocate margin="0.5" config="geolocate" />
<gxm:version slot="bottom-left" margin="0.8"/>
<!-- Taskbar / search -->
<stack >
<search config="search"/>
<results-list config="results" active="false" />
<feature-details config="feature-details"/>
<gxm:add-related-feature />
<!-- Taskbar / layers -->
<layer-list />
<!-- Taskbar / add feature -->
<gxm:add-feature-select-layer config="edit"/>

This layout has components such as <search/> or <gxm:add-feature/> which require the context of a specific map to function. However, these components are not nested within the <map/> component in the app. Therefore, they will start a breadth first search to discover a map model import it.