Appearance
Settings & Customization
Personalize your mapping experience with custom graphics styles, UI sizing, and map behavior preferences.
Overview
Settings Capabilities:
- Graphics Styles: Customize colors and sizes for drawn shapes, search results, and selections
- Map Settings: Configure layer creation mode, popups, bookmarks, and scale bar
- UI Scales: Adjust the size of every UI component (S / M / L)
- Account: View user info, app version, and manage your account
[insert image later]
Access Settings
Location: Toolbar → Settings (gear icon)
[insert image later]
How to Open:
- Click the Settings button (gear icon) in the application toolbar
- The Settings dialog opens as a resizable, draggable modal
- Use the left sidebar to navigate between sections
Tip: Click Hide Menu / Show Menu in the dialog footer to toggle the sidebar for more workspace.
Settings Navigation
The dialog uses a split-layout with sidebar navigation on the left and content on the right.
| Section | Description |
|---|---|
| Account | User info and app version |
| Map Settings | Layer creation, popups, bookmarks, scale bar |
| Graphics Styles | Colors and sizes for drawn shapes and selections |
| UI Scales | Component size customization |
| Danger Zone | Account deletion |
[insert image later]
Graphics Styles
Customize how drawn shapes, search results, and selected features appear on the map. Each layer type has its own independent color scheme and sizing.
Style Categories
InsightMaps provides six independently customizable style categories:
| Category | Purpose | Default Color |
|---|---|---|
| Primary Layer | Shapes drawn for analysis (main working layer) | Orange (70% opacity) |
| Overlay Layer | Comparison shapes and buffer zones | Blue (70% opacity) |
| Search Results | Highlighted search matches on the map | Red |
| Analysis Results | Spatial analysis and feature table filter results | Light blue (30% opacity) |
| My Layers | Saved user-created geometries | Blue (80% opacity) |
| Upload Layer | Uploaded files (KML, GPX, Shapefile, CSV) | Light red (40% opacity) |
Each category controls the appearance of points, lines, and polygons for that layer type.
[insert image later]
Default vs Custom Mode
If your organization has configured default graphics styles, a Default / Custom toggle appears at the top.
- Default: Uses the organization-defined color scheme. Style controls are view-only (dimmed).
- Custom: Enables full editing of all style properties. Your custom settings persist across sessions.
How to Switch:
- Click Default or Custom in the segmented control
- A status indicator shows the active mode: green check for organization defaults, blue pencil for custom
[insert image later]
Customizing a Layer Style
How to Use:
- Navigate to Graphics Styles in the sidebar
- Switch to Custom mode (if organization defaults are available)
- Click the collapsible header for the layer category to edit (e.g., Primary Layer)
- The panel expands to show color pickers, sliders, and a live preview
[insert image later]
Color Picker
Each style category has two color settings:
- Fill Color: The interior color of polygons and points, and the stroke color of lines
- Outline Color: The border color of polygons and points
How to Change a Color:
- Click the color swatch — a popover appears with a full color picker
- Select your color using the spectrum, hue slider, or enter a hex value
- Adjust the alpha channel (transparency) using the opacity slider
- The hex code is displayed at the bottom of each swatch (e.g.,
#f56f01b3) - Click outside the popover to close it — changes apply immediately
[insert image later]
Tip: A checkerboard pattern behind the swatch helps visualize transparency. A fully transparent fill (alpha = 0) creates hollow shapes, useful for highlighting without obscuring map content.
Size and Width Controls
Below the color pickers, three sliders control geometry sizing:
| Setting | Range | Description |
|---|---|---|
| Line Width | 1 – 10 px | Thickness of polyline features |
| Point Size | 1 – 20 px | Radius of point markers |
| Border Width | 0 – 5 px | Outline thickness for points and polygons |
Drag the slider handle or click on the track to set a value. The current value is displayed on the handle.
[insert image later]
Live Preview
At the bottom of each style category, a Preview section shows a real-time rendering of your current settings:
- Point: A circle with the configured fill, outline, size, and border
- Line: A horizontal stroke with the configured color and width
- Polygon: A rounded rectangle with the configured fill, outline, and border
The preview updates instantly as you change any setting. A checkerboard background reveals transparency levels.
[insert image later]
Resetting Styles
Reset a Single Category:
- When a category has been modified, a Reset button (circular arrow) appears in the block header
- Click it to restore that category to its default colors and sizes
Reset All Categories:
- Click the Reset button in the mode panel header (visible in Custom mode with modifications)
- Confirm in the dialog: "Reset all graphics styles to the default colors?"
- Click Reset to Defaults to confirm
Default Color Reference
| Category | Fill Color | Outline Color | Line Width | Point Size | Border |
|---|---|---|---|---|---|
| Primary Layer | rgba(245,111,1,0.7) | rgba(245,111,1,1) | 3 | 3 | 2 |
| Overlay Layer | rgba(0,98,211,0.7) | rgba(0,98,211,1) | 3 | 3 | 2 |
| Search Results | #ff0024 | #8c4df3 | 3 | 5 | 2 |
| Analysis Results | rgba(0,120,255,0.3) | rgba(0,80,200,1) | 3 | 10 | 2 |
| My Layers | rgba(0,120,255,0.8) | rgba(0,120,255,1) | 2 | 10 | 2 |
| Upload Layer | rgba(199,31,31,0.4) | rgba(199,31,31,1) | 3 | 3 | 2 |
Map Settings
Configure how layers behave, how popups display, and how the scale bar appears.
Layer Creation Mode
Choose how layers are created when adding from the catalog:
| Mode | Description |
|---|---|
| MapImage | Server-rendered layers, better performance for large datasets |
| Feature | Client-rendered layers, supports editing and client-side queries |
| Original | Uses the layer's original type as defined in the service |
[insert image later]
Popup Settings
| Setting | Description |
|---|---|
| Enable all layer popups | Toggle popups on/off for all existing layers. Changes apply immediately. |
| Default for new layers | Sets the default popup state for layers added in the future. |
Bookmark Settings
| Setting | Options | Description |
|---|---|---|
| Compact layout | On / Off | Hides bookmark thumbnails for a compact list |
| Sort order | A-Z / Manual | Alphabetical or manual bookmark ordering |
Scale Bar Settings
| Setting | Options | Description |
|---|---|---|
| Unit system | Metric / Imperial / Both | Measurement units on the scale bar |
| Visual style | Line / Ruler | Simple line or ruler-style bar |
Note: Visual style is not available when showing both unit systems.
[insert image later]
UI Component Scales
Fine-tune the size of every UI element in the application. Each component type can be set to S (Small), M (Medium), or L (Large).
Default vs Custom Mode
Similar to Graphics Styles, the UI Scales section offers two modes:
- Default: Uses organization-configured sizes. Controls are disabled.
- Custom: Enables per-component size overrides.
How to Switch:
- Click Default or Custom in the segmented control
- Switching modes does not erase your custom settings — they are preserved and restored
[insert image later]
Component Groups
Components are organized into five collapsible groups:
Core UI Components: Icons, Buttons, Actions, Labels
Form Inputs: Selects, Inputs, Checkboxes, Switches, Color Pickers
Feedback & Status: Loaders, Notices, Chips
Containers & Layout: Blocks, Lists, List Items, Accordions, Shell Panel Height/Width, Feature Dialogs, Secondary Dialogs
Advanced Controls: Segmented Controls, Dropdowns, Action Bars
[insert image later]
Changing a Component Size
How to Use:
- Expand the desired component group by clicking its header
- Find the component you want to resize
- Click S, M, or L to set the size
- The change takes effect immediately across the entire application
Admin Defaults
If your organization has configured default sizes, a neutral chip appears next to each component showing the admin-configured value. This serves as a visual reference for the organization recommendation.
[insert image later]
Resetting Scales
- Switch to Custom mode
- Click the Reset button in the mode panel (visible when custom overrides exist)
- Confirm in the dialog: "Reset all custom UI component scales to the default settings?"
- Click Reset to Defaults to confirm
Account & Footer Actions
Account Information
Displays your username and the current application version.
Danger Zone
- Delete Account: Permanently deletes your account and all data. Protected by a confirmation dialog.
Footer Actions
| Button | Action |
|---|---|
| Clear Cache | Clears all browser storage and reloads the page |
| Cancel | Closes the Settings dialog |
| Hide/Show Menu | Toggles the sidebar navigation |
| Sign Out | Signs you out and redirects to login |
How Settings Are Saved
| Setting Type | Storage | Scope |
|---|---|---|
| Graphics Styles (custom) | Browser localStorage | Per device / per browser |
| Organization Graphics Styles | Backend API (cached) | Shared across organization |
| UI Component Scales | User preferences | Per user account |
| Map Settings | User preferences | Per user account |
Key Points:
- Custom graphics styles save automatically as you change them — no save button needed
- Clearing browser data (Clear Cache or browser settings) resets graphics styles to defaults
- Organization defaults are fetched from the backend when you first open Graphics Styles or UI Scales
Troubleshooting
Colors don't change on the map
You see: Changed a color in Graphics Styles, but the map still shows the old color.
To fix: Verify you are in Custom mode. Try toggling the affected layer off and on. If it persists, close and reopen the panel that created the graphics.
Style changes lost after closing browser
You see: Custom color settings reset every time you open the application.
To fix: Check that your browser allows localStorage for the InsightMaps domain. Avoid Incognito/Private mode (clears localStorage on close). Check that no browser extensions are clearing site data.
UI components appear wrong size
You see: Buttons, labels, or other elements are unexpectedly small or large.
To fix: Open Settings → UI Scales → switch to Default mode, or click Reset to clear all custom overrides.
Organization styles not loading
You see: Loading spinner in Graphics Styles that never resolves, or Default/Custom toggle is missing.
To fix: Check your network connection and refresh the page. If the issue persists, contact your organization administrator.
Summary
Graphics Styles: Customize fill colors, outline colors, line width, point size, and border width for six layer categories with live SVG preview.
Map Settings: Control layer creation, popups, bookmarks, and scale bar behavior.
UI Scales: Set every UI component to Small, Medium, or Large with per-component granularity.
All settings support an organization Default mode and user Custom mode, giving administrators control while allowing individual personalization.