​
Overview

Mapbox integration allows you to seamlessly add powerful mapping features to your Creatr-generated web applications. With just a few clicks, you can implement everything from basic location displays to advanced interactive maps with custom styling, 3D visualization, and real-time data rendering—all without writing complex code.

​
Why Use Mapbox?

Mapbox provides industry-leading mapping technology that powers applications across web and mobile platforms:
  • High-performance rendering: Maps load 30% faster with smooth animations and transitions
  • Cross-platform compatibility: Consistent map experiences across web and mobile applications
  • Customizable styling: Beautiful pre-designed styles or complete design flexibility
  • Advanced visualization: Support for 2D and 3D visualization, including buildings and terrain
  • Custom data integration: Easy uploading and visualization of your location data

​
Integration Process

Adding Mapbox to your Creatr application is simple:

​
1. Access Mapbox Integration

In the Creatr interface, locate and click on the Mapbox icon in the left sidebar to begin the integration process. Mapbox Integration Selection - Light Mode Mapbox Integration Selection - Dark Mode

​
2. Choose Your Integration Method

Select whether you want to use your own Mapbox API key or use Creatr’s built-in integration:
  • Use Creatr’s integration: Get started immediately without any additional setup
  • Use your own API key: Connect your existing Mapbox account for advanced usage and customization
Mapbox Integration Options - Light Mode Mapbox Integration Options - Dark Mode

​
Option A: Using Creatr’s Built-in Integration

This is the quickest way to get started. Simply click on “Use Creatr’s Integration” and you’ll have immediate access to Mapbox features without needing to create an account or manage API keys.

​
Option B: Using Your Own Mapbox API Key

If you prefer to use your own Mapbox account (for custom usage limits or billing preferences), select “Use Your Own API Key” and you’ll be prompted to enter your Mapbox access token: Enter Your Mapbox API Key - Light Mode Enter Your Mapbox API Key - Dark Mode
Note: You can switch between using Creatr’s integration and your own API key at any time by revisiting the Mapbox integration section in the sidebar.

​
3. Describe Your Map Implementation

After selecting your integration method, simply describe what map features you want in your application using the Creatr chat interface. For example: 
"Add an interactive map centered on San Francisco with custom markers for our store locations"

"Create a real estate listing page with a map showing property locations and price filters"

​
Map Features You Can Implement

Once Mapbox is integrated, you can add a wide range of mapping capabilities to your application:

​
Map Types and Styles

Implement different map styles to match your application’s design:
  • Standard: Modern 3D map with dynamic lighting and landmark buildings
  • Light/Dark: Clean, minimalist maps for different UI themes
  • Streets: Detailed street-level mapping
  • Outdoors: Terrain and trail information for outdoor applications
  • Satellite: Aerial imagery with optional street overlays

​
Interactive Features

Add user interaction to your maps:
  • Custom markers and popups: Display important locations with interactive information
  • Zoom and pan controls: Allow users to navigate the map easily
  • Search functionality: Enable users to find places or addresses
  • Geolocation: Show the user’s current location on the map
  • Custom overlays: Add your own data visualizations on top of the map

​
Advanced Capabilities

Implement sophisticated mapping features:
  • 3D buildings and terrain: Create immersive urban environments
  • Custom data visualization: Display your data geographically with points, lines, or polygons
  • Heatmaps: Show density of data points with color gradients
  • Route display: Show directions between locations
  • Offline capabilities: Enable maps to work without internet connection (mobile apps)

​
Use Cases

​
Store Locator

Create a store finder that helps customers locate your physical locations on a map. 
"Add a store locator map that shows all our retail locations and allows users to search by zip code"

​
Real Estate Applications

Display property listings on a map with filters for price, features, and location. 
"Create a real estate map showing available properties with price filters and property detail popups"

​
Travel & Tourism

Build interactive travel guides with points of interest and routes. 
"Add a city guide map showing tourist attractions, restaurants, and hotels with custom icons for each category"

​
Delivery Tracking

Show delivery zones or tracking information on a map. 
"Create a delivery zone map that shows service areas with different pricing tiers highlighted in different colors"

​
Data Visualization

Display geographic data trends with custom visualizations. 
"Add a map showing our sales data by region with a color gradient to indicate performance"

​
Tips for Effective Maps

  • Keep it focused: Center your map on the most relevant location for your users
  • Use clear markers: Ensure your map markers and icons are easily distinguishable
  • Optimize for mobile: Consider how your map will function on smaller screens
  • Limit data points: Too many markers can overwhelm users and slow performance
  • Add helpful controls: Include search, zoom, and filter controls for better usability

​
Monitoring Your Mapbox Usage

Once Mapbox is integrated, you can track your usage directly from the Creatr interface. The sidebar will display your current Mapbox integration status and consumption metrics: Mapbox Active State and Usage - Light Mode Mapbox Active State and Usage - Dark Mode This dashboard allows you to monitor:
  • Current integration status
  • API request usage
  • Map loads and views
  • Any usage limitations or thresholds
With Mapbox integration in Creatr, you can quickly add professional-quality maps to your web application without dealing with complex mapping APIs or configuration. Simply describe what you need, and watch as beautiful, interactive maps appear in your project!