Map View

Display location-based data on an interactive map in NocoDB

Map view allows you to visualize geospatial data on an interactive map, perfect for location-based applications and geographic analysis.

Overview

Map view transforms geographic data into an interactive map display with:

• Interactive maps powered by mapping libraries
• Marker clustering for dense data sets
• Popup information showing record details
• Zoom and pan controls for navigation

Map view requires a Geography or Geometry column type to store location data (latitude/longitude coordinates or GeoJSON).

Configuration

Geographic Data Column

The core configuration for Map view is selecting which column contains the geographic data.

fk_geo_data_col_id · string · required

The ID of the column containing geographic data (coordinates or GeoJSON)

Supported Data Formats

Map view supports various geographic data formats:

• Lat/Long Coordinates: "40.7128,-74.0060" (latitude, longitude)
• GeoJSON Point: {"type": "Point", "coordinates": [-74.0060, 40.7128]}
• GeoJSON Polygon: For area boundaries
• GeoJSON LineString: For routes and paths

Use Cases

Store Locations

Display retail locations, offices, or branch networks on a map

Delivery Routes

Track delivery addresses and optimize routing

Property Listings

Show real estate listings with location-based search

Event Venues

Map conference venues, meetup locations, or tour stops

Creating a Map View

1. Add a Geography column

   First, ensure your table has a column for geographic data:

   1. Click + to add a new column
   2. Choose Geometry or GeoJSON field type
   3. Name it (e.g., “Location”)
   4. Save the column
2. Create the Map view

   1. Click Create View in the views sidebar
   2. Select Map as the view type
   3. Name your view (e.g., “Store Locations Map”)
   4. Choose the geographic data column
   5. Click Create View
3. Configure display options

   Customize how your map appears:

   • Default zoom level: Set initial map zoom
   • Default center: Set initial map center point
   • Marker style: Customize pin appearance
   • Popup fields: Choose which fields appear in marker popups

Working with Map View

Adding Records

Add new records directly from the map:

1. Click the Add Marker button
2. Click on the map to place a marker
3. Fill in the record details in the popup form
4. Save the record

Or add coordinates to existing records in Grid view.

Viewing Record Details

Click any marker on the map to:

• View record details in a popup
• Edit field values
• Open the full record
• Delete the record

Filtering and Searching

Apply filters to control which records appear on the map:

1. Click the Filter button
2. Add filter conditions
3. The map updates to show only matching records

Use the search box to find specific locations or records.

Marker Clustering

When multiple markers are close together, they automatically cluster:

• Clusters show the number of markers
• Click a cluster to zoom in
• Zoom in enough to see individual markers

API Integration

Create and manage Map views via the API:

Create Map View

const response = await fetch(`https://app.nocodb.com/api/v1/db/meta/tables/${tableId}/views`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'xc-token': 'YOUR_API_TOKEN'
  },
  body: JSON.stringify({
    title: 'Store Locations',
    type: 5, // MAP view type
    fk_geo_data_col_id: 'cl_xxxxxx' // Geographic data column ID
  })
});

Update Map View

const response = await fetch(`https://app.nocodb.com/api/v1/db/meta/maps/${mapViewId}`, {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
    'xc-token': 'YOUR_API_TOKEN'
  },
  body: JSON.stringify({
    fk_geo_data_col_id: 'cl_yyyyyy', // Change geographic column
    meta: {
      defaultZoom: 12,
      defaultCenter: { lat: 40.7128, lng: -74.0060 }
    }
  })
});

Best Practices

Validate coordinate data

Ensure latitude and longitude values are valid:

• Latitude: -90 to 90
• Longitude: -180 to 180
• Use consistent format across records

Use marker clustering

For large datasets (100+ locations), enable clustering to improve performance and readability.

Optimize popup content

Show only essential fields in marker popups:

• Name or identifier
• 2-3 key details
• Link to full record

Set appropriate default view

Configure the default zoom and center to show your data effectively:

• Zoom out for nationwide/global data
• Zoom in for city-level data
• Center on the average location of your records

Technical Details

MapView Model

The MapView model from packages/nocodb/src/models/MapView.ts contains:

{
  fk_view_id: string;           // Parent view ID
  title: string;                // View title
  base_id?: string;             // Base ID
  source_id?: string;           // Data source ID
  fk_geo_data_col_id?: string;  // Geographic data column ID
  meta?: {                      // View configuration
    defaultZoom?: number;
    defaultCenter?: { lat: number; lng: number };
    markerStyle?: object;
  };
}

Geographic Column Types

Map view works with these column types:

• Geometry: Stores geographic shapes and coordinates
• GeoJSON: Stores GeoJSON-formatted geographic data
• Custom formula fields that output coordinate strings

Limitations

• Map view requires at least one geographic data column in the table
• Very large datasets (10,000+ markers) may have performance impacts
• Offline map functionality depends on the mapping library used

Related

• Grid View - Traditional spreadsheet view
• Fields - Learn about field types including Geometry
• Filters & Sorting - Apply filters to map data