symbolService | References | ArcGIS Maps SDK for JavaScript

import { generateSymbol } from "@arcgis/core/rest/symbolService.js";

Since: ArcGIS Maps SDK for JavaScript 4.25

Represents symbol service resources exposed by the ArcGIS REST API. This module provides resources to convert Scalable Vector Graphics (SVG) to CIMSymbols.

See also

Functions

Name	Return Type	Object
`generateSymbol`	`Promise<GenerateSymbolResponse>`

generateSymbol

Function

Converts a Scalable Vector Graphic (SVG) to a CIMSymbol.

If using a SVG string value in the GenerateSymbolParameters, the XML namespace (xmlns) must be defined. For SVGs defined in FormData or an HTMLFormElement, the name of the element in the form must be "svgImage", as shown in the examples below.

The returned CIMSymbol will always be a CIMPointSymbol with a CIMVectorMarker symbol layer where size = 10. To update the size of the symbol, use scaleCIMSymbolTo().

Signature: generateSymbol (url: string, params: GenerateSymbolParameters, requestOptions?: RequestOptions): Promise<GenerateSymbolResponse>

Parameters

Parameter	Type	Description
url	`string`	URL to the ArcGIS Server REST resource that represents a symbol service.
params	`GenerateSymbolParameters`	Input parameters for converting an SVG to CIM Symbol.
requestOptions	`RequestOptions`	Additional options to be used for the data request.

Returns: Promise<GenerateSymbolResponse>
A promise that resolves with the response of the generate symbol method that contains the CIM Symbol.

Examples

// Using a string.
const svgString = `
   <svg xmlns="http://www.w3.org/2000/svg" height="200" width="200">
     <path d="M150 0 L75 200 L225 200 Z" />
   </svg>
`;
const params = { svgImage: svgString };
symbolService.generateSymbol(symbolServiceUrl, params).then({symbol} => {
  // apply the CIMSymbol to a graphic
  graphicA.symbol = symbol;
});

// Using FormData.
const blob = new Blob([svgSymbol.trim()], { type: "image/svg+xml" });
const formData = new FormData();
formData.append("svgImage", blob, "symbol.svg");

const params = { svgImage: formData };
symbolService.generateSymbol(symbolServiceUrl, params).then({symbol} => {
  // apply the CIMSymbol to a graphic
  graphicB.symbol = symbol;
});

// Using HTMLFormElement.
<!-- HTML Element -->
<form name="uploadForm">
  <input type="file" name="svgImage" id="svgFile" />
</form>
// JavaScript
const uploadForm = document.forms["uploadForm"];
uploadForm.addEventListener("change", (event) => {
    const fileName = event.target.value.toLowerCase();
    if (fileName.includes(".svg")) {
        const params = { svgImage: uploadForm };
        symbolService.generateSymbol(symbolServiceUrl, params).then({symbol} => {
           // apply the CIMSymbol to a graphic
           graphicC.symbol = symbol;
        });
    }
});