Skip to main content

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.