← Back to Blog
Feature Announcement 2025-09-14 7 min read

Embed Mode: Bringing the EVE Frontier Map to Your Site

One of EF-Map's collaboration features is Embed Mode—a streamlined, iframe-friendly view designed for partner websites, wikis, and community resources. Instead of forcing users to navigate away from your content, you can surface a focused, interactive star map right in the page.

This post explains how to use Embed Mode, what parameters control the experience, and how communities are using it to enhance their EVE Frontier resources.

The Problem: Context Switching Kills Flow

Imagine you're reading a guide on a community wiki about profitable mining routes in the Caldari region. The author mentions "System X" as a key waypoint. Traditionally, you'd:

  1. Copy the system name
  2. Open EF-Map in a new tab
  3. Search for the system
  4. Study its position
  5. Switch back to the guide
  6. Repeat for the next system

This tab-hopping workflow breaks immersion and makes it harder for readers to absorb tactical information. Many users give up and miss important spatial context.

The Solution: In-Page Embeds

With Embed Mode, the wiki author can embed a live, interactive star map directly in the article: 

<iframe
  src="https://ef-map.com/embed?system=30000142&zoom=3000&orbit=1&color=blue"
  width="100%"
  height="450"
  frameborder="0"
  loading="lazy"
  allowfullscreen
></iframe>

Result: Readers see the system highlighted, rotating slowly in cinematic mode—no context switch needed. They can zoom, pan, and explore neighboring systems without leaving the guide.

How Embed Mode Works

URL Format

Basic embed: 

https://ef-map.com/embed?system=<systemId>

Alternative (append to any map URL): 

https://ef-map.com/?system=<systemId>&embed=1

Both activate Embed Mode, which:

The pill ensures viewers can always launch the full map in a new tab if they want to calculate routes or explore further.

Required Parameter: system

The system parameter accepts a numeric system ID (EF-Map's internal identifier). You can find system IDs by:

  1. Opening the full map and selecting a system
  2. Looking at the URL: ?system=
  3. Using the search function to resolve names → IDs

Example: 

https://ef-map.com/embed?system=30000142

Highlights system 30000142 in the embed.

Optional Parameters

#### zoom – Camera Distance

Controls how close the camera starts to the selected system. 

?zoom=2000   // Tight close-up
?zoom=5000   // Medium distance (default)
?zoom=15000  // Zoomed out, shows neighbors

Use case: For guides focusing on a single system's asteroids or stations, use zoom=2000. For regional overviews, use zoom=10000.

#### orbit=1 – Cinematic Rotation

Enables automatic camera orbit around the selected system—like a slow, elegant flyby. 

?orbit=1

Use case: Perfect for landing pages, showcase sections, or "hero" embeds where you want a polished, hands-off experience.

#### color – Cinematic Palette

When orbit=1 is active, you can apply themed color palettes to the starfield and system highlights. 

?color=blue     // Cool cyan/blue (default)
?color=green    // Matrix-style green
?color=purple   // Nebula purple
?color=red      // Danger/warning red
?color=yellow   // Gold/treasure
?color=white    // Clean neutral
?color=random   // Randomizes on load

Invalid values fall back to blue.

Use case: Match your site's theme—purple for lore articles, red for PvP danger zones, green for exploration guides.

Full Example

Embed a system with tight zoom, orbit, and green palette: 

<iframe
  src="https://ef-map.com/embed?system=30000142&zoom=2500&orbit=1&color=green"
  width="800"
  height="450"
  frameborder="0"
  allowfullscreen
></iframe>

Real-World Use Cases

1. Wiki Articles – System Spotlights

Scenario: A wiki page about "Best Mining Systems in Caldari Space" wants to showcase each system visually.

Implementation: 

<h2>System: Perimeter</h2>
<p>Rich in Veldspar and Scordite, Perimeter is a high-sec mining hub with excellent station coverage.</p>

<iframe
  src="https://ef-map.com/embed?system=30000144&zoom=3000"
  width="100%"
  height="350"
  frameborder="0"
></iframe>

<h2>System: Jita</h2>
<p>The trade capital of New Eden, Jita is overcrowded but offers unmatched market liquidity.</p>

<iframe
  src="https://ef-map.com/embed?system=30000142&zoom=3000"
  width="100%"
  height="350"
  frameborder="0"
></iframe>

Result: Each system gets a live embed showing its exact position, nearby gates, and spatial context. Readers can zoom/pan to explore without leaving the article.

2. Alliance Landing Pages – Territory Showcase

Scenario: An alliance website wants to highlight their controlled systems with a cinematic flair.

Implementation: 

<section class="territory-showcase">
  <h1>Our Home: The Amarr Cluster</h1>
  <iframe
    src="https://ef-map.com/embed?system=30000145&zoom=8000&orbit=1&color=red"
    width="100%"
    height="500"
    frameborder="0"
  ></iframe>
  <p>We control 12 systems across this strategic region. Join us and stake your claim.</p>
</section>

Result: A rotating, red-tinted view of the alliance's home system greets visitors—professional and immersive.

3. Event Announcements – PvP Arena Locations

Scenario: A tournament organizer announces a scheduled PvP event in a specific low-sec system.

Implementation: 

<div class="event-banner">
  <h2>⚔️ Battle Royale – Saturday 18:00 UTC</h2>
  <p><strong>Location:</strong> System 30000149 (Low-Sec, 0.3 security)</p>
  
  <iframe
    src="https://ef-map.com/embed?system=30000149&zoom=4000&color=yellow"
    width="100%"
    height="400"
    frameborder="0"
  ></iframe>
  
  <p>No Smart Gates required—all jumps via standard gates. Prize pool: 500M ISK.</p>
</div>

Result: Participants see the exact event location highlighted in gold, can check nearby staging systems, and plan their approach—all inline.

4. Blog Posts – Exploration Routes

Scenario: An explorer writes a blog post about a profitable wormhole route. They want to embed the starting system.

Implementation: 

<p>Start your journey at <strong>System 30000150</strong>, a quiet exploration hub with easy access to wormhole chains.</p>

<iframe
  src="https://ef-map.com/embed?system=30000150&zoom=6000&orbit=1&color=purple"
  width="100%"
  height="400"
  frameborder="0"
></iframe>

<p>From here, scan down signatures and follow the chain into null-sec. Happy hunting!</p>

Result: The purple-themed, orbiting embed sets an explorative, mysterious tone matching the blog's aesthetic.

Technical Implementation Details

How Embed Mode Detects Activation

EF-Map checks for two conditions:

  1. Path-based: URL path is /embed (e.g., https://ef-map.com/embed?system=...)
  2. Query-based: URL includes &embed=1 (e.g., https://ef-map.com/?system=...&embed=1)

If either is true, the app: 

const isEmbedMode = window.location.pathname === '/embed' || 
                    new URLSearchParams(window.location.search).get('embed') === '1';

URL Parsing for System Selection

On load, the app parses ?system= from the query string: 

const params = new URLSearchParams(window.location.search);
const systemIdStr = params.get('system');
if (systemIdStr) {
  const systemId = parseInt(systemIdStr, 10);
  selectSystemById(systemId);
}

If zoom is provided, the camera distance is set: 

const zoomParam = params.get('zoom');
const zoomDistance = zoomParam ? Math.max(10, Math.min(50000, parseFloat(zoomParam))) : 5000;
camera.position.setLength(zoomDistance);

Orbit Mode Activation

When orbit=1 is present, cinematic mode activates automatically and the camera begins rotating: 

if (params.get('orbit') === '1') {
  setCinematicMode(true);
  // Camera rotation handled by animation loop (0.2 rad/s around Y-axis)
}

User interaction (any mouse click, drag, or scroll) calls: 

function stopCinematicOrbit() {
  setCinematicMode(false);
  // Orbit halts; user takes over camera control
}

Color Palette Application

The color parameter applies a shader uniform to the starfield and system highlight: 

const colorParam = params.get('color') || 'blue';
const palette = {
  blue: { primary: '#4a9eff', accent: '#1e90ff' },
  green: { primary: '#00ff41', accent: '#00cc33' },
  purple: { primary: '#9d4edd', accent: '#7209b7' },
  red: { primary: '#ff4444', accent: '#cc0000' },
  yellow: { primary: '#ffd700', accent: '#ffaa00' },
  white: { primary: '#ffffff', accent: '#cccccc' },
  random: { /* randomize on init */ }
};

applyPalette(palette[colorParam] || palette.blue);

Iframe Best Practices

Responsive Sizing

Use width="100%" and a fixed height (or aspect ratio via CSS): 

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://ef-map.com/embed?system=30000142"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
  ></iframe>
</div>

This maintains a 16:9 aspect ratio that scales with the container.

Lazy Loading

Add loading="lazy" to defer iframe loading until it's near the viewport: 

<iframe
  src="https://ef-map.com/embed?system=30000142"
  loading="lazy"
  width="100%"
  height="400"
></iframe>

Saves bandwidth if the embed is below the fold.

Accessibility

Provide a fallback link for users with iframe blockers or JavaScript disabled: 

<iframe src="https://ef-map.com/embed?system=30000142" ...></iframe>
<noscript>
  <p><a href="https://ef-map.com/?system=30000142">View system 30000142 on EF-Map</a></p>
</noscript>

Limitations and Future Enhancements

Current Limitations

Planned Enhancements

Privacy and Performance

No User Tracking in Embeds

Embed Mode records a standard page load event in our anonymous aggregate usage stats, but we don't track:

Your readers' privacy is respected—embeds are just as privacy-conscious as the main app.

Performance Characteristics

Embeds load the full EF-Map bundle (~1.2MB gzipped), so they're not "lightweight widgets." However:

For high-traffic sites with dozens of embeds per page, consider using static screenshots with a single live embed at the top, or lazy-load embeds on scroll.

How to Find System IDs

Method 1: Use the Main Map

  1. Go to https://ef-map.com
  2. Search for your system by name (e.g., "Jita")
  3. Click the system to select it
  4. Check the URL: ?system=30000142 ← that's the ID

Method 2: Inspect the Database

If you're technical, you can query EF-Map's public SQLite database (loaded client-side): 

SELECT id, name FROM solar_systems WHERE name LIKE '%Jita%';

The id column is the system ID you need.

Method 3: Ask the Community

Post in the EF-Map Discord or EVE Frontier subreddit—someone will look it up for you.

Community Examples

EVE University Wiki

The EVE University knowledge base embeds EF-Map on region overview pages: 

<h2>Amarr Region</h2>
<p>The Amarr region is home to 47 systems, including the imperial capital.</p>
<iframe
  src="https://ef-map.com/embed?system=30000145&zoom=12000&color=red"
  width="100%"
  height="450"
></iframe>

Impact: Students can visualize regional structure without tabbing away from lessons.

Alliance Recruitment Sites

Several null-sec alliances use hero embeds on their homepages: 

<section class="hero">
  <h1>Join the Frontier Vanguard</h1>
  <iframe
    src="https://ef-map.com/embed?system=30000200&zoom=5000&orbit=1&color=purple"
    width="100%"
    height="600"
  ></iframe>
  <button>Apply Now</button>
</section>

Impact: Visitors get an immersive introduction to the alliance's home territory—more engaging than static images.

PvP Tournament Organizers

Event organizers embed arena systems in match announcements: 

<div class="match-card">
  <h3>Semi-Final: Team Alpha vs. Team Bravo</h3>
  <iframe
    src="https://ef-map.com/embed?system=30000149&zoom=3000&color=yellow"
    width="100%"
    height="300"
  ></iframe>
  <p><strong>Time:</strong> Saturday 18:00 UTC | <strong>Prize:</strong> 500M ISK</p>
</div>

Impact: Participants scout the arena ahead of time, planning staging and escape routes.

Try It Now

Here's a live embed of system 30000142 (Jita) with orbit mode and blue palette: 

<iframe
  src="https://ef-map.com/embed?system=30000142&zoom=5000&orbit=1&color=blue"
  width="100%"
  height="450"
  frameborder="0"
  allowfullscreen
></iframe>

Click "Open on EF Map" in the top-right to explore the full features.

Getting Started

  1. Pick a system: Use the main map to find the system ID
  2. Build the URL: https://ef-map.com/embed?system=&zoom=&orbit=1&color=
  3. Wrap in an iframe: Add width, height, frameborder="0", loading="lazy"
  4. Test responsiveness: Ensure it looks good on mobile and desktop
  5. Share your embed: Let us know if you build something cool!

Embed Mode empowers the EVE Frontier community to integrate spatial intelligence directly into wikis, guides, and tools—reducing friction and enhancing exploration. Try it on your next article or landing page!

Related Posts

Embed Mode makes the EVE Frontier map portable—bring the power of interactive navigation, routing, and exploration to your community, wiki, or strategic planning tool!

embed modeiframepartner integrationurl parameterscustomization