SVG path for LayerDrawingOptions?

AndyMorgan1 — Sat, 11 Dec 2021 06:09:02 GMT

Can a SimpleMarkerSymbol, created from an SVG path, be used as a renderer in LayerDrawingOptions for DynamicMapServiceLayers? See my example below. I don't get any errors. It simply doesn't show the SVG (red triangle) symbol for the fire station layer features - layer 7. The same SVG symbol displays fine if I apply it to a graphic and add the graphic to the map, but nothing appears when applied to a dynamic map service layer. My ultimate goal is to use custom SVG path text (e.g. "M100, 100......") with UniqueValueRenderer symbols.

<!DOCTYPE html>
<html>
<head>
<title>SVG render test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dojox/widget/ColorPicker/ColorPicker.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}

</style>
<script src="https://js.arcgis.com/3.17/"></script>

<script>
require([
"esri/map", "esri/geometry/Point", 
"esri/graphic", "esri/SpatialReference", "esri/geometry/Extent", 
"esri/Color", "esri/layers/ArcGISDynamicMapServiceLayer", 
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", 
"esri/renderers/SimpleRenderer", "esri/layers/LayerDrawingOptions", "esri/config", 
"dojo/_base/array", "dojo/dom-style", 
"dojo/domReady!"
], function(
Map, Point,
Graphic, SpatialReference, Extent, 
Color, ArcGISDynamicMapServiceLayer,
SimpleLineSymbol, SimpleMarkerSymbol, SimpleFillSymbol,
SimpleRenderer, LayerDrawingOptions, esriConfig,
arrayUtils, domStyle
) {

var app = {};

app.defaultExtent = new Extent(-97.78219462135767, 30.25811946558375, -97.6972260613063, 30.30040143951408, 
new SpatialReference({ wkid: 4326 })
);


app.map = new Map("map", {
extent: app.defaultExtent,
sliderPosition: "bottom-left",
sliderStyle: "small"
});

app.layerTestURL = "http://services.nationalmap.gov/arcgis/rest/services/structures/MapServer";
app.layerTest = new ArcGISDynamicMapServiceLayer(app.layerTestURL);

app.map.addLayer(app.layerTest);

app.layerTest.on("load", function (e) {
resymbolizeTestLayer();
});


function resymbolizeTestLayer() {

var iconPath = "M100,100 L300,100 L200,300 Z";

var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath(iconPath);
markerSymbol.setColor(new Color([220, 10, 20, 1]));
markerSymbol.setOutline(null);

var layerDrawingOptions = [];
var drawOpt = new LayerDrawingOptions();
drawOpt.renderer = new SimpleRenderer(markerSymbol);
layerDrawingOptions[7] = drawOpt;
app.layerTest.setLayerDrawingOptions(layerDrawingOptions);
}

});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: SVG path for LayerDrawingOptions?

thejuskambi — Wed, 07 Sep 2016 21:10:24 GMT

Since GraphicLayers are drawn on the client side using SVG, the STYLE_PATH is supported. whereas, DynamicLayers are returned from the server, you would also need to check the REST API supported options Symbol Objects. In short no you cannot use setPath for setLayerDrawingOptions.

Re: SVG path for LayerDrawingOptions?

AndyMorgan1 — Sat, 11 Dec 2021 06:09:04 GMT

This is my workaround for replacing default feature symbols with custom (non ArcGIS server-side) symbols when dealing with a dynamic map service layer. It's true, you cannot apply SVG paths unless it's a client side graphic. However, it may not be desirable to introduce a separate graphic layer if you just need to directly re-symbolize a dynamic layer's features. The best alternative I see is to create a custom png or jpg and then convert the image into base 64 data URI format. There are free online tools available for generating the portion needed for the "imageData" parameter.

var imgDataGreenValveIcon = "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4AkNDjYKRr1e7wAAAJBJREFUOMtjYBgFVAdODY7/KVHLhFthHhs5FjPh1nD5J4NDqQCpvmDC6wqHM+/RNRMKEiZiwso007eW2PAlykBe8S9NxEYWE7VTCdEG7jtgIkg1A/c17GdkOND9YV+DBTdFBn56ztewr2E/I0Kk/du+Bgs2sg08M3NjI6Zo++99DfuZSct6toWC1M6mo4B4AABZQDTkVUGpogAAAABJRU5ErkJggg==";
                  
var picSymbol = new PictureMarkerSymbol({
  "type": "esriPMS",
  "imageData": imgDataGreenValveIcon,
  "contentType": "image/png",
  "width": 20,
  "height": 20
});‍‍‍‍‍‍‍‍‍

topic SVG path for LayerDrawingOptions? in ArcGIS JavaScript Maps SDK Questions

SVG path for LayerDrawingOptions?

Re: SVG path for LayerDrawingOptions?

Re: SVG path for LayerDrawingOptions?