Developer Portal

Map Integration Guide

Learn how to embed the 3D map engine inside your own web apps, configure visual settings dynamically, and send live GTA V coordinates to position markers in real-time.

Quick Start

Get the 3D viewer integrated into your project in minutes. Use the following simple iframe structure and messaging pipeline.

Step 1

Deploy Iframe

Insert the viewer as an iframe on your webpage, passing embed=1 to clean up the interface.

Step 2

Listen for Load

Wait for the map's MAP_READY event before triggering any marker movements or tracking updates.

Step 3

Push Coordinates

Send postMessage events containing GTA V coordinate metrics to position external indicators.

HTML & Javascript Integration

<iframe id="map" src="https://map.lumes.cc/?embed=1" width="100%" height="500" style="border:none;"></iframe>

<script>
const mapFrame = document.getElementById('map');

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'MAP_READY') return;
  
  mapFrame.contentWindow.postMessage({
    type: 'ADD_OR_UPDATE_MARKER',
    id: 'player_alpha',
    name: 'Alpha Player',
    x: -169.07,
    y: -1004.72,
    z: 28.42,
    color: '#6F9CEB'
  }, '*');
});
</script>

Important: Coordinates sent to the system must use standard GTA V world space metrics. The internal matrix conversion handles projection and scaling automatically.

URL Parameters

Customize the viewer state on load by appending query parameters to the iframe source URL.

Parameter	Type	Default	Description
embed	Boolean	0	Hides navigation bars and instruction panels, maximizing screen space.
quality	String	auto	Sets mesh configuration. `auto`, `high`, or `low`. If hardware acceleration is missing, the system forces low.
bg	Hex Code	080A12	Overrides the canvas background hex code without the preceding hash character (e.g. `bg=101526`).
stats	Boolean	1	Enables or disables display counters for triangles, materials and meshes.
markers	Boolean	1	Set to `0` to completely disable coordinate parsing and pin visualization systems.
grid	Boolean	0	Renders the default ground projection lines if enabled.
wire	Boolean	0	Forces visual elements to initialize in wireframe layout.

Marker Control API

Manage indicators dynamically by executing postMessage instructions towards the map iframe.

ADD_OR_UPDATE_MARKER Command

/* Update single point (repeated calls with same ID move the pin) */
mapFrame.contentWindow.postMessage({
  type: 'ADD_OR_UPDATE_MARKER',
  id: 'unit_one',
  name: 'Officer Davis',
  x: 420.25,
  y: -980.12,
  z: 30.15,
  color: '#4ade80'
}, '*');

BATCH_MARKERS Command

/* Update multiple units simultaneously */
mapFrame.contentWindow.postMessage({
  type: 'BATCH_MARKERS',
  markers: [
    { id: 'u1', name: 'Unit 1', x: 200.5, y: -800.2, z: 15.0, color: '#60a5fa' },
    { id: 'u2', name: 'Unit 2', x: 150.0, y: -850.7, z: 18.2, color: '#f87171' }
  ]
}, '*');

REMOVE_MARKER Command

/* Clear specific target indicator */
mapFrame.contentWindow.postMessage({
  type: 'REMOVE_MARKER',
  id: 'unit_one'
}, '*');

CLEAR_EXTERNAL_MARKERS Command

/* Remove all API-registered markers */
mapFrame.contentWindow.postMessage({
  type: 'CLEAR_EXTERNAL_MARKERS'
}, '*');

Keyboard Shortcuts

Control camera viewpoints and map components quickly using these predefined key triggers.

F Reset View

Esc Close open panels

LMB Pan Scene / Copy Coordinates

RMB Rotate Object

Scroll Zoom In / Out