cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
dkbollig
Level: Power Up

Power App Component Framework with ArcGis Embed

Hey All

 

I have been working to see if I can create an embed of an arcgis map but I find I am having a hard time with typescript errors. For example when using the typescript library of arcgis-js-api it --  "Can't resolve 'esri/Maps'".  I have attached a standard html / javascript implementation example. 

 

https://codepen.io/dkbollig/pen/WNNyWzm?&editable=true&editors=100

 

Thanks for any help on this.

2 REPLIES 2
Community Support Team
Community Support Team

Re: Power App Component Framework with ArcGis Embed

Hi @dkbollig ,

Do you want to create an embed of an arcgis map in PowerApps?

Actually, in PowerApps it's not supported to connect with arcgis map currently.

If you want to use a map in PowerApps, I suggest you try Google map or bing map.

Here are docs about how to use these two maps in PowerApps for your reference:
https://community.dynamics.com/crm/b/magnetismsolutionscrmblog/posts/embedding-maps-into-a-powerapps...

https://powerapps.microsoft.com/en-us/blog/image-control-static-maps-api/

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
dkbollig
Level: Power Up

Re: Power App Component Framework with ArcGis Embed

Wanted to clarify I created a PCF using arcgis-js-api and esri-loader to create a map. Here is the code below on how I achieved it.

 

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import { setDefaultOptions, loadModules } from "esri-loader";

export class TerritoryComponent
  implements ComponentFramework.StandardControl<IInputs, IOutputs> {
  map: __esri.Map;
  mapView: __esri.MapView;
  private _mapContainer: HTMLDivElement;
  /**
   * Empty constructor.
   */
  constructor() {}

  /**
   * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
   * Data-set values are not initialized here, use updateView.
   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
   * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
   * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
   * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
   */
  public init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
  ) {
    // Add control initialization code

    this._mapContainer = document.createElement("div");
    this._mapContainer.setAttribute("id", "mapNode");
    this._mapContainer.setAttribute("style", "height:90vh;");

    container.append(this._mapContainer);

    setDefaultOptions({ css: true });

    loadModules(["esri/views/MapView", "esri/WebMap"])
      .then(([MapView, WebMap]) => {
        // then we load a web map from an id
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "{WebMap ID Here}"
          }
        });
        // and we show that map in a container w/ id #viewDiv
        var view = new MapView({
          map: webmap,
          container: "mapNode"
        });
      })
      .catch(err => {
        // handle any errors
        console.error(err);
      });
  }

  /**
   * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
   */
  public updateView(context: ComponentFramework.Context<IInputs>): void {
    // Add code to update control view
  }

  /**
   * It is called by the framework prior to a control receiving new data.
   * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
   */
  public getOutputs(): IOutputs {
    return {};
  }

  /**
   * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
   * i.e. cancelling any pending remote calls, removing listeners, etc.
   */
  public destroy(): void {
    // Add code to cleanup control if necessary
  }
}

 

Helpful resources

Announcements
thirdimage

Power Apps Super User Class of 2020

Check it out!

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

SecondImage

Difinity Conference

The largest Power BI, Power Platform, and Data conference in New Zealand

Top Solution Authors
Top Kudoed Authors (Last 30 Days)
Users online (5,584)