The ExternalGraphic element in a Symbology Encoding file declares its graphic either in an OnlineResource tag, as a URL or as a file path , or in a InlineContent tag, using a base64-encoded image for example.

The different ways to define an ExternalGraphic are:

  • Using a location on the internet:

<ExternalGraphic>
  <OnlineResource xlink:type="simple" xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/1d/Placemark-globe.svg"/>
  <Format>image/svg+xml</Format>
</ExternalGraphic>

  • Using a relative path on disk:

<ExternalGraphic>
  <OnlineResource xlink:type="simple" xlink:href="./obstacles/crane.png"/>
  <Format>image/png</Format>
</ExternalGraphic>

  • Using a dynamic path, relying on a property of the feature:

<ExternalGraphic>
  <OnlineResource xlink:type="simple" xlink:href="./obstacles/${obstacleTypeProperty}.png"/>
  <Format>image/png</Format>
</ExternalGraphic>

  • Using an InlineContent element: 

<ExternalGraphic>
<InlineContent encoding="base64">...(Base64-encoded String representation of the icon)</InlineContent>
<Format>image/png</se:Format>
</ExternalGraphic>

In LuciadRIA, you can also map the ExternalGraphic elements to your own icon images. To map them to other icon images, pass an IconProvider to the SEPainterFactory functions that parse the Symbology Encoding file. For each ExternalGraphic it encounters in the source file, LuciadRIA prompts the IconProvider so that it can give a distinct icon image, URL, or file path.

This program shows an example implementation of an IconProvider. 

const iconProvider = {
  getIcon(uri: string): HTMLImageElement | HTMLCanvasElement | string {
    if (uri === "the_external_graphic_to_change") {
      //provide a custom icon for the ExternalGraphic with above identifier
      return "path/to/my/icon.png";
    } else {
      // Simply returning the input string will make RIA handle the ExternalGraphic as it normally would
      return uri;
    }
  }
}

// Pass the iconProvider as an option to the SEPainterFactory method, then use the painter as usual
createPainterFromURL("style.xml", {iconProvider: iconProvider}).then(function(painter) {
  map.layerTree.addChild(new FeatureLayer(model, {
    painter: painter
  }));
});