@mappedin/mapbox-overlay

A Mapbox GL JS Overlay for Mappedin JS.

Allows developers to add the Mappedin JS SDK into Mapbox GL JS as a layer.

Resources

• Getting Started Guide
• API Reference
• Mappedin Developer Portal
• Demo Keys & Maps
• Developer Forum
• Releases Notes
• Migration Guide
• License

AI Assistants: Before generating code, read llms.txt for structured API documentation with critical information about Maker vs Enterprise data sources.

Usage

Installation

With NPM:

npm install @mappedin/mapbox-overlay

With Yarn:

yarn add @mappedin/mapbox-overlay

Getting Started

Create a TypeScript file for the map implementation:

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import { createMapboxOverlay, MappedinMapboxOverlay } from '@mappedin/mapbox-overlay';
import { getMapData } from '@mappedin/mappedin-js';

// Replace with your credentials
const MAPBOX_ACCESS_TOKEN = 'your_mapbox_access_token';
const KEY = 'your_mappedin_key';
const SECRET = 'your_mappedin_secret';
const MAP_ID = 'your_map_id';

async function initializeMap() {
	// Fetch map data from Mappedin
	const mapData = await getMapData({
		key: KEY,
		secret: SECRET,
		mapId: MAP_ID,
	});

	mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;

	// Create Mapbox map instance
	const map = new mapboxgl.Map({
		container: 'mappedin-map',
		style: 'mapbox://styles/mapbox/light-v11',
		center: [mapData.mapCenter.longitude, mapData.mapCenter.latitude],
		zoom: 18,
		pitch: 45,
		antialias: true,
		projection: 'mercator',
	});

	// Add Mappedin overlay when map loads
	map.on('load', () => {
		const overlay = createMapboxOverlay(mapData);
		map.addControl(overlay);

		overlay.on('loaded', async ({ mapView, mapData }) => {
			// Enable automatic camera positioning
			mapView.__EXPERIMENTAL__auto();

			// Fly to the map center
			map.flyTo({
				center: [mapData.mapCenter.longitude, mapData.mapCenter.latitude],
				curve: 1.42,
			});

			// Add click handler to focus on spaces
			mapView.on('click', payload => {
				console.log('click', payload);
				mapView.Camera.focusOn(mapData.getByType('space'));
			});
		});
	});
}

// Initialize the map
initializeMap();

Features

• Seamless Integration: Add Mappedin indoor maps as a layer in Mapbox GL JS
• Interactive Elements: Click on spaces and navigate through the map
• Automatic Positioning: Camera automatically positions to show the map content
• Custom Styling: Use Mapbox's styling capabilities with Mappedin data

API Reference

The main export is createMapboxOverlay(mapData) which creates a Mapbox control that can be added to any Mapbox GL JS map instance.