topic Re: Using url property of PictureMarkerSymbol on 3d map in ArcGIS JavaScript Maps SDK Questions

Using url property of PictureMarkerSymbol on 3d map

ZackMarble — Tue, 14 Mar 2017 21:28:57 GMT

The API for JavaScript reference says that PictureMarkerSymbol can render Point graphics in either a 2D MapView or 3D SceneView using an image. I can get the example to work on a 2D map but when using a 3D map, nothing is rendered.

Trying to test, I changed the url from a web http URL to a data URI. When I did that, it rendered correctly in 2D and 3D.

I don't believe it is a CORS problem because: 1) As stated the URL worked on 2D map, 2) I also tried a locally hosted image with a relative path, and 3) Looking at the new Symbol Playground I am seeing the same behavior. If you click on PictureMarkerSymbol you see a yellow square with black JS drawn over Southern California, but if you switch to 3D, it disappears.

Since it's not working on the esri playground I think it must be a code issue instead of a configuration issue. So is this a bug in the API the way the url property is used? Or do you have to include extra steps to make it render?

Re: Using url property of PictureMarkerSymbol on 3d map

ThomasSolow — Wed, 15 Mar 2017 13:45:51 GMT

This appears to be a bug in the JS API. Glancing at the API issues, this has been reported.

I think the culprit is esriRequest, which is being used to fetch the image data.

Re: Using url property of PictureMarkerSymbol on 3d map

ZackMarble — Wed, 15 Mar 2017 20:37:22 GMT

Well that's a bummer, but thanks for the info!

Re: Using url property of PictureMarkerSymbol on 3d map

ThomasSolow — Wed, 15 Mar 2017 21:04:37 GMT

It should work if you host the image locally rather than getting it from another domain.

Another possible workaround would be to encode the image in base64 and use a dataURI instead of a URL. Using this, your url parameter would look something like: "data:image/svg+xml;base64,<svg xml string in base64 encoding>". For a jpeg, it would look like: "data:image/jpeg;base64,<jpeg binary encoded in base64>".

Note: due to another issue (possibly another bug) you can't have uft8 encoded svgs on 3D maps.

You can encode strings in the browser with btoa or check google, I'm sure there's plenty of websites that will allow you to upload an image and give you back a base64 string.

Re: Using url property of PictureMarkerSymbol on 3d map

KellyHutchins — Thu, 16 Mar 2017 20:19:46 GMT

Chrome Dev tools has the ability to create data uris from your image.

http://deanhume.com/home/blogpost/quick-tip--create-data-uris-using-chrome/8112

Re: Using url property of PictureMarkerSymbol on 3d map

ZackMarble — Thu, 16 Mar 2017 21:38:17 GMT

Yes, the data URI works in both 2D and 3D. I don't think I can make that work since I will be getting the URLs from a rest payload.

I was using 4.2 and the locally hosted images would not work in 3D. However, I updated to 4.3 and that seems to be fixed.

It seems like that's the best I can do for now. I'm hoping the URL will be fully functional in a future release. Thanks!