How to add custom markup styles in the HTML 5 Viewer – VertiGIS

Overview:
This article shows how to add more markup styles to the HTML5 Viewer using the StyleSelectorViewModel in the desktop.json. If you add a markup tool that is not part of the default tools, in order for the custom tool to work correctly, you must add the default styles plus your custom ones to one of the following arrays, depending on the type of markup your tool adds.

customPointStyles: An array of custom point tools
customLineStyles: An array of custom line tools
customPolygonStyles: An array of custom polygon tools
customTextStyles: An array of custom text tools

Solution:

Open in notepad the desktop.json for the site you want to add the custom styles. The default location should be :

C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\[Name of Essentials Instance]t\REST Elements\Sites\[Name of Site]\Viewers\[Name assigned to HTML5 Viewer]\VirtualDirectory\Resources\Config\Default

Make a backup of this file before editing

Find (use ctrl F) the StyleSelectorViewModel in the desktop.json. It should look like the following:

"id" : "StyleSelectorViewModel",
"type" : "geocortex.essentialsHtmlViewer.mapping.modules.markup.styleSelector.StyleSelectorViewModel",
"configuration" : {
"customPointStyles" : [],
"customLineStyles" : [],
"customPolygonStyles" : [],
"customTextStyles" : []

Depending on which of the above styles (i.e. point, line, polygon and text ) you want to modify, copy from the below the default style and paste it in its respective section

//Points
["point", "#FF4CA0D8", "Circle", 16],
["point", "#FF2DB459", "Circle", 16],
["point", "#FF9B82BC", "Circle", 16],
["point", "#FFDB5A5A", "Circle", 16],
["point", "#FFF37521", "Circle", 16],
["point", "#FFFDF068", "Circle", 16],
["point", "#FF4CA0D8", "Square", 16],
["point", "#FF2DB459", "Square", 16],
["point", "#FF9B82BC", "Square", 16],
["point", "#FFDB5A5A", "Square", 16],
["point", "#FFF37521", "Square", 16],
["point", "#FFFDF068", "Square", 16],
["point", "#FF4CA0D8", "Diamond", 16],
["point", "#FF2DB459", "Diamond", 16],
["point", "#FF9B82BC", "Diamond", 16],
["point", "#FFDB5A5A", "Diamond", 16],
["point", "#FFF37521", "Diamond", 16],
["point", "#FFFDF068", "Diamond", 16]

// Polylines
["polyline", "#FF4CA0D8", "Dash", 3],
["polyline", "#FF2DB459", "Dash", 3],
["polyline", "#FF9B82BC", "Dash", 3],
["polyline", "#FFDB5A5A", "Dash", 3],
["polyline", "#FFF37521", "Dash", 3],
["polyline", "#FFFDF068", "Dash", 3],
["polyline", "#FF4CA0D8", "Solid", 3],
["polyline", "#FF2DB459", "Solid", 3],
["polyline", "#FF9B82BC", "Solid", 3],
["polyline", "#FFDB5A5A", "Solid", 3],
["polyline", "#FFF37521", "Solid", 3],
["polyline", "#FFFDF068", "Solid", 3],
["polyline", "#FF4CA0D8", "Dot", 3],
["polyline", "#FF2DB459", "Dot", 3],
["polyline", "#FF9B82BC", "Dot", 3],
["polyline", "#FFDB5A5A", "Dot", 3],
["polyline", "#FFF37521", "Dot", 3],
["polyline", "#FFFDF068", "Dot", 3]

// Polys
["polygon", "#FF4CA0D8", "#4D4CA0D8", "Solid", "Solid", 3],
["polygon", "#FF2DB459", "#4D2DB459", "Solid", "Solid", 3],
["polygon", "#FF9B82BC", "#4D9B82BC", "Solid", "Solid", 3],
["polygon", "#FFDB5A5A", "#4DDB5A5A", "Solid", "Solid", 3],
["polygon", "#FFF37521", "#4DF37521", "Solid", "Solid", 3],
["polygon", "#FFFDF068", "#4DFDF068", "Solid", "Solid", 3],
["polygon", "#FF4CA0D8", "#4D4CA0D8", "Dash Dot", "Solid", 3],
["polygon", "#FF2DB459", "#4D2DB459", "Dash Dot", "Solid", 3],
["polygon", "#FF9B82BC", "#4D9B82BC", "Dash Dot", "Solid", 3],
["polygon", "#FFDB5A5A", "#4DDB5A5A", "Dash Dot", "Solid", 3],
["polygon", "#FFF37521", "#4DF37521", "Dash Dot", "Solid", 3],
["polygon", "#FFFDF068", "#4DFDF068", "Dash Dot", "Solid", 3],
["polygon", "#FF4CA0D8", "#4D4CA0D8", "Dot", "Solid", 3],
["polygon", "#FF2DB459", "#4D2DB459", "Dot", "Solid", 3],
["polygon", "#FF9B82BC", "#4D9B82BC", "Dot", "Solid", 3],
["polygon", "#FFDB5A5A", "#4DDB5A5A", "Dot", "Solid", 3],
["polygon", "#FFF37521", "#4DF37521", "Dot", "Solid", 3],
["polygon", "#FFFDF068", "#4DFDF068", "Dot", "Solid", 3]

// Text
["text", "#FF000000", "Normal", "Normal", "12pt", "Arial"],
["text", "#FF000000", "Normal", "Normal", "14pt", "Arial"],
["text", "#FF000000", "Normal", "Normal", "18pt", "Arial"],
["text", "#FFCCCCCC", "Normal", "Normal", "12pt", "Arial"],
["text", "#FFCCCCCC", "Normal", "Normal", "14pt", "Arial"],
["text", "#FFCCCCCC", "Normal", "Normal", "18pt", "Arial"]

Example: Appending the default text style would look like this

"id" : "StyleSelectorViewModel",
"type" : "geocortex.essentialsHtmlViewer.mapping.modules.markup.styleSelector.StyleSelectorViewModel",
"configuration" : {
"customPointStyles" : [],
"customLineStyles" : [],
"customPolygonStyles" : [],
"customTextStyles" : [["text", "#FF000000", "Normal", "Normal", "12pt", "Arial"],
["text", "#FF000000", "Normal", "Normal", "14pt", "Arial"],
["text", "#FF000000", "Normal", "Normal", "18pt", "Arial"],
["text", "#FFCCCCCC", "Normal", "Normal", "12pt", "Arial"],
["text", "#FFCCCCCC", "Normal", "Normal", "14pt", "Arial"],
["text", "#FFCCCCCC", "Normal", "Normal", "18pt", "Arial"]
]

Add your custom style. You can add as many as you want

Example: For the text style if would look like the following (the last 3 lines) 


	"id": "StyleSelectorViewModel",
            "type": "geocortex.essentialsHtmlViewer.mapping.modules.markup.styleSelector.StyleSelectorViewModel",
            "configuration": {
              "customPointStyles": [],
              "customLineStyles": [],
              "customPolygonStyles": [],
              "customTextStyles": [["text", "#FF000000", "Normal", "Normal", "12pt", "Arial"],
                                ["text", "#FF000000", "Normal", "Normal", "14pt", "Arial"],
                                ["text", "#FF000000", "Normal", "Normal", "18pt", "Arial"],
                                ["text", "#FFCCCCCC", "Normal", "Normal", "12pt", "Arial"],
                                ["text", "#FFCCCCCC", "Normal", "Normal", "14pt", "Arial"],
                                ["text", "#FFCCCCCC", "Normal", "Normal", "18pt", "Arial"],
                                ["text", "#FFCC00CC", "Normal", "Bold", "20pt", "serif"],
                                ["text", "#FFCC0000", "Normal", "Normal", "20pt", "fantasy"],
                                ["text", "#FF00FF00", "Oblique", "Normal", "20pt", "monospace"] ]

Save the file and reload the viewer to see the changes

Additional Resources

For more color options, please check out http://www.w3schools.com/tags/ref_colorpicker.asp
All colors have a transparency setting associated with it. The first 2 of the 8-digit hex code refers to the transparency. For example, the "FF" of "#FFCC00CC" refers to 100% or a fully solid color. The "4D" in "#4DFDF068" refers to an opacity of 30%. For more information on setting color opacity, please check out http://blog.mokrzycki.io/2015/07/converting-transparency-color-to-hex/
Style can be "normal", "italic", "oblique", etc (see http://www.w3schools.com/cssref/pr_font_font-style.asp)
Weight can be "normal", "bold", etc (see http://www.w3schools.com/cssref/pr_font_weight.asp )
Size is a CSS directive, Points are the easiest but you may be able to use pixels here too (e.g. 10px)
textFamily is a font-family CSS directive. http://www.w3schools.com/cssref/pr_font_font-family.asp