MapNow - Free Map Component for Retool

A free, open-source map component for Retool powered by Leaflet and OpenStreetMap. No API key required.

Preview

---

Features

• Free map tiles from OpenStreetMap — no Google Maps API key needed
• Custom colored markers — each pin can have its own color
• Tooltip labels on hover for each marker
• Fully configurable from Retool via the markers state array

---

Installation

Prerequisites

• Node.js v20 or later
• A Retool instance with admin permissions
• A Retool API access token (Settings > API tokens) with read/write access for Custom Component Libraries

Setup

git clone <this-repo-url> mapnow
cd mapnow
npm install
npx retool-ccl login
npx retool-ccl init

---

Development

Start the dev server to sync changes to your Retool instance on every save:

npm run dev

Then open any Retool app, click Add components, and drag the MapLeaflet component onto the canvas.

---

How to Use

Marker Data Format

The component exposes a markers state array. Pass an array of marker objects from Retool:

Property	Type	Required	Description
latitude	number	Yes	Latitude of the marker
longitude	number	Yes	Longitude of the marker
tooltipText	string	Yes	Text shown when hovering over the marker
color	string	No	Hex color of the pin (defaults to #E74C3C)

Example

[
  { "latitude": 24.7136, "longitude": 46.6753, "tooltipText": "Riyadh", "color": "#E74C3C" },
  { "latitude": 21.3891, "longitude": 39.8579, "tooltipText": "Mecca", "color": "#3498DB" },
  { "latitude": 21.4858, "longitude": 39.1925, "tooltipText": "Jeddah", "color": "#2ECC71" },
  { "latitude": 24.4539, "longitude": 39.6142, "tooltipText": "Medina", "color": "#F39C12" }
]

Setting Markers in Retool

1. Select the MapLeaflet component on your canvas
2. In the inspector panel, find the markers property
3. Set it to a JSON array (from a query, transformer, or hardcoded value)
4. Each marker will appear on the map with its specified color and tooltip

Color Options

You can use any hex color for markers. Some examples:

Color	Hex Code
Red	#E74C3C
Blue	#3498DB
Green	#2ECC71
Orange	#F39C12
Purple	#9B59B6
Black	#000000

---

Deploy

When ready for production:

npm run deploy

This pushes an immutable version to your Retool instance. To switch versions, go to Settings > Custom Component Libraries in Retool.

---

Tech Stack

• React 18
• Leaflet + react-leaflet 4.x
• OpenStreetMap tiles (free, no API key)
• @tryretool/custom-component-support