Snazzy

Snazzy Maps styles and Font Awesome icons in the Google Earth Engine code editor.

TLDR

• 🗺️ Customize your Earth Engine basemap in any script or App
• ✨ Add any style from Snazzy Maps by URL, name, or tags
• 🆒 Add any Font Awesome free icon to your widgets
• ⚡ Asynchronous evaluation for fast, non-blocking execution

Usage

Import the snazzy module into your Earth Engine script.

var snazzy = require("users/aazuspan/snazzy:styles");

Add a Style Using a URL

Add a style from Snazzy Maps to your map by copying the URL and pasting in your Earth Engine script with snazzy.addStyle. The second parameter is optional and will be assigned as the style alias (displayed in the top right of the map). If no alias (or null) is provided, the name of the style on Snazzy Maps will be used.

snazzy.addStyle("https://snazzymaps.com/style/235815/retro", "My Custom Style");

Add a Style Using a Name

You can also add a style by name rather than URL. However, there may be multiple styles with the same name. snazzy will always add the most popular style that matches a given name, so use a URL if selecting by name doesn't give you the style you want.

snazzy.addStyleFromName("Retro");

Add a Style Using Tags

Know the aesthetic or color scheme but don't have a specific style in mind? You can use snazzy.addStyleFromTags to add a popular or random style that matches your criteria. Just pass in an array of tags/colors and an alias.

snazzy.addStyleFromTags(["yellow", "black", "two-tone"]);

By default, addStyleFromTags adds the most popular style that matches all your tags, sorted by favorites, but you can also sort by views (or random for a surprise).

var tags = ["colorful", "no-labels", "simple"];
var alias = null;
var order = "random";

var style = snazzy.addStyleFromTags(tags, alias, order);
print(style);

Note that all functions that add styles return the style feature, which can be printed to reveal the URL and other metadata.

Selecting a Map

By default, snazzy will add styles to the default Map object, but you can also pass custom ui.Map objects.

var insetMap = ui.Map();
snazzy.addStyle("https://snazzymaps.com/style/235815/retro", "My Custom Style", insetMap);

Snazzy Tags

snazzy supports all of the tags and colors used by Snazzy Maps. To see them in the code editor: print(snazzy.tags).

• Tags: colorful, complex, dark, greyscale, light, monochrome, no-labels, simple, two-tone
• Colors: black, blue, grey, green, orange, purple, red, white, yellow

Font Awesome Icons

ui.Label and ui.Button widgets support image icons. Find a free icon from Font Awesome and assign it to your widget with snazzy.icons.setIcon:

var widget = ui.Button();
var iconName = "fa-dog";
var iconSize = 32;

snazzy.icons.setIcon(widget, iconName, iconSize);
print(widget);

To avoid the icon appearing after the widget is displayed, setIcon also takes an optional callback function that will be called with the widget after loading, e.g.:

var widget = ui.Button();
var iconName = "fa-dog";
var iconSize = 32;

snazzy.icons.setIcon(widget, iconName, iconSize, function(loadedWidget) {
    print("Widget icon loaded!");
    Map.add(loadedWidget);
});

Acknowledgements

• @adamkrogh is the creator of Snazzy Maps 👏

• @TC25 wrote a great tutorial on how you can manually add Snazzy Maps styles to the Earth Engine code editor, which inspired this module.