📘 Documentation Technique

Guide développeur complet MapFlow Pro - De prototype à enterprise en 5 minutes
🔥 Designed for Bubble developers
🗺️ Powered by HERE Maps
✅ Production-tested
🚀 V2 Features Available

Quick Demo

✅ https://mapflowpro-demo.bubbleapps.io

Discover MapFlow Pro in action with our detailed screenshots

View Screenshots Gallery 🚀 Live Demo App
🎉
NEW IN V2 - August 2025
🚀 Major Update Available!

MapFlow Pro V2 introduces 4 revolutionary features that transform how you build location-based applications. All V1 configurations remain fully compatible.

V2 Revolutionary Features

🎨 Dynamic Colors System

Color markers automatically by any data field. Perfect for categorizing VTC types, property prices, or delivery status.

// Example: Color by activity color_field: "activity" color_map_json: {"startup":"#10b981", "consulting":"#f59e0b"}

📝 Template Tooltips

Dynamic tooltip content with {{field}} syntax. Add emojis and personalized messages.

// Example: Personalized tooltips tooltip_line1_template: "🤝 {{first_name}}" tooltip_line2_template: "{{activity}} specialist"

📍 Custom SVG Icons

3 professional icon shapes: pin, circle, square. Automatic color coordination with borders.

// Choose your marker style marker_icon_shape: "circle" // pin, circle, square marker_icon_size: 52

🎯 Tooltip Themes

Color tooltips dynamically by data field. Match tooltip colors to marker categories.

// Dynamic tooltip colors tooltip_theme_field: "activity" tooltip_colors_json: {"startup":"#10b981"}

V2 Screenshots Gallery

Dynamic Colors Configuration

Template Tooltips System

Custom SVG Icons

Tooltip Themes

Migration Guide V1 → V2

✅ Seamless Upgrade

Full Backward Compatibility: All your existing V1 configurations continue to work. V2 features are optional additions that enhance your existing setup.

  1. Update Plugin: Your V1 setup remains unchanged and functional
  2. Choose V2 Features: Enable only the features you need (colors, templates, icons, themes)
  3. Configure Gradually: Add V2 features one at a time to existing projects
  4. Test Enhanced UI: Preview improved visual appeal with minimal effort

V2 Business Impact

  • Visual Appeal: Instantly more professional and engaging interfaces
  • User Experience: Personalized tooltips and intuitive color coding
  • Scalability: Handle complex categorization with ease
  • Customization: Match your brand colors and styling requirements
🚀
From Demo App to Production Platform + Marketplace Requirements

MapFlow Pro is the all-in-one mapping & pricing plugin for Bubble. Build scalable VTC, delivery, or real estate apps with HERE Maps enterprise infrastructure.

Combines HERE Maps infrastructure with dynamic pricing capabilities. Build location-based services with professional features.

🎯 Marketplace Success Requirements

✅ Live Demo App - Your Key to Approval

CRITICAL: Bubble requires a fully functional demo app that showcases ALL plugin features. This is your primary submission asset.

Demo App Requirements:

  • Public visibility: Set privacy to "View only"
  • All features working: Markers, routing, pricing, tooltips
  • Real data demonstration: Not placeholder content
  • Professional presentation: Clean UI, no errors
  • Editor link included: Mandatory in plugin description

📱 Demo App Best Practices

  1. Feature Coverage: Every plugin capability must be demonstrated
  2. User Experience: Intuitive interface that works on mobile
  3. Performance: Fast loading, no crashes with realistic data
  4. Documentation: Clear explanations of what each feature does

URLs Required for Submission:

  • Runtime URL: Your live demo for users to test
  • Editor URL: For Bubble review team to inspect implementation
🎨
Ultra-Custom Tooltips & Large-Scale Markers

Enterprise Tooltip System - 20 Parameters

Approximately 20 tooltip parameters (content + styling), more than most mapping plugins for Bubble.

Flexible Content

// Dynamic or static content tooltip_line1_content: Current User's first_name tooltip_line2_content: Current User's activity tooltip_line3_content: Current User's location tooltip_image_content: Current User's profile_image

Professional Styling

// Complete customization tooltip_background_color: "#ffffff" tooltip_border_radius: 8 tooltip_width: 180 tooltip_font_size: 12 tooltip_text_color: "#333333" tooltip_image_height: 40

Dual Configuration Mode

Demo (static):

tooltip_line1_content: "Office" tooltip_line2_content: "123 Street" tooltip_line3_content: "London" tooltip_image_content: "https://example.com/office.jpg"

Dynamic (Field-based):

tooltip_line1_content: "Search for 'Current cell's Business Name'" tooltip_line2_content: "Search for 'Current cell's Address'" tooltip_line3_content: "Search for 'Current cell's City'" tooltip_image_content: "Search for 'Current cell's Image URL'"
💰
Geocoding & Pricing Integration

HERE Maps Geocoding Actions

Convert addresses to geographic coordinates. Essential for pinpointing user locations on the map.

// Run a workflow action to get coordinates from an address address: "Eiffel Tower, Paris, France" result: Latitude: 48.8584, Longitude: 2.2945

Dynamic Pricing Features

Calculate travel costs based on distance or time. Ideal for VTC and delivery apps.

// Calculate price based on travel distance start_lat: 48.8584 start_lng: 2.2945 end_lat: 48.8738 end_lng: 2.2950 price_per_km: 1.25 base_fare: 5.00 result: 2.54 km, price = €8.18
🚗
Routing & Directions API

Multi-mode Routing

Draw routes for cars, bicycles, or pedestrians. Perfect for all types of location apps.

Feature MapFlow Pro V1 Most Plugins
Multi-stop Routes ✅ Yes ❌ No
Routing Modes (Car/Pedestrian/Bike) ✅ Yes ❌ No
Traffic Integration ✅ Yes ❌ No
🌐
Webflow Integration (Beta)

MapFlow Pro is now compatible with the Webflow SDK. Integrate powerful mapping features directly into your Webflow projects using custom code.

The Webflow SDK enables advanced features like dynamic pricing and routing within your Webflow site, turning it into a powerful application.

Live Webflow Demo:

https://mapflow-webflow.webflow.io/