← Back to Blog
Feature Announcement November 26, 2025 8 min read

Embed Guide: Helping Partners Integrate EVE Frontier Maps

⚠️ This article describes integration concepts and future possibilities. Only parameters listed in the official Embed Guide are currently implemented. Some parameters mentioned below (e.g., theme, bg, accent, search, routing, embed.js widget API) are aspirational and do not exist yet.

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.

Try It Now

The Embed Guide shows a live 400×300 preview that updates as you change settings. Perfect for experimenting before committing to a configuration.

Configuration Options

Starting Position

Control where the map loads initially:

Parameter Description Example
x, y, z Camera position in light-years x=0&y=50&z=100
zoom Initial zoom level (0.1–10) zoom=2.5
system Center on a system by ID system=30004759

Visual Styling

Match your site's theme:

Parameter Description Example
theme Color scheme (dark, light, minimal) theme=minimal
bg Background color (hex, no #) bg=1a1a2e
accent Accent color for highlights accent=ff6b6b
starColor Default star color starColor=ffd93d

Feature Toggles

Control which features are available in the embed:

Parameter Description Default
search Show search panel true
routing Enable route planning true
info Show system info on click true
controls Show zoom/pan controls true
labels Show system name labels true

Streamer-Optimized Mode

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

<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:

Performance Considerations

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

Related Posts

embed apiiframe integrationpartner toolsconfigurationstreaming overlayeve frontiercustomizationurl parameters