Integration

Notion to Mapbox

Export your Notion database to GeoJSON for custom Mapbox GL JS maps, Studio styles, and data-driven visualizations

Free • No credit card required

Simple Process

How It Works

1

Export GeoJSON

Download your Notion places as GeoJSON

2

Upload to Mapbox

Add as tileset in Studio or load directly in GL JS

3

Style Your Map

Customize markers, colors, and interactivity

4

Deploy

Embed in your website or app with Mapbox GL JS

Learn More

What is GEOJSON?

Mapbox is the leading platform for custom map development, powering maps for Strava and The New York Times. Export your Notion database to GeoJSON and load it into Mapbox GL JS for fully customizable web maps. Upload to Mapbox Studio to create tilesets for high-performance rendering. Perfect for developers building location-based applications with Notion as a CMS.

Compatible Apps

Mapbox GL JS
Mapbox Studio
Mapbox Mobile SDKs
deck.gl
Kepler.gl
React Map GL
Vue Mapbox GL

Use Cases

What You Can Do

Custom Web Maps

Build branded interactive maps with your Notion data and custom Mapbox styles

Data Visualization

Create heatmaps, clusters, and data-driven styling from Notion properties

Location Apps

Use Notion as a CMS and Mapbox for rendering in your web or mobile app

Real-Time Dashboards

Fetch GeoJSON from NotionToMaps API for live-updating map dashboards

Portfolio Sites

Add custom location maps to portfolio and showcase sites

Benefits

Why Export to GEOJSON?

Full Customization

Complete control over map styling, markers, and behavior

High Performance

WebGL rendering handles thousands of points smoothly

Data-Driven Styling

Style based on any Notion property dynamically

Developer Friendly

Well-documented APIs and active community support

FAQ

Frequently Asked Questions

How do I load GeoJSON into Mapbox GL JS?

Add as a source: map.addSource('notion', {type: 'geojson', data: 'your-file.json'}). Then add a layer to render the points with custom styling.

Should I use a tileset or load GeoJSON directly?

For <1000 points, load GeoJSON directly for simplicity. For larger datasets, upload to Mapbox Studio as a tileset for better performance with vector tiles.

Can I style markers based on Notion properties?

Yes! Use data-driven styling in Mapbox GL JS. Access any Notion property via feature.properties and use match or interpolate expressions for dynamic styling.

How do I create popups with Notion data?

Add a click handler to your layer. Access feature.properties to display any Notion property in the popup HTML. All your Notion data is available.

Can I use the NotionToMaps API directly in my app?

Yes! Fetch from /api/map/[database-id] to get GeoJSON. Cache appropriately (we cache for 15 minutes). Perfect for near-real-time updates from Notion.

How do I create a heatmap from my Notion locations?

Load GeoJSON as a source, add a heatmap layer type. Use Notion properties like "visitors" or "rating" for the heatmap weight expression.

Can I use this with React or Vue?

Absolutely! Use react-map-gl or vue-mapbox-gl. Load the GeoJSON as a Source component and render with Layer components. Same workflow, framework-friendly.

Ready to export Notion to Mapbox?

Connect your Notion and start mapping your places today.

Free • No credit card required