Import the MapModel into a Component

Custom components can already interface with much of the functionality in Geocortex Web through commands and operations. However, sometimes more direct access to the data structures that power components is needed.

This article will teach you how to inject the Map model into a custom component so you can directly access the Esri Map object and add a graphics layer to it.

Prerequisites

• Download and setup the Geocortex Web SDK.
• Check out the deployment instructions to learn more about deploying custom code to a Geocortex Web App.

Create a Custom Component With a Model

First, we will create a custom component that has an associated model.

tip

To learn more about registering and using a component in the layout, check out the component reference

• Component
• Model
• Layout

src/components/CustomComponent/CustomComponent.tsx

import React from "react";

import {

LayoutElement,

LayoutElementProperties,

} from "@vertigis/web/components";

import Button from "@vertigis/web/ui/Button";

import { CustomModel } from ".";

export default function CustomComponent(

props: LayoutElementProperties<CustomModel>

) {

return (

<LayoutElement {...props}>

<Button onClick={() => props.model.addGraphic()}>

Add a Graphic to the Map

</Button>

</LayoutElement>

);

}

Inject the Map Model into the Component

Next, we can inject the Map model, which is the type MapExtension, into the component using the model injection pattern.

@serializable

export default class CustomModel extends ComponentModelBase {

@importModel("map-extension")

mapExtension: MapExtension | undefined;

...

}

Use the Map Model to Add a New Graphics Layer

Finally, we can use the MapExtension to add a custom graphics layer to the ArcGIS Map object.

• Component
• Model
• UI

src/components/CustomComponent/CustomComponent.tsx

import React from "react";

import {

LayoutElement,

LayoutElementProperties,

} from "@vertigis/web/components";

import Button from "@vertigis/web/ui/Button";

import { CustomModel } from ".";

export default function CustomComponent(

props: LayoutElementProperties<CustomModel>

) {

return (

<LayoutElement {...props}>

<Button onClick={() => props.model.addGraphic()}>

Add a Graphic to the Map

</Button>

</LayoutElement>

);

}

Next Steps

Learn more about Component Interactions

Learn more about how components interact with each other through models and services

Get Started

Learn how Components are Bound to Models in the Layout

Learn how layout structure can be used to bind components to their required models

Get Started