(function () { // ─── Selector group definitions ──────────────────────────────────── // Add new groups here to create more selectors. // Each group needs: containerId, storageKey, label, options[], and an optional autoDetect function. // Tab titles in your MDX must exactly match option names. var SELECTORS = [ { containerId: 'platform-selector', storageKey: 'nika-platform-selected', label: 'Select your platform:', autoDetect: function () { var ua = navigator.userAgent || ''; var p = navigator.platform || ''; if (/Mac/i.test(p) || /Mac/i.test(ua)) return 'macOS'; if (/Win/i.test(p) || /Win/i.test(ua)) return 'Windows'; return 'Linux'; }, options: [ { name: 'macOS', svg: '' }, { name: 'Windows', svg: '' }, { name: 'Linux', svg: '' } ] }, { containerId: 'gis-selector', storageKey: 'nika-gis-selected', label: 'Select your GIS platform:', options: [ { name: 'QGIS', svg: '' }, { name: 'ArcGIS Pro', svg: '' } ] } ]; // ─── Shared styles (injected once) ───────────────────────────────── var stylesInjected = false; function injectStyles() { if (stylesInjected) return; stylesInjected = true; var style = document.createElement('style'); style.textContent = [ '.ps-container { margin: 0.5rem 0 1.5rem; }', '.ps-group {', ' display: inline-flex;', ' border-radius: 8px;', ' overflow: hidden;', ' border: 1px solid var(--border-color, #e2e8f0);', '}', '.ps-btn {', ' display: inline-flex;', ' align-items: center;', ' gap: 8px;', ' padding: 8px 18px;', ' font-size: 14px;', ' font-weight: 500;', ' font-family: inherit;', ' border: none;', ' cursor: pointer;', ' transition: background 0.15s, color 0.15s;', ' background: var(--bg-secondary, #f8fafc);', ' color: var(--text-secondary, #64748b);', '}', '.ps-btn:not(:last-child) {', ' border-right: 1px solid var(--border-color, #e2e8f0);', '}', '.ps-btn:hover {', ' background: var(--bg-hover, #f1f5f9);', '}', '.ps-btn.ps-active {', ' background: #170d19;', ' color: #eba941;', '}', '.ps-btn .ps-icon {', ' display: inline-flex;', ' align-items: center;', '}', '.ps-label {', ' font-size: 13px;', ' font-weight: 600;', ' color: var(--text-secondary, #64748b);', ' margin-bottom: 6px;', '}', '', '/* Hide native tab buttons for selector-controlled tab groups */', '.ps-controlled [role="tablist"] {', ' display: none !important;', '}', ].join('\n'); document.head.appendChild(style); } // ─── Generic selector logic ──────────────────────────────────────── function getStored(cfg) { var stored = localStorage.getItem(cfg.storageKey); if (stored) return stored; if (cfg.autoDetect) return cfg.autoDetect(); return cfg.options[0].name; } function buildSelector(cfg) { var container = document.getElementById(cfg.containerId); if (!container) return; if (container.querySelector('.ps-group')) return; // already built container.className = 'ps-container'; container.innerHTML = ''; var label = document.createElement('div'); label.className = 'ps-label'; label.textContent = cfg.label; container.appendChild(label); var group = document.createElement('div'); group.className = 'ps-group'; var current = getStored(cfg); cfg.options.forEach(function (opt) { var btn = document.createElement('button'); btn.className = 'ps-btn' + (opt.name === current ? ' ps-active' : ''); btn.setAttribute('data-selector', cfg.containerId); btn.setAttribute('data-option', opt.name); var icon = document.createElement('span'); icon.className = 'ps-icon'; icon.innerHTML = opt.svg; btn.appendChild(icon); btn.appendChild(document.createTextNode(opt.name)); btn.addEventListener('click', function () { selectOption(cfg, opt.name); }); group.appendChild(btn); }); container.appendChild(group); } function selectOption(cfg, name) { localStorage.setItem(cfg.storageKey, name); // Update button states for this selector var buttons = document.querySelectorAll('.ps-btn[data-selector="' + cfg.containerId + '"]'); buttons.forEach(function (btn) { btn.classList.toggle('ps-active', btn.getAttribute('data-option') === name); }); // Sync matching Mintlify tabs syncTabs(cfg, name); } function syncTabs(cfg, name) { var optionNames = cfg.options.map(function (o) { return o.name; }); var tabs = document.querySelectorAll('[role="tab"]'); tabs.forEach(function (tab) { var text = (tab.textContent || '').trim(); if (optionNames.indexOf(text) !== -1) { // Mark parent as controlled to hide native tab buttons var tablist = tab.closest('[role="tablist"]'); if (tablist && tablist.parentElement) { tablist.parentElement.classList.add('ps-controlled'); } if (text === name) { tab.click(); } } }); } // ─── Initialisation ──────────────────────────────────────────────── function initAll() { var anyFound = false; SELECTORS.forEach(function (cfg) { if (document.getElementById(cfg.containerId)) { anyFound = true; injectStyles(); buildSelector(cfg); var current = getStored(cfg); localStorage.setItem(cfg.storageKey, current); setTimeout(function () { syncTabs(cfg, current); }, 150); } }); } // ─── SPA navigation handling ─────────────────────────────────────── var lastPath = ''; function onRouteChange() { var newPath = window.location.pathname; if (newPath !== lastPath) { lastPath = newPath; setTimeout(initAll, 400); } } var origPush = history.pushState; var origReplace = history.replaceState; history.pushState = function () { origPush.apply(this, arguments); onRouteChange(); }; history.replaceState = function () { origReplace.apply(this, arguments); onRouteChange(); }; window.addEventListener('popstate', onRouteChange); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function () { lastPath = window.location.pathname; initAll(); }); } else { lastPath = window.location.pathname; setTimeout(initAll, 300); } })();

Tutorials

Access Control

File Storage

Map Visualization

Data Analysis

Database Management

Data Conversion Pipeline

Image Labeling

Field Survey

Custom Geoprocess Deployment

Custom Geoprocess Usage

Best Practices

Documentation Index

​Building Your First App

Building Your First App