Take advantage of the JavaScript symbol playground

The 4.3 release of the ArcGIS API for JavaScript introduced an app called the Symbol Playground. Its purpose is to provide an environment where you can design 2D or 3D symbols with a simple user interface, copy the code used to create the symbol, and paste it into a custom web application built with the JavaScript API.

This can be a handy tool for developers, allowing them to get immediate visual feedback when altering symbol properties. It is also helpful for the more geographically-inclined analyst who is getting started with web development and unfamiliar with writing code for creating visualizations with the JavaScript API.

The Symbol Playground can also be used to answer the following questions: What does the default SimpleMarkerSymbol (or any other symbol) look like? What values can I use for each symbol property?

Where to find it

The Symbol Playground is located in the visualization samples of the ArcGIS API for JavaScript sample code documentation. You can gain quick access to it by searching for “playground” on the samples page.

Try it out

Open the Symbol Playground and select any symbol type to get started. 2D symbols are listed first, followed by 3D symbols. For the purposes of this post, select SimpleMarkerSymbol to see the properties of that symbol type. A user interface opens exposing all the default properties of the symbol on the right; input elements are provided for adjusting the values of those properties.

Notice that as you select new shapes, colors, sizes, angles, etc., the symbol of the example feature in the view to the left automatically updates. Change the basemap to one that closely resembles the basemap in your app. This helps you to pick optimal colors for each symbol that work best for your application. Also, take note that below the input elements for adjusting property values, you can see the code required to create the desired symbol automatically update with each property change.

Once you are done designing the symbol, you can copy the code to the clipboard and paste it directly into your app.

The playground also provides options for copying the code snippet within the context of the require statement or in the ArcGIS JSON format used by the REST API.

As you familiarize yourself with the Symbol Playground, you will gain familiarity with the code structure of each symbol type and how they differ in 2D and 3D implementations. For example, to create a 3D symbol you must always first add at least one symbol layer to the symbol. It is the properties of the symbol layer that will drive the visualization of the 3D symbol.

The playground allows you to view the realistic 3D WebStyleSymbol resources available in the API. These include dozens of pre-made symbols that may be used to add realistic elements to web scenes.

So try it out! Use the Symbol Playground to create custom symbols for your apps. Use it to explore the properties available to you. Use it to familiarize yourself with the object specifications of various symbols.

When not to use the Symbol Playground

The ArcGIS API for JavaScript is just a part of a larger platform that allows you to create web maps and layers that can be shared, viewed, and analyzed consistently across a suite of desktop, mobile, and web apps built with ArcGIS. The ArcGIS Online map viewer and scene viewer already provide environments for designing symbols that can be used to represent geographic data in web apps. When workflows allow for using ArcGIS Online for those purposes, then it should be used. The Symbol Playground is intended to be a tool for programmatically altering symbol property values when apps require they be changed dynamically based on user input or some other behavior.

In short, if you don’t need to create the symbols in code then don’t! Create your visualizations with ArcGIS Online or ArcGIS Pro and use the playground for those cases when visualizations need custom tweaking on an app-by-app basis.

This entry was posted in App Developers, Apps, Uncategorized, Web and tagged , , , , , . Bookmark the permalink.

Leave a Reply

4 Comments

  1. johnmdye says:

    Can the JSAPI support simple SVG symbology for points?

  2. yue.zhou@oracle.com says:

    How can I create svg circle symbol?

    I tried the following
    var graphic = new Graphic(point, new SimpleMarkerSymbol({
    path: “M0,50 A50,50,0 1 1 100,50 A50,50,0 1 1 0,50 Z”,
    color: “yellow”,
    outline: null,
    size: “40px”}));
    It does not work. It draws the circle in fixed position, and I got the following javascript error:
    Error: attribute transform: Expected number, “matrix(NaN,NaN,NaN,NaN,…”.