nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

SimpleMarkerSymbole path on SceneView

AaronDouglas512

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

Find more posts tagged with

Accepted answers

VictorBerchet

Have you tried passing an href to your SVG ?

See https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-IconSymbol3DLayer.html#resource

All comments

VictorBerchet

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.

AaronDouglas512

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?

VictorBerchet

It's working for me in this CodePen.

(I have inlined the SVG using a data url)

AaronDouglas512

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.

AaronDouglas512

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>

VictorBerchet

Have you tried passing an href to your SVG ?

See https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-IconSymbol3DLayer.html#resource

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.