GeoMap Component – Interactive Country-Level Data Visualization for Retool

🤝 Community Show & Tell
, , , ,
1

Hi Retool Builders ,
Sharing a custom-built Geo Map component (React + Leaflet.js) designed to simplify how you visualize and interact with global data inside Retool.

Overview

I built a high-performance Geo Map custom component for Retool that lets you visualize country-level data with dynamic color scaling, smart country matching, and interactive click events.

It’s designed for analytics dashboards, financial data, global KPIs, and operational monitoring.

Preview

cover
cover2712×818 223 KB

GitHub Repository

Geo Map Component

Key Features

  • Interactive world map (Leaflet-based)
  • Smooth color gradient scaling (0 → 100%)
  • Smart country detection (name, ISO2, ISO3 support)
  • Optimized rendering with caching (fast even with large datasets)
  • Click on any country → get selected data
  • Supports Retool event handler (onSelect)
  • Handles both percentage + raw numeric values
  • Built-in legend (color scale bar)
  • Clean modern tooltip UI
  • Safe fallback colors to avoid UI break

Inputs

Property Type Description
data Array Dataset (country + value)
countryKey String Field for country
valueKey String Field for value
lowColor String Color for lowest values
midLowColor String Color for 25%
midHighColor String Color for 75%
highColor String Color for highest values

Outputs

Property Type Description
selectedCountry Object Clicked country data

Example:

{  "country": "India",  "value": 1400}

How it Works

  • Uses Leaflet.js for map rendering
  • Maps your dataset dynamically to countries
  • Automatically normalizes values for color scaling
  • Tooltip shows formatted values (%, numbers)
  • Click interaction updates Retool state + triggers event

Use Cases

  • Global revenue dashboards
  • Country-wise transaction monitoring
  • Payments / fintech analytics
  • Logistics & shipment tracking
  • KPI heatmaps

Behind the Scenes

  • Smart country normalization (handles US, USA, India, etc.)
  • Gradient interpolation for smooth color transitions
  • GeoJSON caching for performance
  • Lightweight + no backend dependency

Tech Stack

  • React 18
  • Retool Custom Component SDK
  • Leaflet.js
3 Likes
3

@WidleStudioLLP That's really cool, thanks for sharing! :globe_showing_asia_australia:

2 Likes