The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →To capture an Angular 7 map that uses ArcGIS services, deploy an Esri resource proxy on a web server you control, configure the ArcGIS JavaScript SDK to use it before map requests begin, and capture only after the MapView has rendered. Then try client-side rendering with html2canvas if you need the surrounding page too. It reconstructs the DOM; it is not a literal browser screenshot and cannot bypass cross-origin rules. If that approach cannot produce a complete map image, use the map service’s export operation through an ArcGIS map-image layer instead.
What the Esri proxy does—and what it does not do
An Esri proxy is a server component that forwards requests from your application to configured services. It is installed on a web server you operate; it is not a special Esri-hosted endpoint. Esri documents Java/JSP, PHP and ASP.NET implementations. The proxy can help when a service or browser workflow does not provide usable CORS access, but it does not turn a DOM-to-image library into a browser screenshot tool.
For a map, there are two related but separate jobs:
- Loading map resources: the ArcGIS SDK requests basemaps, tiles, features and map images. Its request configuration can route matching service requests through the Esri proxy.
- Making an image:
html2canvasreconstructs page content into a canvas. It cannot access pixels the browser has protected, and it may not reproduce a WebGL map exactly.
Use CORS when the service supports it and the browser can access it. Esri’s JavaScript Maps SDK assumes CORS support, while Esri recommends configuring a proxy if you are unsure whether the services in your application support it. WebGL map imagery must be same-origin, CORS-enabled or proxied if it needs to be read as pixels.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
- Explore confidently with the reliable handheld GPS
- 2.2” sunlight-readable color display with 240 x 320 display pixels for improved readability
- Preloaded with Topo Active maps with routable roads and trails for cycling and hiking
- Support for GPS and GLONASS satellite systems allows for tracking in more challenging environments than GPS alone
- 8 GB of internal memory for map downloads plus a micro SD card slot
Inventory the services and choose what to proxy
Before changing the app, list every service origin used by the view: basemap, tiled layers, feature layers and map-image layers. Check the browser’s Network panel while the map loads. Note which requests fail and whether the service is on a different origin. A map can appear partially functional even when one layer is being blocked, so test the layers individually rather than assuming the basemap tells the whole story.
Prefer direct CORS access when it works. Route only the services that need proxying; selective URL-prefix rules make the behavior easier to reason about than sending every request through the proxy. The exact rule syntax and module loading depend on the ArcGIS JavaScript SDK generation and on how the Angular 7 project loads it.
Deploy and secure the proxy
- Choose an implementation. Install the Esri resource proxy variant matching your server environment, such as Java/JSP, PHP or ASP.NET, following the implementation’s own setup and security guidance.
- Host it on your application infrastructure. Confirm the deployed path from the browser’s point of view, for example
/proxy/Java/proxy.jsp. A wrong path is a common cause of failed proxy requests. - Restrict forwarding. Configure allowed target services rather than permitting arbitrary URLs. An unrestricted forwarder can be abused to send requests through your server.
- Protect credentials. Do not put service secrets in client-side JavaScript. Follow the proxy and ArcGIS authentication guidance for the credentials your services require; review access controls, logging and exposure before making the endpoint public.
- Test the endpoint directly within the app’s intended access model. Verify that it returns the expected service response and that your host, TLS setup and authentication policies permit the browser’s request.
Configure the ArcGIS SDK before layer requests
Set the SDK request configuration before constructing the map or adding layers that need the proxy. If the app uses esri-loader, the following shows the SDK-level global configuration pattern. Substitute the real proxy path and adapt module loading to the project’s existing ArcGIS SDK setup:
import { loadModules } from 'esri-loader';
export function configureArcGISProxy(): Promise<void> {
return loadModules(['esri/config']).then(([esriConfig]) => {
esriConfig.request.proxyUrl = '/proxy/Java/proxy.jsp';
});
}
// In app startup, wait for configuration before creating the map or layers.
configureArcGISProxy().then(() => {
// Create the ArcGIS Map, MapView, and layers here.
});The significant part is the ordering: the SDK must know the proxy URL before it sends a request that needs it. If your build loads the SDK differently, import or access the same SDK configuration module through that loader and set the equivalent property before creating layers.
Route only selected service origins
For selective routing, use the SDK’s URL-prefix proxy rules rather than changing every request globally. The SDK-level pattern is:
Rank #2
- Compact and lightweight GPS handheld navigator boasts an anti-slip design offering a bright 3.2" screen that is sunlight readable, even in bright sunlight, plus, physical buttons provide more versatility in any conditions
- Get multi-GNSS support(GPS+GALILEO+BEIDOU+QZSS) for superior positional accuracy,so you know exactly where you are,location precision within 6 ft
- The handheld GPS navigator uses GPS technology to capture your trip or waypoint so you can guide back to your starting position
- Equip with 3-axis compass and barometric altimeter,follow your bearing on the digital compass, which provides an accurate heading even when stationary
- Hike in any weather with the water-resistant design (rated to IP66) ,Rechargeable battery can provide up to 36 hours of battery life in full charge, recharge easily with a standard USB-C cable
esriConfig.request.proxyRules = [
{
urlPrefix: 'https://services.example.com/arcgis/rest/services',
proxyUrl: '/proxy/Java/proxy.jsp'
}
];Replace the example prefix with the exact service prefix that should be routed. Confirm the configuration property and accepted rule shape in the documentation for the ArcGIS SDK version used by the project; Angular 7 itself does not determine that API. A rule that is too broad can send unrelated requests through the proxy, while one that is too narrow may leave a failing layer untouched.
Wait for the intended map state before capturing
Do not capture immediately after creating the Angular component. Wait for the MapView to finish loading and for the extent and layers you want to show to be ready. For example, with a MapView reference, use its readiness promise before invoking the capture function:
view.when().then(() => {
// Set or verify the desired extent, visible layers, popup state,
// labels, and overlays before capturing the map container.
captureMapContainer();
});Also decide what should be visible: open or closed popups, selected features, labels, application controls and any overlays. If a layer is still loading when capture begins, the resulting image may omit it even though the map later looks correct.
Capture the Angular map container with html2canvas
Install and import html2canvas using the package manager and module conventions already used by the Angular 7 project. Pass the map container element to it after the view is ready:
import html2canvas from 'html2canvas';
function captureMapContainer(): void {
const container = document.getElementById('mapViewDiv');
if (!container) {
throw new Error('Map container #mapViewDiv was not found');
}
html2canvas(container, {
useCORS: true,
// Set proxy only if you have deployed a proxy compatible with
// html2canvas's proxy option; the Esri proxy is not automatically one.
// proxy: '/your-html2canvas-compatible-proxy'
}).then((canvas) => {
document.body.appendChild(canvas);
canvas.toBlob((blob) => {
if (!blob) {
throw new Error('Could not create an image blob from the canvas');
}
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'map.png';
link.click();
URL.revokeObjectURL(link.href);
}, 'image/png');
});
}Give the map container an explicit size in the Angular template and CSS. The image dimensions follow the rendered element and capture environment; if you need a particular output size, set the layout and device scale deliberately and inspect the result. The useCORS option asks html2canvas to use CORS-enabled images when possible. Its proxy option is for an html2canvas-compatible image proxy; do not assume that an Esri resource proxy implements the format that html2canvas expects.
Rank #3
- Large 2.6” sunlight-readable color display for easy viewing
- Expanded global navigation satellite systems (GNSS) and multi-band technology allow you to get optimal accuracy in challenging locations, including steep country, urban canyons and forests with dense trees
- Includes routable TopoActive mapping and federal public land map (U.S. only)
- Go-anywhere navigation with 3-axis compass and barometric altimeter
- Compatible with the Garmin Explore website and app (compatible smartphone required) to help you manage tracks, routes and waypoints and review statistics from the field
html2canvas does not take a literal GPU or browser screenshot. It rebuilds an image using DOM-visible information, so the result can differ from the live view. Cross-origin iframes cannot be read, and cross-origin images that lack CORS or suitable proxy handling can taint the canvas and prevent exporting its pixels. ArcGIS maps may use canvas or WebGL rendering, which adds another reason to verify the exact output rather than infer success from a visible live map.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use map service export when DOM capture is incomplete
If the required deliverable is the map itself rather than the Angular page around it, use the ArcGIS map service export REST operation through a MapImageLayer where the service supports it. This delegates image generation to the map service instead of asking html2canvas to reconstruct the rendered DOM. The operation is a better fit when browser-side cross-origin restrictions or client-rendered map content make a complete canvas unreliable.
Choose based on the output you need:
| Factor | html2canvas of the map container | Map service export through MapImageLayer |
|---|---|---|
| Pixel fidelity | Reconstructs DOM-visible information; may differ from the live map, especially for canvas/WebGL content. | Produces an image from the service’s map export operation; it does not reproduce unrelated Angular controls or page overlays. |
| Cross-origin layers | Requires same-origin, CORS or compatible proxy handling for image pixels; cannot read cross-origin iframe documents. | Uses the map service export path for the map image; service access and authentication still apply. |
| Authentication and security | Uses browser-accessible resources and is subject to browser security rules. | Uses the service’s access model; credentials and access must still be handled securely. |
| Output dimensions | Based on the rendered container and capture settings. | Requested from the export operation for the desired extent and image size. |
| Browser rendering dependency | High: depends on the rendered page state and html2canvas reconstruction. | Lower for generating the map image; browser integration is still needed to request and display or save it. |
| Implementation complexity | Quick to try for a page-level capture, but cross-origin and rendering edge cases can be difficult. | Requires service and layer support and an export-oriented workflow, but avoids relying on a DOM reconstruction for the map image. |
Use the export route only when the service supports the operation and the required map content can be represented by that service. If the goal includes Angular UI elements, combine a service-generated map image with a separate page capture strategy or retain client rendering after resolving its access limitations.
Or skip the browser setup
If you need a screenshot of a publicly reachable map page rather than a service-generated map image or an authenticated internal app, ScreenshotNeo can capture the page through one API request. It is not a replacement for configuring ArcGIS service access in your application.
Quick Recap
For a public page, the cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace the target URL with the deployed Angular map page. See the ScreenshotNeo API documentation for request details. ScreenshotNeo removes cookie banners, newsletter popups and chat widgets before capture; bot checks, blank pages and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for the free plan.
Troubleshooting common failures
- Proxy requests return 404: check the deployed path and verify it is reachable from the application origin. A correct local path in source code does not guarantee the proxy was deployed there.
- The map loads, but one layer is missing: inspect that layer’s failed requests and service origin. Add or correct a selective proxy rule only if the service cannot provide usable CORS.
- Requests still go directly to the service: configure the SDK before creating the relevant layers, and check whether the actual URL matches the configured prefix.
- The page is visible but the exported canvas fails: a visible cross-origin image may still taint the canvas. Check CORS and proxy handling; for an ArcGIS map image, consider the service export route.
- The captured map is blank or incomplete: wait for the view and layers to render, confirm the container has nonzero dimensions, and verify popups and overlays are in their intended state. WebGL or canvas rendering may not be faithfully reconstructed.
- The Esri proxy does not fix html2canvas: SDK requests and html2canvas’s image-loading proxy are separate mechanisms. Confirm that the proxy supplied to html2canvas is compatible with that library, or use server export.
- A cross-origin iframe disappears: html2canvas cannot access another origin’s frame document. Capture that content through an authorized source or omit the frame.
Validate the finished image
- Open browser developer tools and inspect Network requests for the map services, proxy path, status codes and blocked requests.
- Check that the desired extent, visible layers, labels and overlays have actually rendered before capture.
- Open the saved PNG and inspect edges, transparency, dimensions and missing content rather than relying only on the live map appearance.
- Test with the same deployment origin, authentication model and browser conditions as the intended users; a local development view can behave differently from the published app.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
