polskalokalnie/.agents/skills/remotion-best-practices/remotion-markup/remotion-maps/techniques/static-map/TECHNIQUE.md

name, description

name	description
remotion-maps-static	Create a deterministic static locator map in Remotion when neither the camera nor geographic data animates.

Static map

Use a static image when the map only provides location context. This is the smallest, fastest, and most deterministic map technique.

Build

1. Export or request a map image at the composition's final aspect ratio and at least its rendered pixel dimensions.
2. Store the image in the Remotion project's public/ directory.
3. Render it with CanvasImage and staticFile().
4. Add labels or markers as ordinary Remotion elements if they remain fixed.

import React from 'react';
import {AbsoluteFill, CanvasImage, staticFile} from 'remotion';

export const StaticMap: React.FC = () => {
	return (
	  <>
  		<CanvasImage
  			src={staticFile('locator-map.png')}
  			style={{width: '100%', height: '100%', objectFit: 'cover'}}
  		/>
		</>
	);
};

Overlays and Interactivity

Follow Remotion Interactivity best practices and Remotion Markup Best practices for elements.