If you’ve been wanting to learn about ArcGIS styles or use mobile style files in your app built with ArcGIS Maps SDKs for Native Maps, this blog is for you. Know that if you read on, you’re liable to get your sparkle on!

In this blog, I’ll show you how I take the Malibu data used in Native Maps SDKs tutorials and change its symbols for its feature layers of points (trail heads), lines (trails), and polygons (parks) into glowing, besparkled symbols using the Firefly style, which was created by John Nelson.

In this blog, you’ll see me use ArcGIS Pro to create a mobile style file to fill with styles I want. I add styles to it from the Firefly style, then I show how you can grab other styles and add them to the same mobile style file. Lastly I use the mobile style file in my app to style the Malibu layers.

While the Firefly style captures wonderful bedazzlement, you may be more interested in one of the many other styles available (some highlighted on this ArcGIS Pro page), including styles specific to your industry, such as this government style.

But first, a quick look at styles across the system

Across the ArcGIS system, a style can mean anything from applying characteristics, such as shape, to completely changing a layer’s symbology. It can even mean using attributes (data fields) to drive the appearance of a multi-layered symbol. So I thought it might be helpful to do a bit of a style roundup before we home in on mobile styles.

• ArcGIS Pro styles let you apply the same style of symbols, colors, color schemes, layout items, or label placements across maps using a .stylx file. They can be created and shared between any ArcGIS Pro users.  You can think of mobile styles as a type of ArcGIS Pro style (.stylx file) but with limitations. There are also several different style types that can be used by ArcGIS Pro (described in the table on the ArcGIS Pro Style page).
• Mobile styles and web styles are styles you can use in native apps with some limitations, which you can read about in their respective sections on the ArcGIS Pro Style page. These styles are the ones to use for apps you build using Native Maps SDKs.
• You may hear a renderer be referred to as a way to style symbols in a layer. This blog will use a simple renderer to apply the sparkles (firefly style) to layers.
• Dictionary symbol styles in Native Maps SDKs (DictionarySymbolStyle) are typically used for complex symbols such as military symbols, which are multi-layer and attribute-driven. This style includes an Arcade script that assembles each symbol from multiple parts based on the logic you write in the script and/or multiple fields, so often the symbols are very data-specific.
• Basemap styles are basemaps hosted by Esri that you can use in your native apps. They’re unrelated to the above styles and are typically used to provide context for your other map layers. For this example, I’ll use a dark basemap style, ArcGISDarkGray, to really show the glow of the firefly style. You can see a full list of basemap styles here for .NET Maps SDK, but it is basically the same list for most ArcGIS SDKs.

Let’s get stylin’!

1. Peruse styles

First, I went to arcgis.com to see what styles were available. I chose Firefly.
I love the Firefly style because it can make your map elements appear to glow and sparkle. But let’s suppose you want a different style. A multitude of styles are available for you to choose from in John Nelson’s gallery as well as in ArcGIS Online.
The following images show how you can find a style you want to try.

After you enter “style files,” the public style files display. You can type additional or different keywords in the search to filter the results, or you can browse all style files. For example, you can type “firefly style for arcgis pro” to quickly get to the style used in this blog.

2. Download the style file you want

I chose the Firefly style because it can make your map elements appear to glow and sparkle.

I downloaded Firefly to my computer by going to John Nelson’s style files and clicking the Download button for Firefly style for ArcGIS Pro. I downloaded the style to my project folder (the folder with my .csproj file).

3. Copy the symbols you want into the mobile style file

1. In ArcGIS Pro, in the Catalog pane’s Project category (tab), I created a mobile style by right-clicking Styles then clicking New > New Mobile Style. I navigated to my ArcGIS Pro project folder, then typed FireflyMobile as the name of my new mobile style file, then clicked Save.
2. I added the Firefly style to the project. On the ArcGIS Pro ribbon, I clicked Insert, then in the Styles area, clicked Add Style.  I navigated to the location I downloaded Firefly.stylx to (the folder with my .csproj file) and double-clicked Firefly.stylx.
   Tip: If you don’t see it where you expect, remember to click the Refresh button near the top of the Add a Style File dialog box.
3. After I saw Firefly.stylx in the Styles folder in Catalog, I double-clicked it.
4. In the Style Classes area that displays, I selected the first style class that stores the styles I want to bring over, Polygons.

Another pane displayed that shows the 42 polygon styles available. From there, I selected the style items I wanted to bring over. In this case I selected FireflyPoly_8 to style my polygons. I used Ctrl+C to copy it, then I Ctrl+V into FireflyMobile.stylx to copy the styles there.
I repeated this step for FireflyLine_5 in Lines and FireflyShimmer_2 in Points.

The above steps made FireflyMobile.stylx ready to use in my native map app. By default, it automatically saved to C:\Users\<username>\Documents\ArcGIS\Projects\<project name>.

I could also select style items from other styles, such as from ArcGIS Colors, and bring those over into the same FireflyMobile.stylx style file, the same way I brought over the Firefly styles. 

Apply the mobile style file to layers in your app

I’ve provided a C# code sample below for use with ArcGIS Maps SDK for .NET, but the general approach is the same for ArcGIS Maps SDK for Kotlin, Swift, and Qt as well.

Code example of applying the mobile style file to points, lines, and polygons in services 

In this first block of code, I create the map with a dark basemap style.

 private async Task SetupMap() 
    { 
        try 
        { 
             // Create a new map with an `ArcGIS dark gray' basemap.  
            // Set the initial viewpoint around the Santa Monica Mountains in California.  
            Map map = new(BasemapStyle.ArcGISDarkGray) 
            { 
                InitialViewpoint = new Viewpoint(34.027, -118.805, 100000) 
            }; 
 
            // Set the map property with the map.  
            MyMapView.Map = map; 

In the next code block, I open the mobile style I want to use, then add the layers, specifying the style I want for each layer. I call a method, GetLayerWithSymbol, that I’ll create in a subsequent code block.

// Open the mobile style file at the provided path. 
SymbolStyle mobileStyle = await SymbolStyle.OpenAsync(@"Firefly.stylx ");

// Add layers to the map using the specified symbols from the mobile style file. 
map.OperationalLayers.Add(await GetLayerWithSymbol("https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Parks_and_Open_Space/FeatureServer/0", mobileStyle, "FireflyPoly_8"));
map.OperationalLayers.Add(await GetLayerWithSymbol("https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trails/FeatureServer/0", mobileStyle, "FireflyLine_5"));
map.OperationalLayers.Add(await GetLayerWithSymbol("https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0", mobileStyle, "FireflyShimmer_2"));
}
catch (Exception)
{
throw;
}
}

In the following code, I use Task<FeatureLayer> to create my GetLayerWithSymbol method, where I use GetSymbolAsync to get the specific symbol to be applied to each layer. Then I apply the renderer to each layer. GetSymbolAsync is the cornerstone to this blog’s sample code.

In the following code, my GetLayerWithSymbol method uses the GetSymbolAsync API method to get the specific symbol to be applied to the layer and creates a simple renderer with that symbol. Then I apply the renderer to the layer and return the new FeatureLayer. The GetSymbolAsync method is the cornerstone of this blog’s sample code.

async Task<FeatureLayer> GetLayerWithSymbol(string path, SymbolStyle symbolStyle, string symbolName)
{
try
{
FeatureLayer featureLayer = new FeatureLayer(new Uri(path));

// Get the Firefly symbol to be applied 
Symbol? symbol = await symbolStyle.GetSymbolAsync(new List<string>() { symbolName });
if (symbol != null)
{
// Set the renderer of the feature layer to use the Firefly symbol 
featureLayer.Renderer = new SimpleRenderer(symbol);
}
return featureLayer;
}
catch (Exception)
{
throw;
}
}

Bundle the style file with your app

When adding the mobile style file to your Visual Studio project, if you set the Build Action to None and the Copy to Output Directory value to, say, Copy if Newer, the style file will be copied to your app’s output folder alongside the .exe file and then you can use the same syntax to specify the .stylx file location as I do in my example:

SymbolStyle mobileStyle = await SymbolStyle.OpenAsync(@”Firefly.stylx”);

Conclusion

You can take advantage of the styles created by others by applying them to the layers in maps in your native apps. Be sure to check out the styles on ArcGIS Online, especially the more common ones, like industry-specific ArcGIS Pro styles highlighted on this ArcGIS Pro page.

I hope you’re able to style your maps in just the way you want. Make sure to test your layers after you apply new styles to them.

If you want to see how to let your users use a simple symbol layer picker to construct their own multilayer symbols using styles, check out Read symbols from a mobile style.

If you found this post interesting, we’d appreciate it if you share the post on LinkedIn, Bluesky, or X. If you’re curious about future openings on our team, check out the open positions on the Esri careers page.

Most importantly, don’t let anything dull your sparkle!