{"id":13780765,"url":"https://github.com/aazuspan/snazzy","last_synced_at":"2025-10-25T13:40:40.670Z","repository":{"id":129061868,"uuid":"470879619","full_name":"aazuspan/snazzy","owner":"aazuspan","description":"✨🗺️ Snazzy basemaps and Font Awesome icons in the Earth Engine code editor","archived":false,"fork":false,"pushed_at":"2024-11-20T05:56:13.000Z","size":523,"stargazers_count":34,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T21:50:37.247Z","etag":null,"topics":["basemap","code-editor","earth","earth-engine","engine","font-awesome","gee","google","javascript","maps","snazzy","snazzy-maps","style"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aazuspan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-17T06:50:55.000Z","updated_at":"2025-02-09T17:55:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"5933e166-9298-4c69-b69d-e76b210edc2c","html_url":"https://github.com/aazuspan/snazzy","commit_stats":{"total_commits":125,"total_committers":1,"mean_commits":125.0,"dds":0.0,"last_synced_commit":"87bf23317152013e23e23f0dec1b27bcee4bdd3c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aazuspan%2Fsnazzy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aazuspan%2Fsnazzy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aazuspan%2Fsnazzy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aazuspan%2Fsnazzy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aazuspan","download_url":"https://codeload.github.com/aazuspan/snazzy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245116013,"owners_count":20563265,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basemap","code-editor","earth","earth-engine","engine","font-awesome","gee","google","javascript","maps","snazzy","snazzy-maps","style"],"created_at":"2024-08-03T18:01:19.487Z","updated_at":"2025-10-25T13:40:35.635Z","avatar_url":"https://github.com/aazuspan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript API"],"sub_categories":["Repositories"],"readme":"# Snazzy\n\n[![Earth Engine Javascript](https://img.shields.io/badge/Earth%20Engine%20API-Javascript-red)](https://developers.google.com/earth-engine/tutorials/tutorial_api_01)\n[![Open in Code Editor](https://img.shields.io/badge/Open%20in-Code%20Editor-9cf)](https://code.earthengine.google.com/eea55338fa02e2b114e8cd70431302d8)\n\n[Snazzy Maps](https://snazzymaps.com) styles and [Font Awesome](https://fontawesome.com/icons) icons in the [Google Earth Engine](https://earthengine.google.com/) code editor.\n\n![Snazzy basemap demo](assets/snazzy_demo.gif)\n\n## TLDR\n\n- 🗺️ Customize your Earth Engine basemap in any script or App\n- ✨ Add any style from [Snazzy Maps](https://snazzymaps.com) by URL, name, or tags\n- 🆒 Add any [Font Awesome free icon](https://fontawesome.com/search?m=free\u0026o=r) to your widgets\n- ⚡ Asynchronous evaluation for fast, non-blocking execution\n\n## Usage\n\nImport the `snazzy` module into your Earth Engine script.\n\n```javascript\nvar snazzy = require(\"users/aazuspan/snazzy:styles\");\n```\n\n### Add a Style Using a URL\n\nAdd a style from [Snazzy Maps](https://snazzymaps.com/explore) 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.\n\n```javascript\nsnazzy.addStyle(\"https://snazzymaps.com/style/235815/retro\", \"My Custom Style\");\n```\n\n### Add a Style Using a Name\n\nYou 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.\n\n```javascript\nsnazzy.addStyleFromName(\"Retro\");\n```\n\n### Add a Style Using Tags\n\nKnow 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](#snazzy-tags) and an alias.\n\n```javascript\nsnazzy.addStyleFromTags([\"yellow\", \"black\", \"two-tone\"]);\n```\n\nBy 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).\n\n```javascript\nvar tags = [\"colorful\", \"no-labels\", \"simple\"];\nvar alias = null;\nvar order = \"random\";\n\nvar style = snazzy.addStyleFromTags(tags, alias, order);\nprint(style);\n```\n\nNote that all functions that add styles return the style feature, which can be printed to reveal the URL and other metadata.\n\n### Selecting a Map\n\nBy default, `snazzy` will add styles to the default `Map` object, but you can also pass custom `ui.Map` objects.\n\n```js\nvar insetMap = ui.Map();\nsnazzy.addStyle(\"https://snazzymaps.com/style/235815/retro\", \"My Custom Style\", insetMap);\n```\n\n### Snazzy Tags\n\n`snazzy` supports all of the tags and colors used by Snazzy Maps. To see them in the code editor: `print(snazzy.tags)`.\n\n- **Tags**: `colorful, complex, dark, greyscale, light, monochrome, no-labels, simple, two-tone`\n- **Colors**: `black, blue, grey, green, orange, purple, red, white, yellow`\n\n### Font Awesome Icons\n\n`ui.Label` and `ui.Button` widgets support image icons. Find a free icon from [Font Awesome](https://fontawesome.com/search?m=free\u0026o=r) and assign it to your widget with `snazzy.icons.setIcon`:\n\n```js\nvar widget = ui.Button();\nvar iconName = \"fa-dog\";\nvar iconSize = 32;\n\nsnazzy.icons.setIcon(widget, iconName, iconSize);\nprint(widget);\n```\n\nTo 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.:\n\n```js\nvar widget = ui.Button();\nvar iconName = \"fa-dog\";\nvar iconSize = 32;\n\nsnazzy.icons.setIcon(widget, iconName, iconSize, function(loadedWidget) {\n    print(\"Widget icon loaded!\");\n    Map.add(loadedWidget);\n});\n```\n\n## Acknowledgements\n\n- [@adamkrogh](https://github.com/adamkrogh) is the creator of [Snazzy Maps](https://snazzymaps.com) 👏\n\n- [@TC25](https://github.com/TC25) wrote [a great tutorial](https://developers.google.com/earth-engine/tutorials/community/customizing-base-map-styles) on how you can manually add Snazzy Maps styles to the Earth Engine code editor, which inspired this module. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faazuspan%2Fsnazzy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faazuspan%2Fsnazzy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faazuspan%2Fsnazzy/lists"}