Custom HTML markers possible?

1208
1
01-26-2018 08:11 AM
ChrisRice5
New Contributor

This may be a simple questions. I've been evaluating the JavaScript 4 framework for use and so far its great! But i'm stuck on one simple task that seems to be common place in other frameworks. 

Can you make a 'marker' on the map that is just arbitrary HTML? For example my current app uses google maps and ember to make a dynamic SVG that i use to create a marker on the map with for things like planes, boats, cars, and people.  I'm able to alter the colors, animate it, scale and rotate it. Another example is in Google Maps I'm able to arrange custom HTML snippets and lock them to geographic point while still maintaining the ability to style them using CSS. 

The 3D maps for ArcGIS is really, really appealing but this is a killer. The documentation doesn't seem so clear about the ability for 'widgets' to be used inside a SceneView. All the examples seem to show 'widgets' just hovering over the map and nothing more. Using a CustomLayer with a custom Renderer doesn't seem to have a way to do this either as all the examples are related to spatial data display and not individual point data that may render and behave completely differently from each other. 

0 Kudos
1 Reply
ManuelBraunschweiler
New Contributor

Hi Chris

This answer might be a bit late, but here is the way I did what you want to achieve:
The SceneView of the API has the toScreen() function, which takes any 3D point on the map and returns that point's [x, y] pixel coordinates on the viewport (x is measured from the left edge of the screen and y from the top edge). So, whenever the camera changes, you can call toScreen() for every HTML marker element you have and update the marker's position on screen accordingly via CSS. 
If you want to test whether a marker is still on the screen, you can access the viewport's extends via the size property of the SceneView. Compare the marker's x and y coordinates to the viewport's size and decide whether the marker should still be displayed or not. 
I hope this helps.