Short answer: deploy the Esri proxy on a web server you control, set the ArcGIS SDK’s request proxy configuration before the map makes its first request, wait until the Angular 7 MapView has finished rendering, and then capture the map container with html2canvas. The proxy can make cross-origin map resources usable, but it does not turn html2canvas into a native browser screenshot. If DOM capture remains incomplete, use the map service’s REST export operation through a MapImageLayer for a server-rendered image.
What an Esri proxy does (and does not do)
An Esri proxy is an application component installed on your web server. It is not an Esri-hosted magic endpoint and it does not run automatically on the computer hosting ArcGIS Enterprise. Your Angular application sends selected ArcGIS requests to that proxy; the proxy forwards them to approved services and returns the response to the browser.
Browsers enforce same-origin rules. A map can load on screen while a canvas export fails when tile or image responses come from another origin without usable CORS headers. A proxy gives those resources a same-origin route. CORS is preferable when a service supports it, but Esri recommends a proxy fallback when support is absent or uncertain. WebGL map images likewise need to be same-origin, CORS-enabled, or proxied before their pixels can be used.
Do not confuse this with a screenshot server. The proxy only transports requests. html2canvas still reconstructs an image from the DOM and rendered elements; it does not capture the GPU framebuffer or bypass browser security.
#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
Before you configure Angular
Inventory every service origin
Record the URLs used by the basemap, tiled layers, feature layers, map-image layers, labels, elevation services and any custom overlays. Check each origin for CORS support. A single unhandled cross-origin image can taint the canvas even when the rest of the map is same-origin.
Choose CORS, a proxy, or both
- Use direct requests when the service sends the CORS headers your browser needs.
- Use a proxy for services without usable CORS, for browser workflows that cannot expose the service directly, or as a controlled fallback.
- Keep direct CORS and proxy routes together when different layers have different requirements.
Deploy the appropriate proxy implementation
Esri documents Java/JSP, PHP and ASP.NET resource-proxy implementations. Install one on an application web server, such as a path under your Angular site’s domain. Restrict allowed target hosts and schemes, require authentication when the service requires it, apply rate limits, and log failures. An unrestricted forward proxy can be abused to reach arbitrary internal or Internet destinations.
Configure the proxy before the first map request
The exact import and bootstrap code depends on whether your Angular 7 project loads the ArcGIS JavaScript SDK with its AMD loader, esri-loader, or another build setup. The SDK-level sequence is the same: set request configuration first, then construct the Map and MapView.
Global proxy URL
For an application where most ArcGIS requests should use one proxy endpoint, configure the global URL during Angular startup:
import { loadModules } from 'esri-loader';
export async function configureArcGISProxy(): Promise<void> {
const [esriConfig] = await loadModules(['esri/config']);
esriConfig.request.proxyUrl = '/proxy/Java/proxy.jsp';
}
Call configureArcGISProxy() before creating any Map, MapView or layer. If the proxy is hosted elsewhere, use its fully qualified HTTPS URL and configure your server’s CORS policy for your Angular origin.
URL-prefix rules for selective routing
Selective rules avoid proxying services that already have reliable CORS. Add a rule for each service prefix that needs forwarding (property names can vary slightly by SDK generation):
const [esriConfig] = await loadModules(['esri/config']);
esriConfig.request.proxyRules = [
{
urlPrefix: 'https://maps.example.com/arcgis/rest/services',
proxyUrl: '/proxy/Java/proxy.jsp'
},
{
urlPrefix: 'https://secure.example.net/arcgis',
proxyUrl: '/proxy/Java/proxy.jsp'
}
];
Place the most specific prefixes first if your SDK version evaluates rules in order. Verify the property names against the SDK generation used by the Angular 7 project; the important requirement is that the rule is installed before the first matching request.
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
Angular component sequence
This simplified component shows the ordering. Replace the service URL and proxy path with your own values.
Recommended Free Tools
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { loadModules } from 'esri-loader';
import html2canvas from 'html2canvas';
@Component({ selector: 'app-map-shot', template: '<div #mapViewNode class="map"></div>' })
export class MapShotComponent implements AfterViewInit {
@ViewChild('mapViewNode', { static: false }) mapViewNode!: ElementRef<HTMLDivElement>;
async ngAfterViewInit() {
const [esriConfig, Map, MapView, TileLayer] = await loadModules([
'esri/config', 'esri/Map', 'esri/views/MapView', 'esri/layers/TileLayer'
]);
esriConfig.request.proxyUrl = '/proxy/Java/proxy.jsp';
const map = new Map({ basemap: { baseLayers: [] } });
map.add(new TileLayer({
url: 'https://maps.example.com/arcgis/rest/services/Base/MapServer'
}));
const view = new MapView({
container: this.mapViewNode.nativeElement,
map,
center: [-96, 38],
zoom: 4
});
await view.when();
await view.goTo({ center: [-96, 38], zoom: 4 });
await html2canvas(this.mapViewNode.nativeElement, {
useCORS: true,
proxy: '/proxy/Java/proxy.jsp',
backgroundColor: '#ffffff',
scale: window.devicePixelRatio || 1
}).then(canvas => {
canvas.toBlob(blob => {
if (!blob) throw new Error('Canvas export returned no blob');
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'angular-map.png';
link.click();
URL.revokeObjectURL(link.href);
}, 'image/png');
});
}
}
view.when() confirms that the view is ready, not necessarily that every asynchronous layer has finished drawing. For a precise capture, wait for the required layer views or for a known loading indicator to disappear, then allow the final labels, popups and overlays to settle. Hide controls that should not appear and set the intended extent before invoking html2canvas.
What html2canvas can and cannot capture
Use the options deliberately
useCORS: truetells html2canvas to request images with CORS where possible.proxysupplies a proxy route for image resources that need server assistance. The endpoint must implement the request format expected by your html2canvas version.scalecontrols output pixel density; a larger value increases memory use and processing time.backgroundColorprevents an unwanted transparent background when the map container is visually opaque.width,height,xandycan constrain the captured region when you need a fixed output.ignoreElementsor adata-html2canvas-ignoreattribute can exclude zoom controls, attribution or other UI.
Fidelity limitations
html2canvas builds an image from DOM-visible information, so the result can differ from the live map. Canvas and WebGL layers may not reproduce exactly, CSS effects can be approximated, and cross-origin iframes cannot be rendered because the browser blocks access to their content document. Cross-origin images without CORS or proxy handling taint the canvas; reading pixels with toDataURL() or toBlob() then fails.
Validate the capture in browser tools
- Open DevTools Network and filter for the proxy path.
- Confirm each map request is sent to the expected proxy URL, returns a successful status and is not redirected to an untrusted origin.
- Inspect response headers and the browser console for CORS, mixed-content, authentication or certificate errors.
- Check that the map container has non-zero dimensions at capture time and that the generated image has the intended width and height.
- Test with every layer visible; a basemap-only success does not prove that feature, tile and map-image services are permitted.
When server-side export is the better answer
If the map contains WebGL content, protected services, cross-origin frames or layers that html2canvas consistently omits, use the ArcGIS map service REST export operation. A MapImageLayer can request a server-rendered image for a defined extent and size, avoiding DOM reconstruction.
const service = 'https://gis.example.com/arcgis/rest/services/Planning/MapServer/export';
const params = new URLSearchParams({
bbox: '-102,35,-94,40',
bboxSR: '4326',
imageSR: '4326',
size: '1600,900',
format: 'png32',
transparent: 'true',
f: 'image'
});
const response = await fetch(`${service}?${params}`);
if (!response.ok) throw new Error(`Export failed: ${response.status}`);
const imageBlob = await response.blob();
| Consideration | html2canvas in the browser | Map service export |
|---|---|---|
| Pixel fidelity | Approximates the rendered DOM; WebGL and CSS may differ. | Rendered by the map service for the requested extent and size. |
| Cross-origin layers | Requires CORS or a functioning proxy for every image. | Service-side rendering avoids browser canvas taint for included layers. |
| Authentication | Depends on browser cookies, tokens and proxy forwarding. | Requires the export request to carry valid service credentials. |
| Output dimensions | Bound by the container, scale and browser memory. | Set explicitly with export parameters, subject to service limits. |
| Dependencies | Angular view, browser rendering and html2canvas. | Map service export capability and a server request. |
| Implementation effort | Quick for ordinary DOM maps, but sensitive to layer and browser details. | More service-specific, with predictable image output. |
Troubleshooting common failures
The map is visible, but the output is blank
Check that the container has a width and height, capture after view.when() and after the target layers finish drawing, and verify that the map is not hidden by an ancestor with display:none. A zero-sized or off-screen container produces a blank canvas.
The canvas is tainted or pixel export throws a security error
Find the first image request from another origin in Network tools. Enable CORS on that service or route its URL through the Esri proxy, then keep useCORS enabled. Every image, including labels and custom overlays, must be handled.
Proxy requests return 404
An incorrect proxy location is a common cause. Open the proxy URL directly, confirm the web-server mapping and case-sensitive path, and ensure the Angular development server forwards that path to the application server. Do not assume a proxy installed for another application is available at the same URL.
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
The proxy returns 401, 403 or redirects to login
Pass the required token, cookie or authorization header through a secured server-side configuration rather than exposing long-lived credentials in client code. Confirm that the proxy’s allowed-target list includes the exact service host and that the service accepts the forwarded identity.
Only some layers are missing
Compare the complete origin inventory with proxy rules. Tile, feature, map-image and third-party basemap URLs often differ. Add a rule for each required prefix, or use the global proxy setting while diagnosing.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →The image looks different from the map
This is expected when html2canvas reconstructs DOM content. Wait for labels and popups, remove transient UI, use a stable scale, and prefer REST export when exact cartography matters.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability and security notes
- Proxy only the hosts that need it; unnecessary forwarding adds latency and server load.
- Use HTTPS end to end and keep service tokens out of the browser when the proxy can authenticate server-side.
- Set timeouts and handle partial layer failures so the UI can report which layer was unavailable.
- Large scale factors and full-page containers consume substantial browser memory; capture the smallest required region.
- Log proxy status, target host and failure reason without logging secrets. Rate-limit public endpoints.
Or skip the browser setup
For a public or otherwise reachable Angular map page, ScreenshotNeo provides a one-request screenshot API. It accepts the consent banner before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.
See the ScreenshotNeo API documentation for all options. The same endpoint supports full-page capture with lazy images, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, PDF paper and margin controls, custom CSS and JavaScript, click actions, selector waits, delays or network-idle waits, ad/tracker/request blocking, headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/angular-map -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/angular-map"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/angular-map' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo has 1,000 screenshots per month free with no card. Paid plans are $5 for 3,000 shots (Starter), $15 for 15,000 (Growth), $39 for 60,000 (Pro), $99 for 250,000 (Scale) and $249 for 1,000,000 (Business); yearly billing gives two months free, and every feature is on every plan. Create a free ScreenshotNeo account to try the endpoint.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsFrequently Asked Questions
Does installing the proxy on an ArcGIS Enterprise server make it an Esri-managed service?
No. The proxy remains an application component that you deploy and operate on your own web server; it is only co-located with ArcGIS Enterprise if you choose that architecture.
Can html2canvas capture a map inside a cross-origin iframe?
No. Browser security prevents the parent page from reading the iframe’s document. Capture the iframe’s own page with a service that can access it, or use the underlying ArcGIS service export instead.
Is a proxy required when every layer advertises CORS?
Not necessarily. Direct CORS requests can work without a proxy, but keep a restricted proxy fallback when support is uncertain or changes across the services used by the application.
Quick Recap
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.
