symbolService

Method Overview

Method Details

generateSymbol(url, params, requestOptions){Promise<GenerateSymbolResponse>}

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 cimSymbolUtils.scaleCIMSymbolTo().

Parameters

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 optional Additional options to be used for the data request (will override requestOptions defined during construction).

Returns

Type	Description
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;
        });
    }
});

Type Definitions

GenerateSymbolParameters Object

Input parameters for the generateSymbol method.

Property

svgImage String|FormData|HTMLFormElement optional The SVG image to convert. Can be an SVG string value, form data, or form element. When providing the SVG from FormData or HTMLFormElement, the name of the element in the form must be "svgImage". When providing the SVG from a string, the XML namespace (xmlns) must be defined.

GenerateSymbolResponse Object

The response of the generateSymbol method.

Property

symbol CIMSymbol The CIMSymbol created from the generateSymbol method.