PrintWidget Component

Overview

The PrintWidget React component integrates Esri's Print widget into your application. It allows users to export maps in various formats using a specified print service URL. The widget is rendered in a designated container and is attached to an Esri View instance (e.g., View or SceneView).

Features

• Renders the Esri Print widget into a specified container.
• Supports custom printServiceUrl for either public or organization-hosted print services.
• Automatically cleans up resources on component unmount.

Requirements

• Esri ArcGIS API for JavaScript v4.x.
• A valid printServiceUrl. Use the Esri public service or a custom service from your portal.

Installation

1. Install the Esri ArcGIS API for JavaScript dependencies:

   npm install @arcgis/core
   
   2.	Add the component to your project:
   •	Save the component code as PrintWidget.tsx in your project.

Props

• container (string): The ID of the HTML element where the Print widget will be rendered. • printServiceUrl (string): The URL to the print service. You can use the Esri public service or an organization-hosted service. • view (__esri.View): The Esri View instance (e.g., MapView or SceneView) where the widget will be attached.

Usage

Example

import React, { useRef, useEffect, useState } from "react";
import MapView from "@arcgis/core/views/MapView";
import Map from "@arcgis/core/Map";
import PrintWidget from "./PrintWidget";

const App = () => {
  const mapDiv = useRef < HTMLDivElement > null; // Map container reference
  const [view, setView] = (useState < __esri.MapView) | (null > null);

  useEffect(() => {
    if (!mapDiv.current) return;

    const map = new Map({
      basemap: "streets-navigation-vector",
    });

    const mapView = new MapView({
      container: mapDiv.current,
      map: map,
      center: [-118.805, 34.027], // Longitude, latitude
      zoom: 13,
    });

    setView(mapView);

    return () => {
      mapView.destroy();
    };
  }, []);

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div ref={mapDiv} style={{ flex: 1 }}></div>
      <div
        id="print-widget-container"
        style={{ width: "300px", padding: "10px" }}
      ></div>
      {view && (
        <PrintWidget
          container="print-widget-container"
          printServiceUrl="https://utility.arcgisonline.com/ArcGIS/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
          view={view}
        />
      )}
    </div>
  );
};

export default App;

Customization

Using a Custom printServiceUrl

Replace the printServiceUrl with the endpoint of your organization-hosted print service:

printServiceUrl="https://<your-portal>/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"

Styling the Widget

Customize the widget’s appearance using CSS by targeting the container element.

Cleanup and Notes

• The widget automatically cleans up on component unmount by calling printWidget.destroy(). • Ensure the container prop corresponds to a valid HTML element ID.

Troubleshooting

Widget Not Rendering

• Check that the container ID matches an existing element in your DOM. • Ensure the view prop is correctly initialized.

Slow Loading

• Preload resources like @arcgis/core/widgets/Print and @arcgis/core/widgets/Print.css. • Ensure your printServiceUrl is accessible and responds quickly.

This component encapsulates Esri’s Print widget for efficient use in React applications, simplifying the integration process.