Mappedin JS

Resources

• Mappedin Developer Portal
• Releases and Roadmap
• Getting Started Guide
• API Reference
• Demo Keys & Maps
• License

Usage

Installation

npm install @mappedin/mappedin-js

or

yarn add @mappedin/mappedin-js

Getting Started

import { getMapData, show3dMap } from '@mappedin/mappedin-js';

async function init() {
	const mapData = await getMapData({
		key: '<key>',
		secret: '<secret>',
		mapId: '<mapId>',
	});
	const mapContainer = document.getElementById('app');
	const map = await show3dMap(mapContainer, mapData);
	map.Labels.all();
	map.on('click', event => {
		const { coordinate } = event;
		const { latitude, longitude } = coordinate;
		console.log(`Map was clicked at ${latitude}, ${longitude}`);
	});
}
init();
Copy

For full documentation, read our Getting Started guide on the Developer Portal.

Content Security Policy (CSP) Support

The SDK provides solutions for applications that use a strict Content Security Policy.

Web Worker CSP Solution

If your CSP blocks blob: URLs or unsafe-eval directives (affecting web workers), you can host worker scripts externally:

import { setWorkerUrl } from '@mappedin/mappedin-js';

// Call this before initializing any maps
setWorkerUrl('/path/to/workers');
Copy

This function configures both the MapLibre and collision detection workers to load from external URLs. To set this up:

1. Copy the worker files from node_modules/@mappedin/mappedin-js/lib/esm/workers/ to your web server
2. Call setWorkerUrl with the base URL path to these files
3. Ensure your CSP allows scripts from this location

Example in a build script:

# Copy worker files to your public directory
cp -r node_modules/@mappedin/mappedin-js/lib/esm/workers ./public/mappedin-workers
Copy

// In your JavaScript
setWorkerUrl('/mappedin-workers');
Copy

CSS Injection CSP Solution

If your CSP blocks inline styles (style-src 'unsafe-inline'), use external CSS loading instead:

1. Load the SDK's CSS with a <link> tag in your HTML
2. Disable automatic style injection in show3dMap options

<!-- In your HTML file -->
<link rel="stylesheet" href="/path/to/mappedin-js/index.css">
Copy

// In your JavaScript
const mapView = await show3dMap(element, venue, {
  injectStyles: false, // Disable automatic style injection
});
Copy

For your build process:

# Copy CSS file to your public directory
cp node_modules/@mappedin/mappedin-js/lib/index.css ./public/
Copy

Text3D Worker CSP Solution (Optional)

If you use Text3D features (like labelAll()) in a CSP-restricted environment, you'll need to disable the Text3D worker if you don't want see error message:

import { disableText3DWorker } from '@mappedin/mappedin-js';
// After initializing your map
disableText3DWorker();

// Now you can use Text3D features without errors or warnings
mapView.Text3D.labelAll();
Copy

This disables the worker and processes text on the main thread instead, allowing Text3D to work in CSP environments that block worker creation.

You can apply any combination of these solutions based on your specific CSP restrictions and SDK feature usage.