sel-custom-esri-print v0.0.5
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
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.