📚 Quick Start Guide
1. 🎯 Basic Setup
  • Drag the World Map element onto your page
  • Select your desired map type (World, North America, Europe, etc.)

2. 📊 Adding Data
  • Format your data as a list of objects with 'iso' and 'value' properties:
    Example: {"iso":"USA","value":100},{"iso":"CAN","value":80}
  • Connect your data to the 'Region Data' property in the element's settings

3. 🎨 Customization Options
  Color Mode:
  • Palette: Assign specific colors to specific values
  • Spectrum: Create a gradient based on data values
 
  Visual Settings:
  • Default Region Color: Color for regions without data
  • Region Border Color: Color of borders between regions
  • Region Border Width: Thickness of region borders

4. 💡 Interactive Features
  Enable/Configure:
  • Tooltips: Show data when hovering over regions
  • Zoom: Allow users to zoom in/out of the map
  • Click Events: Trigger workflows when regions are clicked

5. 🔄 Dynamic States
  The plugin exposes these states:
  • Hovered Region Name
  • Hovered Region Value
  • Hovered Region ISO
  • Selected Region Name
  • Selected Region Value
  • Selected Region ISO

🚨 Common ISO A3 Codes:
- USA - United States
- CAN - Canada
- MEX - Mexico
- GBR - United Kingdom
- FRA - France
- DEU - Germany
(For a complete list of ISO codes, check the documentation page)

🆘 Troubleshooting:
- If data not appearing: Verify ISO codes and data format
- If colors not updating: Check color mode settings

Editor: https://bubble.io/page?id=shipflamedemo&tab=tabs-1&name=world_map&type=page
Demo & instructions: https://shipflamedemo.bubbleapps.io/version-test/world_map

Need more help? Contact support [email protected] or check our documentation for detailed examples!