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.