nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Sept conseils pratiques pour commencer à créer un style de dictionnaire personnalisé

megan-r

Les styles Dictionary <\/SPAN> offrent <\/SPAN> une manière hautement personnalisable de visualiser des données riches en attributs dans vos cartes et applications. Avec une <\/SPAN><\/SPAN>look-up table<\/SPAN><\/SPAN><\/STRONG> des parties individuelles du symbole, un <\/SPAN><\/SPAN>dictionary script<\/SPAN><\/SPAN><\/STRONG> reliant les valeurs d'attribut aux clés de symbole, et un <\/SPAN><\/SPAN>configuration file<\/SPAN><\/SPAN><\/STRONG> pour un réglage précis, ces styles peuvent être utilisés avec le Dictionary Renderer pour construire des symboles complexes pilotés par plusieurs attributs dans vos données. <\/SPAN><\/SPAN><\/P>
J'ai créé un style dictionary pour la couche <\/SPAN><\/SPAN>Alternative Fuel Stations layer<\/SPAN><\/SPAN><\/A> dans Living<\/SPAN> Atlas qui fournit des informations sur chaque station en un coup d'œil. <\/SPAN><\/SPAN> <\/SPAN><\/SPAN><\/P>
<\/span><\/SPAN><\/SPAN><\/P>
Dans ce blog, je partagerai quelques-uns de mes meilleurs conseils pour créer votre propre style dictionary personnalisé tout en examinant de plus près celui que j'ai créé. Si vous souhaitez explorer le style pendant votre lecture, voici<\/SPAN> des liens<\/SPAN> vers <\/SPAN><\/SPAN>le style<\/SPAN><\/SPAN><\/A> et<\/SPAN> carte web<\/A> où une couche a déjà été configurée avec le style. <\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/P>

Conseil 1 013 Rassemblez les ressources à utiliser lors de la création de votre style <\/Span><\/span><\/H3>
Chaque fois que je commence à créer un nouveau style dictionary, je suis préparé avec mes ressources préférées à portée de main. La première est ce blog de mon collègue Thad : Créer des styles dictionary personnalisés pour ArcGIS.<\/<\a> Le blog partage tous les outils et étapes nécessaires pour construire votre style du début à la fin. Mes outils favoris sont : <\/<\span>\n\nDB Browser for SQLite, <\/<\span>\nVisual Studio Code, <\/<\span>\nArcGIS Pro, et <\/<\span>\nUn sous-ensemble des données pour tester le style en cours de route.<\/<\span>\n<\/<\UL>\nLe Guide du style dictionary personnalisé<\/<\a> est un autre excellent endroit pour commencer avec des instructions détaillées étape par étape pour créer votre propre style personnalisé. J'aime aussi avoir le dictionary renderer toolkit<\/<\a> à portée de main. La boîte à outils est pleine de ressources pour comprendre, créer et dépanner les styles dictionary, ainsi que quelques styles d'exemple qui valent la peine d'être explorés.<\/SPAN> <\/SPAN><\/P>\n

Astuce <\/SPAN>2<\/SPAN> 93 N'oubliez pas les touches de symbole par dE9faut intE9grE9es <\/SPAN><\/SPAN><\/SPAN><\/H3>\nChaque partie individuelle du symbole a une clE9 unique dE9finie dans la table de correspondance<\/SPAN><\/STRONG>. La meilleure faE7on de crE9er et d'E9diter ces parties de symbole est dans ArcGIS Pro. Ajoutez d'abord le style E0 votre catalogue de projet, puis double-cliquez sur le style Alternative Fuel Stations pour ouvrir la table. Ici, vous trouverez toutes les parties du symbole dans le style. <\/SPAN> <\/SPAN><\/P>\nConcentrons-nous d'abord sur les symboles Fuel Type. Il y a 7 symboles de type de carburant et un symbole par dE9faut (nous y reviendrons dans un instant), chacun avec sa propre clE9 unique. C0 l'exception de la clE9 par dE9faut, ces clE9s suivent le format 93fuel-94 suivi de l'abrE9viation du type de carburant trouvE9e dans le champ Fuel_Type<\/FONT><\/STRONG>. <\/SPAN> & nbsp ; <\/SPAN> <\/P> \n <\/span> <\/P> \n Le <\/SPAN> script dictionnaire<\/SPAN> <\/STRONG> est un script Arcade qui contient des instructions sur la fa7Con d'utiliser les valeurs d'attribut pour construire des cl7Es de symbole. Le script dictionnaire utilise $feature.Fuel_Typ<\/STRONG>e<\/FONT> pour produire la cl7E du type de carburant. C'est la premi7Ere cl7E list7Ee, donc lorsqu'une entit7Ee est 7Eevalu7Ee, la cl7E du type est la premi7Ere renvoy7Ee. <\/SPAN> & nbsp ; < \/ SPAN > < \/ P > \ n < img src = \ "https : \/ \/ us.v-cdn.net \/6038851 \/uploads \/images \/115685i90F83E4A537971C2 \/megan_r_0-1727111636987.png\ " width = \ "644\ " height = \ "111\ " role = \ "button\ " title = \ "megan_r_0-1727111636987.png\ " alt = \ "megan_r_0-1727111636987.png\ " \/ > < \/ span > < \/ P > \ n Mais que se passe-t-il lorsque le champ Fuel_Type< \/ STRONG >< \/ FONT > est vide ou que le nom complet, \u201cElectric\u201d est utilis7Ee au lieu de \u201cELEC\u201d ? Dans ces cas hypoth7Etiques, le script renverrait \u201cfuel-\u201d et \u201cfuel-Electric\u201d, deux cl7Es qui n'existent pas dans la table de correspondance. C'est l89o que le symbole par dfaut entre en jeu !<\/SPAN>poColor. La syntaxe pour un override primitif est po:<primitive_name>|<property_name>|<value>. Pour ce style, cela signifie que lors du dessin du symbole de vérification, pour toute partie du symbole étiquetée avec status-color, la Couleur est remplacée par la valeur de poColor:

Maintenant, pour étiqueter les parties du symbole avec le nom du primitif. Cet override sera appliqué au contour des symboles vérifiés et non vérifiés dans la table de correspondance. Dans la table de correspondance, sélectionnez le symbole Verified et naviguez vers l'onglet Propriétés de calque. À partir de là, utilisez le menu déroulant des éléments pour descendre jusqu'au symbole Shape Fill, puis formatez ce symbole pour accéder aux propriétés de remplissage et de contour. Dans l'onglet structure, cliquez sur le petit symbole d'étiquette à côté du contour et spécifiez status-color comme nom du primitif. Répétez maintenant pour le symbole non vérifié.

Avec les éléments du symbole étiquetés, le style prend désormais en charge toutes les 8 combinaisons possibles de contours des statuts de vérification et des statuts opérationnels en utilisant seulement deux parties individuelles du symbole.
Astuce 4 – Profitez des propriétés de configuration

Maintenant, si vous connaissez la couche Alternative Fuel Stations Living Atlas, vous pensez peut-être : « attendez une minute - il n'y a pas de champ 'verified' dans ces données ! » Vous m'avez eu. J'utilise un sous-ensemble que j'ai modifié en ajoutant le champ 'verified' qui sera utile pour un futur blog. Ce style fonctionne avec le champ verified, mais peut-être utilisez-vous la couche Living Atlas et n'avez pas ce champ dans vos données. C'est pourquoi j'ai créé une propriété de configuration qui vous permet d'inclure ou d'ignorer le champ de vérification.

Le fichier de configuration est un objet JSON où vous pouvez définir des options de configuration supplémentaires qui modifient la façon dont les symboles sont dessinés. Ce style a plusieurs options de configuration, mais nous commencerons par la configuration use_Verified_Field. Ici, j'ai spécifié le nom de la configuration, la valeur par défaut, les valeurs possibles et une brève description. J'ai également inclus le champ Verified comme champ de symbole utilisé par le script dictionnaire. Vous pouvez vraiment voir cela prendre vie dans ArcGIS Pro :

Lorsque la configuration use_Verified_Field est activée, le script dictionnaire utilisera la valeur dans le champ verified pour retourner une clé pour une ligne pleine ou en pointillés. Lorsqu'elle est désactivée, le script dictionnaire retournera une clé pour la ligne pleine pour toutes les entités. Pour exploiterEV_Network. Si une station n'appartient pas à un réseau, ce champ est rempli avec « Non-networked. »

Tout d'abord, ajoutez un nouveau symbole pour l'étiquette dans la table de correspondance puis assurez-vous qu'il s'agit d'un symbole de texte en forme dans l'onglet des propriétés de la couche. Pour utiliser le réseau EV dans les données, remplacez la chaîne de texte par le nom du champ entre crochets, dans ce cas, [EV_Network] :

Dans le fichier de configuration, j'ai créé la propriété show_EV_Network afin que vous puissiez activer ou désactiver les étiquettes. J'ai également spécifié le champ EV_Network comme un champ de symbole. Pourquoi pas un champ de texte, demandez-vous ? Les champs de texte fonctionnent très bien lorsque vous souhaitez étiqueter toutes les entités. Si j'avais choisi d'utiliser un champ de texte, chaque entité serait étiquetée avec leur valeur EV_Network et les stations EV qui ne sont pas en réseau auraient une étiquette « Non-networked ». J'ai décidé que je voulais seulement que les stations EV en réseau soient étiquetées, donc j'ai fait cela une condition dans le script du dictionnaire :

Les champs de texte ne peuvent pas être accessibles par le script du dictionnaire, ce qui signifie qu'ils ne peuvent pas être utilisés comme variables dans la logique. Puisque le script doit utiliser la valeur EV_Network pour déterminer s'il faut retourner la clé d'étiquette, j'ai inclus le champ EV_Network comme un champ de symbole dans le fichier de configuration.

Astuce 6 – Utilisez des noms primitifs uniques <\/SPAN><\/P>\nLa substitution de décalage X déplace les parties de symbole étiquetées le long de l'axe x. À chaque itération de la boucle for, 11 points sont ajoutés au décalage X, de sorte que le symbole suivant sera 11 points à droite du symbole précédent. Dans la table de correspondance, chaque symbole de connecteur a été étiqueté avec un nom primitif qui suit la syntaxe [connector<\/FONT> type]_marker<\/STRONG> (par exemple J1772_marker, CHAdeMO_marker, etc.). <\/SPAN> <\/SPAN><\/P>\n<\/span><\/P>\nDonc si une station a deux connecteurs, J1772 et CHAdeMO, les clés ressembleraient à ceci:<\/SPAN> <\/SPAN><\/P>\n\nClé de bannière : background-2<\/STRONG><\/FONT><\/SPAN><\/LI>\nClés de type connecteur : con-J1772 ;po:J1772_marker|OffsetX|17 ;` et `con-CHAdeMO ;po :CHAdeMO_marker|OffsetX|28 ;<\/STRONG><\/FONT><\/SPAN><\/LI>\n<\/UL>\nContrairement à notre exemple précédent avec des substitutions primitives, chaque partie du symbole doit avoir un nom primitif unique car les valeurs de décalage à appliquer à chaque symbole afin qu'ils ne se chevauchent pas. <\/SPAN> <\/SPAN><\/P>\nAstuce <\/SPAN>7<\/SPAN> 013013 Retourner les clés dans l'ordre de dessin<\/SPAN><\/SPAN> <\/SPAN><\/SPAN><\/H3>\n<SPAN class = "EOP SCXW249452525 BCX0" data-ccp-props = "{& quo t ;134233117 ": false , & quo t ;134233118 ": false , & quo t ;134245418 ": true , & quo t ;134245529 ": true , & quo t ;201341983 ": 0 , & quo t ;335551550 ": 1 , & quo t ;33...

Trouver plus de publications taguées avec

Defense

Intel

Réponses

AndresCastillo

Once the mobile style has been published as a web style, you can also see the content json in arcgis assistant for the item's resources

AndresCastillo

FYI, DB Browser for sqlite sometimes seems to have an incorrect view of the actual json for an item in the items table:

In that case, it is better to verify the content column of the items table using python's sqlite3 library:

import sqlite3

# Path to your .stylx file
stylx_path = r"D:\ArcGIS_Projects\<name>.stylx"
newlines = "\n" * 5

# Connect to the SQLite database
conn = sqlite3.connect(stylx_path)
cursor = conn.cursor()


# Query the ITEMS table for NAME and CONTENT columns
cursor.execute("SELECT KEY, CONTENT FROM ITEMS")
rows = cursor.fetchall()


# Define the names you want to match
keys_to_match = {"CB2", "CB3"}  # Use a set for fast lookup

# Print each row with clear formatting
for key, content in rows:
    if key in keys_to_match:
        print(f"Key: {key}\nContent: {content}\n{'-'*40}{newlines}")


conn.close()

AndresCastillo

@megan_r

My teammate and I saw that the predefined box sizes can be edited in the items table of the stylx in dbbrowser for SQLite.

Specifically, we must edit the x or y axis for the rings in the markerGraphics key.

{
  "type": "CIMPointSymbol",
  "symbolLayers": [
    {
      "type": "CIMVectorMarker",
      "enable": true,
      "anchorPointUnits": "Relative",
      "dominantSizeAxis3D": "Y",
      "size": 50,
      "billboardMode3D": "FaceNearPlane",
      "frame": {
        "xmin": 0,
        "ymin": 0,
        "xmax": 100,
        "ymax": 100
      },
      "markerGraphics": [
        {
          "type": "CIMMarkerGraphic",
          "geometry": {
            "rings": [
              [
                [80, 60.2],
                [79.6, 62],
                [78.6, 63.6],
                [77, 64.6],
                [75.2, 65],
                [14.8, 65],
                [13, 64.6],
                [11.4, 63.6],
                [10.4, 62],
                [10, 60.2],
                [10, 39.8],
                [10.4, 38],
                [11.4, 36.4],
                [13, 35.4],
                [14.8, 35],
                [75.2, 35],
                [77, 35.4],
                [78.6, 36.4],
                [79.6, 38],
                [80, 39.8],
                [80, 60.2]
              ]
            ]
          },
          "symbol": {
            "type": "CIMPolygonSymbol",
            "symbolLayers": [
              {
                "type": "CIMSolidFill",
                "enable": true,
                "primitiveName": "cbstatus",
                "color": [0, 0, 0, 255]
              },
              {
                "type": "CIMSolidStroke",
                "enable": true,
                "capStyle": "Round",
                "joinStyle": "Round",
                "lineStyle3D": "Strip",
                "miterLimit": 4,
                "width": 4,
                "height3D": 1,
                "anchor3D": "Center",
                "color": [0, 0, 0, 255]
              }
            ],
            "angleAlignment": "Map"
          }
        }
      ],
      "scaleSymbolsProportionally": true,
      "respectFrame": true,
      "clippingPath": {
        "type": "CIMClippingPath",
        "clippingType": "Intersect",
        "path": {
          "rings": [
            [
              [0, 0],
              [100, 0],
              [100, 100],
              [0, 100],
              [0, 0]
            ]
          ]
        }
      }
    }
  ],
  "haloSize": 1,
  "scaleX": 1,
  "angleAlignment": "Display"
}

Here is what the rings look like plotted out on a graph:

To modify the width, modify the x coordinates respectively.

AndresCastillo

@megan_r

How can I add the predefined symbol parts for diferently sized banners for the lookup table?

I tried in layout mode, specifying the width and height, but if you change the width, the height also changes:

Element properties:

The styles pane does not give us access to the width of the symbol:

AaronBarkan

@megan_r

Thank you for posting this - really helpful stuff!

I'm having trouble adjusting the size of the symbol through the dictionary script. I want to implement three different size options for my symbology. Following your example with color, I set a primitive name of 'resizable' and added this code to my dictionary script:

var size = "10"; // Default size - 10pt
if ($feature.size == "small") { size = "10"; } // 10pt
else if ($feature.size == "medium") { size = "15"; } // 15pt
else if ($feature.size == "large") { size = "20"; } // 20pt

keys += ";po:resizable|Size|" + size + ";";

However, the symbols still appear to be the same size. I suspect I didn't set the correct primitive name. Do you have an example of how to set the size using a dictionary script?
Thank you!

megan-r

Great question @TheRrrr42 - you can apply multiple overrides to the same symbol!

Here is an example where I vary the color and rotation of the same 'plane' symbol with two different overrides. The script looks like this:

// Arrival airport key 
var plane_color = ''

if ($feature.arrival_airport_iata == 'SAN') { plane_color = '#704489' } // purple
else if ($feature.arrival_airport_iata == 'LAX') { plane_color = '#004DA8' } // blue
else if ($feature.arrival_airport_iata == 'SNA') { plane_color = '#A80084' } // magenta
else { plane_color = '#686868' } // gray

keys = keys + 'plane'
  keys += ';po:plane_direction|Rotation|' + $feature.heading // rotate plane symbol by heading
  keys += ';po:color|Color|' + plane_color + ';' // specify color of plane symbol

When tagging the symbol with the overrides in ArcGIS Pro, the tags actually belong on different "levels" of the symbol. The plane_direction tag is applied on the shape symbol:

And the color override goes a few levels deeper on the embedded polygon symbol:

You would apply the size override on the same level as I applied the rotation override in this example. Hope this helps!

TheRrrr42

@megan_r

Thanks for the writeup and examples. I attended your DevSummit presentation and am trying to implement these with some water utility valve data. I'm looking around in the military styles and the provided style but am having trouble determining if I can use multiple primitive overrides on a single key. Is this possible? For example trying to change the fill color on a marker symbol and the size of that symbol. Do you have any snippets that show the formatting of this?

Thanks!

AndresCastillo

very nice @megan_r , thank you

megan-r

I'm glad you enjoyed the blog, @AndresCastillo!

As Russ mentioned, you can't currently configure a layer with a dictionary style from Web Map Viewer. Please consider submitting an Idea for this capability.

Now for this blog, I used ArcGIS Pro to symbolize the Alternative Fuel Stations feature service with the dictionary web style, then shared the map as a Web Map. When configuring the symbology, I set a scale factor of 2 because I wanted all the symbols to be larger for demonstration purposes, but you can also write an Arcade expression. Here's some documentation on that: ArcGIS Pro - Scale dictionary symbols.

AndresCastillo

Thank you for your reply @RussRoberts !

Seems then that if I want to apply the dictionary web style to a feature layer in a web map, I will need to do so by adding the renderer to the item data json.

Another note,

when I apply the Pro Desktop Style to the database layer in pro (in other words, not the web feature layer), then publish the web layer as a map image layer (MIL) and feature layer (FL) in the portal, only the MIL retains the dictionary symbology. The feature layer just keeps a basic point symbol.

Interesting though, that both the corresponding map service and feature service rest end point pages BOTH show a basic point symbol for the renderer.

RussRoberts

Hey @AndresCastillo we currently do not support using dictionary web styles in Map Viewers symbol styler experience. We read them into the web map but don't have the experience yet for using them for additional configuration. Thank you for your feedback!

AndresCastillo

I saw the reply by @RhettZufelt in this article, which is great for overwriting a web style with new symbols.

https://community.esri.com/t5/arcgis-online-questions/web-stylx-in-map-viewer/m-p/1474193#M59237

But my issue is that the dictionary web style is not available to choose in map viewer style options.

Note that my web style contains 46 point symbols.

Here are the typeKeywords from the web style item data json,

which match the typeKeywords from the a99d8d715e1e47bea8b5dda31d70caad item that @megan_r uses in her web map:

    "typeKeywords": [
        "ArcGIS Pro",
        "Dictionary",
        "Platform",
        "pointSymbol",
        "Style",
        "Symbology",
        "Symbols",
        "Web Style"
    ],

I looked into the typeKeywords due to @RussRoberts reply on this thread, even though the reply is within the context of a new style workflow only in AGO:

https://community.esri.com/t5/arcgis-online-questions/help-needed-custom-web-styles-not-showing-under/td-p/1527593

AndresCastillo

Hi @megan_r ,

This blog post is excellent.

Thank you for sharing it.

It clearly explains the full workflow to define a custom web symbol.

Question:

Once the style was shared as a web style, how were you able to apply the web style url to the web map operational layer?

I took a look at your web map using ArcGIS Assistant, and the layer renderer shows the url to the web style with item id a99d8d715e1e47bea8b5dda31d70caad.

‎Also, out of curiosity, the blog did not cover the scalingExpressionInfo key of the renderer.

Here is the renderer JSON:

                    "renderer": {
                        "type": "dictionary",
                        "url": "https://www.arcgis.com/sharing/rest/content/items/a99d8d715e1e47bea8b5dda31d70caad",
                        "fieldMap": {
                            "Fuel_Type": "Fuel_Type",
                            "Current_Status": "Current_Status",
                            "Accessability": "Accessability",
                            "EV_Connector_Types": "EV_Connector_Types",
                            "Verified": "Verified",
                            "EV_Network": "EV_Network"
                        },
                        "configuration": {
                            "show_EV_Network": "ON",
                            "show_Connector_Type": "ON",
                            "use_Verified_Field": "ON"
                        },
                        "scalingExpressionInfo": {
                            "expression": "2",
                            "title": ""
                        }
                    }

I am on ArcGIS Enterprise 11.2 (using the newer map viewer), and ArcGIS Pro 3.2.2

I analyzed the Pro Dictionary style with no errors, nor warnings, then published it as a web style.

I shared the web style to the designated and configured portal groups as per this article:

https://support.esri.com/en-us/knowledge-base/problem-the-custom-web-style-is-not-displayed-in-arcgis-000032341#:~:text=Configure%20the%20group%20in%20the,web%20style%20is%20shared%20in.

But, I do not see the dictionary web style available for me to apply to the web map operational layer.

I'd like to symbolize at the web map level, not so much from ArcGIS Pro layer level.

@RussRoberts

Rejoignez la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.