🌍 New Plugin: Flat & 3D World Maps for Bubble

[paulogustavopeixoto]

Hey everyone,

I just published a new plugin for Bubble: Interactive Flat World Map & 3D Globe (powered by ECharts).

This plugin makes it super easy to drop a customizable world map or globe into your Bubble app — perfect for dashboards, data visualizations, travel apps, or anything that needs an interactive map.

Features

• Flat world map or fully interactive 3D globe

• Add markers with just a JSON list (lat/lng + optional height for 3D “buildings”)

• Hover & selection states + Bubble events for workflows

• Light & dark themes, plus optional globe textures (day/night/minimal)

• Style everything (background, area colors, marker size/colors, borders, etc.)

• Built-in demo page with copy-paste examples

How it works (super simple):

1. Drop the element → choose WorldFlatMap or WorldGlobe3D

2. Paste your markers JSON

[
  { "id": "nyc", "name": "New York",        "lng": -74.0060,  "lat": 40.7128, "height": 820, "color": "#82b1ff" },
  { "id": "la",  "name": "Los Angeles",     "lng": -118.2437, "lat": 34.0522, "height": 760, "color": "#ffb74d" },
  { "id": "chi", "name": "Chicago",         "lng": -87.6298,  "lat": 41.8781, "height": 680, "color": "#ce93d8" },
  { "id": "hou", "name": "Houston",         "lng": -95.3698,  "lat": 29.7604, "height": 520, "color": "#ff8a80" },
  { "id": "phx", "name": "Phoenix",         "lng": -112.0740, "lat": 33.4484, "height": 480, "color": "#ffcc80" },
  { "id": "phi", "name": "Philadelphia",    "lng": -75.1652,  "lat": 39.9526, "height": 500, "color": "#9fa8da" },
  { "id": "sat", "name": "San Antonio",     "lng": -98.4936,  "lat": 29.4241, "height": 430, "color": "#80cbc4" },
  { "id": "sd",  "name": "San Diego",       "lng": -117.1611, "lat": 32.7157, "height": 420, "color": "#a5d6a7" },
  { "id": "dal", "name": "Dallas",          "lng": -96.7970,  "lat": 32.7767, "height": 460, "color": "#bcaaa4" },
  { "id": "sjo", "name": "San Jose",        "lng": -121.8863, "lat": 37.3382, "height": 400, "color": "#80deea" },
  { "id": "aus", "name": "Austin",          "lng": -97.7431,  "lat": 30.2672, "height": 390, "color": "#90caf9" },
  { "id": "jax", "name": "Jacksonville",    "lng": -81.6557,  "lat": 30.3322, "height": 360, "color": "#ffab91" },
  { "id": "ftw", "name": "Fort Worth",      "lng": -97.3308,  "lat": 32.7555, "height": 350, "color": "#b39ddb" },
  { "id": "col", "name": "Columbus",        "lng": -82.9988,  "lat": 39.9612, "height": 380, "color": "#4dd0e1" },
  { "id": "clt", "name": "Charlotte",       "lng": -80.8431,  "lat": 35.2271, "height": 370, "color": "#f48fb1" },
  { "id": "sfo", "name": "San Francisco",   "lng": -122.4194, "lat": 37.7749, "height": 540, "color": "#64b5f6" },
  { "id": "ind", "name": "Indianapolis",    "lng": -86.1581,  "lat": 39.7684, "height": 340, "color": "#d1c4e9" },
  { "id": "sea", "name": "Seattle",         "lng": -122.3321, "lat": 47.6062, "height": 520, "color": "#aed581" },
  { "id": "den", "name": "Denver",          "lng": -104.9903, "lat": 39.7392, "height": 450, "color": "#90a4ae" },
  { "id": "dc",  "name": "Washington, DC",  "lng": -77.0369,  "lat": 38.9072, "height": 510, "color": "#f06292" },
  { "id": "bos", "name": "Boston",          "lng": -71.0589,  "lat": 42.3601, "height": 530, "color": "#81c784" },
  { "id": "elp", "name": "El Paso",         "lng": -106.4850, "lat": 31.7619, "height": 330, "color": "#d7ccc8" },
  { "id": "bna", "name": "Nashville",       "lng": -86.7816,  "lat": 36.1627, "height": 355, "color": "#ffd54f" },
  { "id": "det", "name": "Detroit",         "lng": -83.0458,  "lat": 42.3314, "height": 410, "color": "#b0bec5" },
  { "id": "okc", "name": "Oklahoma City",   "lng": -97.5164,  "lat": 35.4676, "height": 340, "color": "#a1887f" },
  { "id": "por", "name": "Portland",        "lng": -122.6765, "lat": 45.5231, "height": 410, "color": "#80cbc4" },
  { "id": "lvg", "name": "Las Vegas",       "lng": -115.1398, "lat": 36.1699, "height": 450, "color": "#ff80ab" },
  { "id": "mem", "name": "Memphis",         "lng": -90.0490,  "lat": 35.1495, "height": 330, "color": "#cddc39" },
  { "id": "bal", "name": "Baltimore",       "lng": -76.6122,  "lat": 39.2904, "height": 400, "color": "#90caf9" },
  { "id": "mke", "name": "Milwaukee",       "lng": -87.9065,  "lat": 43.0389, "height": 300, "color": "#e1bee7" }
]

3. Style it to match your app

4. Trigger workflows from map events (e.g., area_hovered, area_selected)

Use cases

• Show customer locations on a globe

• Highlight regions in a dashboard

• Data storytelling with interactive visuals

• Any app where maps meet interactivity

Check out the demo + examples: [Link]

Install here: [Link]

Would love to hear feedback — and if you build something cool with it, please share!