SimpleMarkerSymbole path on SceneView

983
6
Jump to solution
01-07-2021 11:48 AM
AaronWD
New Contributor II

Hello,

Currently I have a SimpleMarkerSymbol that uses an SVG path to draw a symbol on a map view.

I am currently trying to transition to a SceneView but am having some difficulty with this.

Simply moving my existing code over doesn't work as I receive the warning "[esri.symbols.IconSymbol3DLayer] path cannot be mapped to Icon symbol. Fallback to "circle"".

I've looked through the documentation but am having some difficulty.

 

Could someone point me in the right direction to achieve this?

 

Thanks in advance.

 

Aaron

1 Solution

Accepted Solutions
6 Replies
VictorBerchet
Occasional Contributor
AaronWD
New Contributor II

I have, but with no luck so far.

for reference, here is the code that defines my symbol, along with what's in the svg.

Any thoughts as to what I'm doing wrong?

var iconSymbol = {
	type: "point-3d",
	symbolLayers: [
		{
			type: "icon",
			size: 12,
			resource: {
				href: "Images/test.svg"
			},
			material: {
				color: "green"
			},
			outline: {
				color: "white",
				size: 1
			}
		}
	]
};

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg> 

 

0 Kudos
AaronWD
New Contributor II

I got it. It had to do with the formatting of my svg file.

I didn't realize some of the header information was necessary.

Thanks again for the help.

0 Kudos
VictorBerchet
Occasional Contributor

It's working for me in this CodePen.

(I have inlined the SVG using a data url)

0 Kudos
AaronWD
New Contributor II

Sorry to bother you with one more question.

Unless I'm just overlooking it (completely possible), I can't seem to find an angle property to rotate the symbol. I could transform it in the svg, but a simple angle would be easier.

Any thoughts?

0 Kudos
VictorBerchet
Occasional Contributor

The API does not seem to allow rotating an IconSymbol3DLayer (maybe you can enter a feature request - this should be possible to implement using CSS transforms).

For now what you could do is to transform the SVG.

An other possibility is to use a 3d model. ObjectSymbol3dLayer has tilt, roll and heading to rotate the model in 3d.

0 Kudos