Embed Guide: Helping Partners Integrate EVE Frontier Maps

Streamers wanted overlays. Tool makers wanted embedded maps. Community sites wanted widgets. Everyone had the same question: "How do I put EF-Map on my site?" So we built an interactive configurator that generates copy-paste embed codes with live previews.

The Embed Guide Page

Visit /embed-guide to access the interactive configurator. It's designed for non-technical users—no documentation reading required. You toggle options, see a live preview, and copy the generated code.

Configuration Options

Starting Position

Control where the map loads initially:

Visual Styling

Match your site's theme:

Feature Toggles

Control which features are available in the embed:

Streamer-Optimized Mode

For Twitch/YouTube overlays, we added a minimal theme that:

• Removes all UI chrome (panels, buttons, branding)
• Uses a transparent background (when supported)
• Keeps only the 3D star map
• Respects custom accent colors for route highlights

<iframe 
  src="https://ef-map.com/?embed=true&theme=minimal&routing=false"
  width="400"
  height="300"
  frameborder="0"
  allow="fullscreen"
></iframe>

The Interactive Preview

The configurator includes a live preview that updates instantly. Technical implementation:

// EmbedGuidePage.tsx
const [config, setConfig] = useState({
  theme: 'dark',
  search: true,
  routing: true,
  zoom: 1,
  // ...
});

// Generate URL from config
const embedUrl = useMemo(() => {
  const params = new URLSearchParams();
  params.set('embed', 'true');
  
  if (config.theme !== 'dark') params.set('theme', config.theme);
  if (!config.search) params.set('search', 'false');
  if (!config.routing) params.set('routing', 'false');
  if (config.zoom !== 1) params.set('zoom', config.zoom.toString());
  // ...
  
  return `https://ef-map.com/?${params.toString()}`;
}, [config]);

// Live preview updates on every config change
<iframe src={embedUrl} className="preview-frame" />

Code Generation

The configurator generates three output formats:

1. iframe (Most Common)

<iframe 
  src="https://ef-map.com/?embed=true&theme=dark&search=true"
  width="800"
  height="600"
  frameborder="0"
  allow="fullscreen"
  title="EVE Frontier Map"
></iframe>

2. Direct Link

For sharing or linking without embedding:

https://ef-map.com/?system=30004759&zoom=3&theme=minimal

3. JavaScript Widget (Advanced)

For dynamic integration:

<div id="ef-map-container"></div>
<script>
  window.EFMapConfig = {
    container: '#ef-map-container',
    theme: 'dark',
    initialSystem: 30004759,
    onSystemSelect: (system) => {
      console.log('User selected:', system.name);
    }
  };
</script>
<script src="https://ef-map.com/embed.js"></script>

Use Cases in the Wild

Since launching the Embed Guide, we've seen:

• Streaming overlays: Minimal theme at 400×300 in OBS browser source
• Corporation websites: Full-featured embeds showing home system
• Route planning tools: Routing-only embeds for third-party logistics apps
• Wiki articles: Read-only embeds showing specific regions

Performance Considerations

Embedding EF-Map means loading Three.js, our SQLite database, and rendering a 3D scene. We optimized for this:

• Lazy loading: Embed only initializes when iframe enters viewport
• Reduced quality: embed=true uses lower-resolution star textures
• Deferred workers: Routing worker only loads if routing=true
• Shared cache: Database is cached across iframe instances on same domain

Related Posts

• Quick Tour: Interactive Onboarding with Driver.js - How we onboard users who land on embedded maps
• Cinematic Mode: Creating a Visual Experience - The visual mode streamers often enable for overlays
• Web Workers: Background Computation - How routing works without blocking the UI
• Jump Bubble Visualization: Thin-Film Shaders - The shader effect visible in embeds