Skip to main content

Import the MapModel into a Component

Custom components can already interface with much of the functionality in VertiGIS Studio 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

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

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.

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>
);
}

Live Sample

Check out a live SDK sample that demonstrates injecting the map model into a component.

Next Steps

Learn more about Component Interactions

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

Learn how Components are Bound to Models in the Layout

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