@mappedin/mappedin-js 6.0.1-beta.8 → 6.1.0

package/README.md

@@ -1,12 +1,13 @@
-# Mappedin Web SDK
+# Mappedin JS
 
 ## Resources
 
 - [Mappedin Developer Portal](https://developer.mappedin.com)
-- [Releases and Roadmap](https://developer.mappedin.com/releases/)
-- [Getting Started Guide](https://developer.mappedin.com/web/v6/guides/getting-started/)
-- [API Reference](https://developer.mappedin.com/web/v6/api-reference/)
-- [Trial Keys](https://developer.mappedin.com/web/v6/trial-keys-and-maps/)
+- [Releases and Roadmap](https://developer.mappedin.com/docs/roadmap)
+- [Getting Started Guide](https://developer.mappedin.com/web-sdk/getting-started)
+- [Migration Guide](https://developer.mappedin.com/web-sdk/migration-guide)
+- [API Reference](https://developer.mappedin.com/web-sdk/api-reference)
+- [Demo Keys & Maps](https://developer.mappedin.com/docs/demo-keys-and-maps)
 - [License](https://info.mappedin.com/terms/sdk)
 
 ## Usage
@@ -32,7 +33,7 @@ async function init() {
 	});
 	const mapContainer = document.getElementById('app');
 	const map = await show3dMap(mapContainer, mapData);
-	map.Labels.all();
+	map.Labels.__EXPERIMENTAL__all();
 	map.on('click', event => {
 		const { coordinate } = event;
 		const { latitude, longitude } = coordinate;
@@ -42,4 +43,99 @@ async function init() {
 init();
 ```
 
-For full documentation, read our [Getting Started guide on the Developer Portal](https://developer.mappedin.com/web/v6/guides/getting-started/).
+For full documentation, read our [Getting Started guide on the Developer Portal](https://developer.mappedin.com/web-sdk/getting-started).
+
+### Content Security Policy (CSP) Support
+
+The SDK provides solutions for applications that use a strict Content Security Policy.
+
+#### Minimum Required CSP Rules
+
+The following CSP directives are the minimum requirements to run the SDK:
+
+| Purpose                | CSP Directive | Required Value         | Notes                                                                |
+| ---------------------- | ------------- | ---------------------- | -------------------------------------------------------------------- |
+| **Images & Textures**  | `img-src`     | `*.mappedin.com data:` | Required for loading map textures and images                         |
+| **API & Font Loading** | `connect-src` | `*.mappedin.com data:` | `*.mappedin.com` for map data; `data:` only needed for default fonts |
+| **Web Workers**        | `worker-src`  | `'self' blob:`         | Enables collision detection and MapLibre workers                     |
+
+**Example minimum CSP header:**
+
+```
+Content-Security-Policy: img-src *.mappedin.com data:; connect-src *.mappedin.com data:; worker-src 'self' blob:;
+```
+
+**Alternative for strict CSP environments:**
+If your CSP does not allow `blob:`, you can set up a transparent proxy on your server that forwards requests from `https://YOUR.DOMAIN/mappedin-web-redirector/*` to `https://cdn.mappedin.com/web2/release/*`. This removes the need for additional CSP rules while maintaining functionality.
+
+#### Web Worker CSP Solution
+
+If your CSP blocks `blob:` URLs or `unsafe-eval` directives (affecting web workers), you can host worker scripts externally:
+
+```javascript
+import { setWorkerUrl } from '@mappedin/mappedin-js';
+
+// Call this before initializing any maps
+setWorkerUrl('/path/to/workers');
+```
+
+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:
+
+```bash
+# Copy worker files to your public directory
+cp -r node_modules/@mappedin/mappedin-js/lib/esm/workers ./public/mappedin-workers
+```
+
+```javascript
+// In your JavaScript
+setWorkerUrl('/mappedin-workers');
+```
+
+#### 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
+
+```html
+<!-- In your HTML file -->
+<link rel="stylesheet" href="/path/to/mappedin-js/index.css" />
+```
+
+```javascript
+// In your JavaScript
+const mapView = await show3dMap(element, venue, {
+	injectStyles: false, // Disable automatic style injection
+});
+```
+
+For your build process:
+
+```bash
+# Copy CSS file to your public directory
+cp node_modules/@mappedin/mappedin-js/lib/index.css ./public/
+```
+
+#### 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:
+
+```javascript
+import { disableText3DWorker } from '@mappedin/mappedin-js';
+// After initializing your map
+disableText3DWorker();
+
+// Now you can use Text3D features without errors or warnings
+mapView.Text3D.labelAll();
+```
+
+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.