Custom Styled GeoJSON Layers
This map showcases Seattle tourist attractions with custom styling using the ProGeoJSONLayer and GeoJSON style properties.
Click on any feature to see its popup with title and description. The data includes points (landmarks),
lines (walking routes), polygons (districts), and multipoints with various marker colors, sizes, and stroke styles.
Toggle Layers:
GeoBlazor
dymaptic
About this sample
This GeoBlazor Pro sample, written in Blazor for .NET developers, demonstrates SimpleStyle / GeoJSON CSS rendering of inline GeoJSON from the ArcGIS Maps SDK for JavaScript exposed through GeoBlazor Pro's ProGeoJSONLayer Razor component. The page shows a 2D navigation basemap centered on Seattle. Above the map are four checkbox toggles for the layer set: Tourist Points, Neighborhoods, Transportation Routes, and Public Services. Each toggle controls a ProGeoJSONLayer whose source is an embedded GeoJSON feature collection that uses Mapbox-style marker-color, marker-size, marker-symbol, fill, fill-opacity, stroke, stroke-width, and stroke-dasharray properties; the layer renders these directly when ApplyStyles is true. Below the map is a row of feature buttons, one per visible feature, color-matched to the styling. Clicking a button highlights the feature, zooms to a buffered extent of its geometry, and opens its default popup. The sample is intended to demonstrate styling inline GeoJSON without writing a renderer.