Marker Rotation
Loading a PictureMarkerSymbol from an image url, this sample also demonstrates rotation and size of icons
varying based on data fields, to demonstrate wind direction and speed.
GeoBlazor
dymaptic
About this sample
This GeoBlazor sample, written in Blazor for .NET developers, demonstrates data-driven marker rotation and sizing from the ArcGIS Maps SDK for JavaScript via GeoBlazor's PictureMarkerSymbol, RotationVariable, and SizeVariable Razor components. The page shows a 2D map zoomed to South America rendered with the ArcGIS imagery basemap. A FeatureLayer of weather stations is overlaid on top, where each station is symbolized by a small blue arrow icon loaded from a Wikimedia SVG via PictureMarkerSymbol. There are no on-screen controls — the visualization itself does the work: each arrow's rotation angle is bound to the WIND_DIRECT field using geographic rotation, so arrows point in the direction the wind is blowing, while each arrow's size is scaled between 8 and 40 pixels based on the WIND_SPEED field via a SizeVariable. The user pans and zooms to explore the wind field. The sample is intended to demonstrate data-driven symbol rotation and sizing in a Blazor application without writing JavaScript.