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" / >
</stack>
</map>

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" ?>
<layout
xmlns="https://geocortex.com/layout/v1"
xmlns:gxm="https://geocortex.com/layout/mobile/v1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://geocortex.com/layout/v1 ../../../../../ViewerSpec/layout/layout-mobile.xsd
https://geocortex.com/layout/v1 ../../../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"/>
</iwtm>
</stack>
<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" />
</stack>
<gxm:version slot="bottom-left" margin="0.8"/>
</map>
<!-- Taskbar / search -->
<panel>
<stack >
<search config="search"/>
<results-list config="results" active="false" />
</stack>
<feature-details config="feature-details"/>
<gxm:update-feature/>
<gxm:add-related-feature />
</panel>
<!-- Taskbar / layers -->
<panel>
<layer-list />
</panel>
<!-- Taskbar / add feature -->
<panel>
<gxm:add-feature-select-layer config="edit"/>
<gxm:add-feature/>
</panel>
</layout>

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.