### Local Server for Testing (Shell)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/README.md

Starts a local HTTP server to test the interactive map with live reload capabilities. This is useful for development and testing changes before deployment. It requires Python to be installed.

```powershell
cd C:\Users\pring\OneDrive\Documents\ArcMap
python -m http.server 8000
# visit http://localhost:8000
```

--------------------------------

### Define Map Configuration Data Structure (JavaScript)

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Defines the structure for map configurations, including details like map ID, name, description, categories, and item locations. This data is loaded from `data/maps.js` and is accessible via `window.arcMapsConfig`. The example shows configurations for 'dam-battlegrounds' and 'spaceport'.

```javascript
// Example map configuration structure in data/maps.js
window.arcMapsConfig = {
  "dam-battlegrounds": {
    "id": "dam-battlegrounds",
    "name": "Dam Battlegrounds",
    "description": "Overgrown ruins of the Alcantara Power Plant. Toxic, waterlogged terrain.",
    "biome": "Flooded industrial exclusion zone",
    "thumbnail": "data/Dam_Battlegrounds_Map_(Server_Slam).jpg",
    "threatLevel": {"label": "High Threat", "color": "#f97316"},
    "recommendedPower": 18,
    "featuredLoot": ["Aphelion Blueprint", "Stormglass Core modules"],
    "tileUrl": "https://tiles.mapgenie.io/games/arc-raiders/dam-battlegrounds/default-v1/{z}/{x}/{y}.jpg",
    "center": [-0.6990354480387, 0.656516773651405], // [lng, lat]
    "bounds": {
      "minLat": 0.42533543451718,
      "maxLat": 0.88769811278563,
      "minLng": -0.86595734500438,
      "maxLng": -0.53211355107302
    },
    "zoom": {"min": 9, "max": 14, "initial": 11},
    "categories": [
      {
        "id": 13842,
        "name": "Locked Door",
        "icon": "locked_door",
        "type": "lockedDoor",
        "group": "Locations",
        "color": "#223034",
        "visible": true
      },
      {
        "id": 13823,
        "name": "Ammo Box",
        "icon": "ammo_box",
        "type": "ammoBox",
        "group": "Loot",
        "color": "#f59e0b",
        "visible": true
      }
    ],
    "items": [
      {
        "id": 524427,
        "name": "Locked Door #3",
        "description": "Requires Security Clearance Level 2. Contains rare weapon blueprints.",
        "categoryId": 13842,
        "type": "lockedDoor",
        "coords": [-0.69812345, 0.65432100],
        "media": []
      },
      {
        "id": 524430,
        "name": "Ammo Cache Alpha",
        "description": "Heavy ammo and grenades",
        "categoryId": 13823,
        "type": "ammoBox",
        "coords": [-0.70123456, 0.66543210],
        "media": []
      }
    ]
  },
  "spaceport": {
    // Additional map configurations...
  }
};
```

--------------------------------

### Initialize Interactive Map using JavaScript

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Initializes the Mapbox GL map with MapGenie's raster tile server, sets up event listeners, and loads the first available map configuration with all categories and markers. The state management for the map is handled globally.

```javascript
// In js/app.js - Initialization runs on DOMContentLoaded
// Map state management
const state = {
  currentMapId: "dam-battlegrounds",
  map: null,
  markers: [],
  foundItems: new Set(),
  visibleCategories: new Set(),
  searchQuery: ""
};

// Initialization is automatic when page loads
// Access map instance after initialization
document.addEventListener('DOMContentLoaded', () => {
  // Map auto-initializes and loads first map
  setTimeout(() => {
    console.log("Current map:", state.currentMapId);
    console.log("Total markers:", state.markers.length);
    console.log("Map center:", state.map.getCenter());
  }, 2000);
});

```

--------------------------------

### Load Map Configuration with Mapbox GL

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Initializes a Mapbox GL map with a specified configuration, including tile URLs, zoom levels, center coordinates, and bounds. It uses a provided map ID to fetch configuration details from `window.arcMapsConfig`.

```javascript
// Switch to a different map
function loadMap(mapId) {
  const mapConfig = window.arcMapsConfig[mapId];
  if (!mapConfig) return;

  // Map configuration includes tile URL and bounds
  const map = new mapboxgl.Map({
    container: 'map',
    style: {
      version: 8,
      sources: {
        'mapgenie-tiles': {
          type: 'raster',
          tiles: [mapConfig.tileUrl],
          tileSize: 512,
          minzoom: mapConfig.zoom.min,
          maxzoom: mapConfig.zoom.max
        }
      },
      layers: [{
        id: 'mapgenie-layer',
        type: 'raster',
        source: 'mapgenie-tiles'
      }]
    },
    center: mapConfig.center, // [lng, lat]
    zoom: mapConfig.zoom.initial,
    maxBounds: [[mapConfig.bounds.minLng, mapConfig.bounds.minLat],
                [mapConfig.bounds.maxLng, mapConfig.bounds.maxLat]]
  });
}

// User clicks map tab - automatically triggers loadMap()
document.querySelector('[data-map-id="spaceport"]').click();
```

--------------------------------

### Chartbeat Initialization (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Configures and loads the Chartbeat analytics script asynchronously. This is used for tracking website performance and user engagement.

```javascript
var _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
_sf_async_config.uid = 21105;
_sf_async_config.domain = 'mapgenie.io';
_sf_async_config.flickerControl = false;
_sf_async_config.useCanonical = true;
_sf_async_config.useCanonicalDomain = true;
_sf_async_config.sections = "arc-raiders";

function loadChartbeat() {
  var e = document.createElement('script');
  var n = document.getElementsByTagName('script')[0];
  e.type = 'text/javascript';
  e.async = true;
  e.src = '//static.chartbeat.com/js/chartbeat.js';
  n.parentNode.insertBefore(e, n);
}

loadChartbeat();
```

--------------------------------

### Synchronize MapGenie Data to Application Format using Python

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Converts MapGenie JSON data into the application's map configuration format. This includes proper category mappings, coordinate transformations, and Mapbox GL tile layer configurations. The `main()` function generates the `maps.js` file.

```python
from sync_mapgenie_data import process_map_data, generate_maps_js, main

# Process a single map configuration
map_config = process_map_data("dam-battlegrounds", {
    "file": "mapgenie_dam-battlegrounds.json",
    "id": "dam-battlegrounds",
    "name": "Dam Battlegrounds",
    "description": "Overgrown ruins of the Alcantara Power Plant.",
    "biome": "Flooded industrial exclusion zone",
    "thumbnail": "data/Dam_Battlegrounds_Map_(Server_Slam).jpg",
    "threatLevel": {"label": "High Threat", "color": "#f97316"},
    "recommendedPower": 18,
    "featuredLoot": ["Aphelion Blueprint", "Stormglass Core modules"],
    "tile_url": "https://tiles.mapgenie.io/games/arc-raiders/dam-battlegrounds/default-v1/{z}/{x}/{y}.jpg"
})

# Generate complete maps.js file for all configured maps
main()
# Output: data/maps.js with window.arcMapsConfig containing all map data

```

--------------------------------

### Markdown-it Renderer Rule for Audio Links

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Customizes the markdown-it renderer to transform links ending in '.mp3' into audio elements with controls. Other links will open in a new tab.

```javascript
window.md = window.markdownit({ html: false, }); md.renderer.rules.link_open = function (tokens, idx, options, env, self) { var token = tokens[idx]; var href = token.attrs[0][1]; if (href.endsWith('.mp3')) { token.tag = "audio" token.attrs = [['src', href], ['controls', 'true']] } else { token.attrPush(['target', '_blank']); } return self.renderToken(tokens, idx, options, env, self); };
```

--------------------------------

### Export and Import User Progress (JavaScript)

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Handles the export of user progress (found items) into a JSON file and the import of progress data from a previously exported file. It utilizes browser File API for file handling and JSON parsing. Requires HTML elements with IDs 'exportBtn' and 'importInput'.

```javascript
// Export progress to JSON file
function exportProgress() {
  const data = {
    version: 1,
    timestamp: new Date().toISOString(),
    foundItems: [...state.foundItems] // ["dam-battlegrounds-524427", ...]
  };

  const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `arc-raiders-progress-${new Date().toISOString().split('T')[0]}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

// Import progress from file
function importProgress(fileInputEvent) {
  const file = fileInputEvent.target.files?.[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    try {
      const data = JSON.parse(event.target.result);
      if (data.foundItems) {
        state.foundItems = new Set(data.foundItems);
        saveProgress(); // Save to localStorage
        loadMap(state.currentMapId); // Reload to update UI
      }
    } catch (err) {
      alert('Invalid progress file');
    }
  };
  reader.readAsText(file);
}

// Trigger export
document.getElementById('exportBtn').click();

// Import via file input
document.getElementById('importInput').addEventListener('change', importProgress);
```

--------------------------------

### Overwolf Detection and Initialization

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Sets a flag to indicate if the application is running within the Overwolf environment. Currently set to false.

```javascript
window.isOverwolf = false;
```

--------------------------------

### Compare Coordinate Systems using Python

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

A utility script for analyzing coordinate ranges and validating coordinate transformation between MapGenie's lat/lng format and the application's coordinate system. It loads data from a JSON file and prints the latitude and longitude ranges.

```python
import json
import re

# Load and compare coordinate systems
with open('mapgenie_dam-battlegrounds.json', 'r') as f:
    mg_data = json.load(f)

# Extract locked door locations (category_id 13842)
mg_locked_doors = [loc for loc in mg_data['locations'] if loc['category_id'] == 13842]

# Analyze coordinate ranges
all_lats = [float(loc['latitude']) for loc in mg_data['locations']]
all_lngs = [float(loc['longitude']) for loc in mg_data['locations']]

print(f"Latitude range: {min(all_lats):.6f} to {max(all_lats):.6f}")
print(f"Longitude range: {min(all_lngs):.6f} to {max(all_lngs):.6f}")
print(f"Center point: [{(min(all_lngs)+max(all_lngs))/2:.6f}, {(min(all_lats)+max(all_lats))/2:.6f}]")

```

--------------------------------

### Custom Tile Layer Configuration (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/README.md

Specifies the configuration for using custom map tiles, such as those provided by Mapbox. This includes the tile server URL, attribution, and initial map view center and zoom level. This is used when the `projection` is set to `geo`.

```javascript
tileLayer: {
  url: "https://api.mapbox.com/styles/v1/<user>/<style>/tiles/256/{z}/{x}/{y}?access_token=<token>",
  attribution: '&copy; Mapbox & OpenStreetMap'
},
view: { center: [lat, lng], zoom: 6 }
```

--------------------------------

### HTML Structure for Interactive Map

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

The main HTML file for the ARC Raiders Interactive Map. It sets up the page structure, including sidebars for navigation and controls, a map container, and loads necessary JavaScript and CSS dependencies like Mapbox GL JS.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARC Raiders Interactive Map</title>

  <!-- Mapbox GL JS -->
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <div class="app">
    <!-- Left Sidebar: Map selection, categories, search -->
    <aside class="sidebar sidebar--left" id="leftSidebar">
      <nav class="map-tabs" id="mapTabs"></nav>
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="Search..." />
        <button id="searchBtn">SEARCH</button>
      </div>
      <div class="categories" id="categoryList"></div>
    </aside>

    <!-- Map Container -->
    <main class="map-container">
      <div id="map"></div>
      <div class="map-controls">
        <button id="zoomInBtn">+</button>
        <button id="zoomOutBtn">-</button>
      </div>
    </main>

    <!-- Right Sidebar: Progress tracking, export/import -->
    <aside class="sidebar sidebar--right" id="rightSidebar">
      <div class="tracker">
        <h3>PROGRESS TRACKER</h3>
        <span id="foundCount">0</span> / <span id="totalCount">0</span>
        <button id="exportBtn">Export</button>
        <label>Import <input type="file" id="importInput" accept=".json" hidden /></label>
        <button id="resetBtn">Reset</button>
      </div>
    </aside>
  </div>

  <!-- Load dependencies in order -->
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
  <script src="data/maps.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

```

--------------------------------

### Consent Management Configuration (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Initializes and configures the window.zdconsent object for managing user consent, particularly for analytics and functional cookies.

```javascript
window.zdconsent = window.zdconsent || {
  run: [],
  cmd: [],
  useractioncomplete: [],
  analytics: [],
  functional: [],
  social: []
};
```

--------------------------------

### Map Configuration and Initialization

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Initializes map settings and detects mobile viewport sizes. It configures various map features and overrides default behavior based on screen width and embed type.

```javascript
window.mapData = {"id":"dam-battlegrounds","title":"Dam Battlegrounds","slug":"dam-battlegrounds","url":"/arc-raiders/maps/dam-battlegrounds","marker_icon":null,"marker_shadow":null,"game_id":22,"game":{"id":22,"title":"Arc Raiders","slug":"arc-raiders","short_name":"Arc Raiders","company_id":19,"company":{"id":19,"name":"Embark Studios","slug":"embark-studios"}},"image":null,"description":"","quest_id":null,"is_quest":false,"parent_map_id":null,"default_zoom":1,"default_center":null,"min_zoom":1,"max_zoom":3,"show_markers":true,"show_poi":true,"show_quest_markers":true,"show_legend":true,"show_search":true,"show_layers":true,"show_grid":false,"show_compass":true,"show_scale":true,"show_hotkeys":true,"show_tooltips":true,"show_heatmap":true,"suggestionsEnabled":false,"newSuggestionsEnabled":false,"showRegionsInInfoWindow":false,"regionLocationFocusEnabled":false,"regionSelectorEnabled":false,"regionToggleEnabled":false,"iconSizeToggleEnabled":false,"altMapSdk":true,"proOnlyMedia":false,"copyrightFooterEnabled":false,"presetsEnabled":true,"routesEnabled":false,"checklistEnabled":false,"3dEnabled":false,"gridEnabled":false,"linkLinesEnabled":false,"mapStyle":null};
```

--------------------------------

### Data Model Configuration (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/README.md

Defines the structure for map data, including storage keys, default map settings, categories, and individual map item details. This JavaScript object is exposed globally as `window.arcMapsConfig` and is essential for customizing the map's content and behavior.

```javascript
{
  storageKey: "arc-raiders-progress-v1",
  defaultMapId: "caligo-basin",
  categories: {
    quest: { label: "Quest", color: "#facc15", description: "..." },
    // ...
  },
  maps: [
    {
      id: "caligo-basin",
      name: "Caligo Basin",
      projection: "simple", // or "geo"
      image: {
        url: "assets/maps/caligo-basin.svg",
        bounds: [[0, 0], [1200, 1600]]
      },
      zoom: { min: -1, max: 3, initial: 0 },
      items: [
        {
          id: "cal-quest-001",
          title: "Signal Heist",
          type: "quest",
          coords: [520, 440], // pixel X/Y for simple projection or [lat, lng] for geo
          description: "…",
          objectives: ["Disable jammer", "Hack relay"],
          rewards: ["Stormglass Core"],
          tags: ["solo", "stealth"],
          schedule: "Spawns hourly",
          cooldownHours: 20,
          link: "https://arcraiders.com/"
        }
      ]
    }
  ]
}
```

--------------------------------

### Map Data and Configuration (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Defines map marker data, image dimensions, and the URL for marker images. Also includes global configuration for Pogo.

```javascript
const MARKER_IMAGES_WIDTH = 660;
const MARKER_IMAGES_HEIGHT = 704;
const MARKER_IMAGES_URL = '/images/games/arc-raiders/markers@2x.png?MTM5OTI0';
window.PogoConfig = {
  template: "map",
  category: "ARC Raiders",
  tags: ["ARC Raiders"]
}
```

--------------------------------

### Mapgenie Analytics Default Parameters and Pageview Tracking

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Sets default parameters for Mapgenie's analytics, including sign-in status, section, game name, page URL, source platform, and content group. It also tracks a 'pageview' event.

```javascript
window.Analytics.setDefaultParams({ signed_in: 0, section: null, game_name: "arc-raiders", page: "https://mapgenie.io/arc-raiders/maps/dam-battlegrounds", source_platform: 'web', content_group: "arc-raiders", }); window.Analytics.trackEvent("pageview", { pageview: 1, previous_section: null, from_component: null, })
```

--------------------------------

### Add Interactive Map Markers

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Creates and adds interactive markers to the map for each item in the current map configuration. It styles markers based on item category and status (found/unfound) and attaches click event listeners to display item popups.

```javascript
// Markers are added automatically after map loads
function addMarkers(mapConfig) {
  mapConfig.items.forEach((item) => {
    const category = mapConfig.categories.find(c => c.id === item.categoryId);
    const isFound = state.foundItems.has(`${state.currentMapId}-${item.id}`);

    // Create marker DOM element
    const el = document.createElement('div');
    el.className = `marker ${isFound ? 'marker--found' : ''}`;
    el.innerHTML = `
      <div class="marker__icon" style="background-color: ${category.color};">
        <span class="marker__icon-inner">${getIconForType(category.type)}</span>
      </div>
    `;

    // Create Mapbox marker at item coordinates
    const marker = new mapboxgl.Marker({element: el, anchor: 'bottom'})
      .setLngLat(item.coords) // [lng, lat] format
      .addTo(state.map);

    // Click to show popup
    el.addEventListener('click', (e) => {
      e.stopPropagation();
      showItemPopup(item, category, marker);
    });

    state.markers.push({marker, item, element: el});
  });
}

// Example marker data structure
const exampleItem = {
  id: 524427,
  name: "Locked Door #3",
  description: "Requires Security Clearance Level 2",
  categoryId: 13842,
  type: "lockedDoor",
  coords: [-0.698123, 0.654321], // [lng, lat]
  media: []
};
```

--------------------------------

### Map Configuration and Data (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

This JavaScript code initializes various configuration variables for the Arc Raiders map, including base URLs for assets and map data. It also contains structured data for map elements, locations, services, collectibles, and loot, which can be used for dynamic map interactions or data processing.

```javascript
window.mapUrl = "https:\/\/mapgenie.io\/arc-raiders\/maps\/dam-battlegrounds";
window.baseUrl = "https:\/\/mapgenie.io\/arc-raiders";
window.cdnUrl = "https:\/\/cdn.mapgenie.io";
window.tilesCdnUrl = "https:\/\/tiles.mapgenie.io\/games\/";
window.storageCdnUrl = "https:\/\/storage-cdn.mapgenie.io";
window.user = null;
window.mapData = {"maps":[{"id":828,"title":"Dam Battlegrounds","slug":"dam-battlegrounds"},{"id":829,"title":"Buried City","slug":"buried-city"},{"id":830,"title":"Spaceport","slug":"spaceport"},{"id":831,"title":"The Blue Gate","slug":"the-blue-gate"},{"id":832,"title":"Stella Montis","slug":"stella-montis"}]};
window.map = {"id":828,"title":"Dam Battlegrounds","slug":"dam-battlegrounds"};
window.groups = [{"id":2420,"game_id":242,"title":"Locations","order":10,"color":"223034","expandable":false,"categories":[{"id":13833,"group_id":2420,"title":"Cargo Elevator","icon":"cargo_elevator","info":null,"template":null,"order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13834,"group_id":2420,"title":"Field Depot","icon":"field_depot","info":null,"template":"**Field Crate Locations:**\n- ??","order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13840,"group_id":2420,"title":"Location","icon":"location","info":null,"template":"**Type:** ??","order":1,"has_heatmap":false,"features_enabled":false,"display_type":"text","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13842,"group_id":2420,"title":"Locked Door","icon":"locked_door","info":null,"template":"**Key Required:** ?? \n\n**Location:** ?? \n\n**Behind the Door:** \n- ??","order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13837,"group_id":2420,"title":"Raider Camp","icon":"raider_camp","info":null,"template":null,"order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13832,"group_id":2420,"title":"Raider Hatch","icon":"raider_hatch","info":null,"template":null,"order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false}]},{"id":2421,"game_id":242,"title":"Services","order":10,"color":"199461","expandable":false,"categories":[]},{"id":2422,"game_id":242,"title":"Collectibles","order":10,"color":"80518A","expandable":false,"categories":[{"id":13816,"group_id":2422,"title":"Mission Objective","icon":"mission_objective","info":null,"template":"**Mission:** ?? \n\n**Location:** ??","order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false}]},{"id":2423,"game_id":242,"title":"Loot","order":10,"color":"5A8A95","expandable":false,"categories":[{"id":13823,"group_id":2423,"title":"Ammo Box","icon":"ammo_box","info":null,"template":null,"order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13940,"group_id":2423,"title":"ARC Courier","icon":"arc_courier","info":null,"template":null,"order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13946,"group_id":2423,"title":"Baron Husk","icon":"baron_husk","info":null,"template":null,"order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13817,"group_id":2423,"title":"Container","icon":"container","info":null,"template":null,"order":1,"has_heatmap":false,"features_enabled":false,"display_type":"marker","ign_enabled":true,"ign_visible":true,"visible":true,"description":null,"premium":false},{"id":13945,"group_id":2423,"title":"Field Crate","icon":"field_crate","info":null,"template":"**Location:** ?? \n\n**Field Depot:** ??","order":1,"has_heatmap":false,"fe
```

--------------------------------

### Google Analytics Configuration (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Initializes Google Analytics (gtag) with specific configurations for the ARC Raiders game, including setting user and content group information.

```javascript
gtag('js', new Date());
gtag('set', 'auth_status', 'not_logged_in');
gtag('set', 'user_type', 'free');
gtag('set', 'content_group', "arc-raiders");
gtag('config', 'G-ZZRVRWZWGJ', {
  cookie_flags: 'max-age=63072000;secure;samesite=none',
  content_group: "arc-raiders",
});
gtag('config', 'AW-658861064');
```

--------------------------------

### Comscore Analytics Beacon

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Initializes and loads the Comscore analytics beacon script. This is used for tracking website traffic and user behavior.

```javascript
var _comscore = _comscore || []; _comscore.push({c1: "2", c2: "6036202"}); (function () { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = "https://sb.scorecardresearch.com/cs/6036202/beacon.js"; el.parentNode.insertBefore(s, el); })();
```

--------------------------------

### Map Styling and Layout (CSS)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Applies specific CSS rules for map display, categories, and item layouts, including responsive column counts for categories.

```css
#zdcFloatingBtn { display: none !important; }
#categories .group-categories { display: block; column-count: 2; column-gap: 0; }
#categories .category-item { width: 100%; display: flex; align-items: center; }
#categories .category-item .bubble { text-align: right; flex: 1; }
#categories .category-item .title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#categories .category-item .icon { margin-top: 0; line-height: 18px; }
#categories .subheader { column-span: all; }
```

--------------------------------

### Extract MapGenie Map Data using Python

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Scrapes location and category data from MapGenie.io pages by parsing embedded JavaScript objects. Extracts complete map datasets including locations, groups, and categories for all specified ARC Raiders maps. Saves extracted data to JSON files.

```python
import requests
import json
from extract_mapgenie_data import extract_map_data, main

# Extract a single map
map_data = extract_map_data("dam-battlegrounds")
if map_data:
    locations = map_data.get('locations', [])
    groups = map_data.get('groups', [])
    print(f"Extracted {len(locations)} locations across {len(groups)} groups")

# Extract all configured maps and save to files
if __name__ == "__main__":
    main()
    # Output: mapgenie_arc_raiders_data.json (combined)
    #         mapgenie_dam-battlegrounds.json
    #         mapgenie_buried-city.json
    #         mapgenie_spaceport.json
    #         mapgenie_the-blue-gate.json
    #         mapgenie_stella-montis.json

```

--------------------------------

### Toggle Item Completion Status

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Manages the found/unfound status of an item, updating its marker's appearance and persisting the change to localStorage. It also triggers a UI refresh for progress statistics.

```javascript
// Called from popup button - available globally
window.toggleItemFound = function(itemId) {
  const key = `${state.currentMapId}-${itemId}`;
  const marker = state.markerElements.get(itemId);

  if (state.foundItems.has(key)) {
    // Mark as unfound
    state.foundItems.delete(key);
    if (marker?._element) {
      marker._element.classList.remove('marker--found');
    }
  } else {
    // Mark as found
    state.foundItems.add(key);
    if (marker?._element) {
      marker._element.classList.add('marker--found');
    }
  }

  // Persist to localStorage
  saveProgress();
  updateProgress(window.arcMapsConfig[state.currentMapId]);

  // Progress updates automatically
  // Example: "45/120" markers found, 37.5% progress bar
};

// Trigger from console or popup button click
toggleItemFound(524427);
```

--------------------------------

### Filter Map Items by Search Query (JavaScript)

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Filters visible map markers based on a search query that matches item or category names. This function works in conjunction with category visibility filters. It requires HTML elements with IDs 'searchInput' and 'searchBtn', and relies on global `state` and `window.arcMapsConfig` objects.

```javascript
// Search for items
function performSearch() {
  state.searchQuery = document.getElementById('searchInput').value.trim();
  updateMarkerVisibility();
}

// Example: Search for "weapon" to show all weapon cases
document.getElementById('searchInput').value = 'weapon';
document.getElementById('searchBtn').click();

// Marker visibility logic combines search + category filters
function updateMarkerVisibility() {
  const query = state.searchQuery.toLowerCase();

  state.markers.forEach(({marker, item, element}) => {
    const category = window.arcMapsConfig[state.currentMapId]?.categories
      .find(c => c.id === item.categoryId);

    const matchesSearch = !query ||
      item.name.toLowerCase().includes(query) ||
      category?.name.toLowerCase().includes(query);

    const categoryVisible = state.visibleCategories.has(item.categoryId);
    const visible = matchesSearch && categoryVisible;

    element.style.display = visible ? '' : 'none';
  });
}
```

--------------------------------

### Analytics Tracking (JavaScript)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Implements analytics tracking functions using Google Analytics (gtag). It allows tracking events, engagement, and setting default parameters.

```javascript
window.Analytics = {
  trackEvent: function (event, params = {}) {
    params.send_to = 'G-ZZRVRWZWGJ';
    window.gtag('event', event, params);
  },
  trackEngagement: function (event, params = {}, metaParams = {}) {
    params.engagement = 1;
    if (!metaParams.group && metaParams.category)
      metaParams.group = store.getState().map.groupsById[metaParams.category.group_id];
    if (metaParams.group)
      params.group = metaParams.group.title;
    if (metaParams.category)
      params.category = metaParams.category.title;
    if (metaParams.location)
      params.location = metaParams.location.title;
    window.Analytics.trackEvent(event, params);
  },
  setDefaultParams: function (params) {
    window.gtag('config', 'G-ZZRVRWZWGJ', params);
  },
};
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
window.gtag = gtag;
```

--------------------------------

### Mobile Detection and UI Adjustment

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Detects if the current device is mobile and adjusts the maximum height of the 'categories' element accordingly. This ensures a better user experience on smaller screens.

```javascript
window.isMobile = window.innerWidth < 768; window.isMobile = window.isEmbedded ? window.embedType === 'compact' : window.isMobile; if (isMobile) { document.getElementById('categories').style.maxHeight = (window.innerHeight - 140) + "px"; }
```

--------------------------------

### JavaScript Marker Sprite Positions

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

Defines the sprite positions for markers on the Dam Battlegrounds map. This data is crucial for rendering the correct icons for different map elements. It's a constant object used within the application.

```javascript
const MARKER_SPRITE_POSITIONS_V3 = {"13938":{"width":66,"height":88,"x":66,"y":0,"pixelRatio":2},"13833":{"width":66,"height":88,"x":132,"y":88,"pixelRatio":2},"13834":{"width":66,"height":88,"x":594,"y":88,"pixelRatio":2},"13843":{"width":66,"height":88,"x":528,"y":176,"pixelRatio":2},"13840":{"width":66,"height":88,"x":66,"y":264,"pixelRatio":2},"13842":{"width":66,"height":88,"x":132,"y":264,"pixelRatio":2},"13836":{"width":66,"height":88,"x":594,"y":264,"pixelRatio":2},"13837":{"width":66,"height":88,"x":462,"y":440,"pixelRatio":2},"13832":{"width":66,"height":88,"x":528,"y":440,"pixelRatio":2},"14017":{"width":66,"height":88,"x":0,"y":528,"pixelRatio":2},"13814":{"width":66,"height":88,"x":462,"y":264,"pixelRatio":2},"13813":{"width":66,"height":88,"x":330,"y":352,"pixelRatio":2},"13815":{"width":66,"height":88,"x":198,"y":88,"pixelRatio":2},"13816":{"width":66,"height":88,"x":132,"y":352,"pixelRatio":2},"13823":{"width":66,"height":88,"x":132,"y":0,"pixelRatio":2},"13940":{"width":66,"height":88,"x":330,"y":0,"pixelRatio":2},"13939":{"width":66,"height":88,"x":396,"y":0,"pixelRatio":2},"13944":{"width":66,"height":88,"x":462,"y":0,"pixelRatio":2},"13946":{"width":66,"height":88,"x":528,"y":0,"pixelRatio":2},"13817":{"width":66,"height":88,"x":264,"y":88,"pixelRatio":2},"13822":{"width":66,"height":88,"x":330,"y":88,"pixelRatio":2},"13945":{"width":66,"height":88,"x":528,"y":88,"pixelRatio":2},"13820":{"width":66,"height":88,"x":396,"y":176,"pixelRatio":2},"13824":{"width":66,"height":88,"x":462,"y":176,"pixelRatio":2},"13819":{"width":66,"height":88,"x":198,"y":264,"pixelRatio":2},"13825":{"width":66,"height":88,"x":330,"y":264,"pixelRatio":2},"13838":{"width":66,"height":88,"x":66,"y":528,"pixelRatio":2},"13826":{"width":66,"height":88,"x":396,"y":528,"pixelRatio":2},"13818":{"width":66,"height":88,"x":528,"y":528,"pixelRatio":2},"13821":{"width":66,"height":88,"x":66,"y":616,"pixelRatio":2},"13932":{"width":66,"height":88,"x":0,"y":0,"pixelRatio":2},"13934":{"width":66,"height":88,"x":198,"y":0,"pixelRatio":2},"13839":{"width":66,"height":88,"x":66,"y":176,"pixelRatio":2},"13933":{"width":66,"height":88,"x":132,"y":176,"pixelRatio":2},"13812":{"width":66,"height":88,"x":0,"y":264,"pixelRatio":2},"14023":{"width":66,"height":88,"x":198,"y":352,"pixelRatio":2},"13935":{"width":66,"height":88,"x":264,"y":352,"pixelRatio":2},"13943":{"width":66,"height":88,"x":396,"y":352,"pixelRatio":2},"13931":{"width":66,"height":88,"x":264,"y":440,"pixelRatio":2},"13827":{"width":66,"height":88,"x":66,"y":352,"pixelRatio":2},"13841":{"width":66,"height":88,"x":264,"y":0,"pixelRatio":2},"14032":{"width":66,"height":88,"x":594,"y":0,"pixelRatio":2},"14034":{"width":66,"height":88,"x":0,"y":88,"pixelRatio":2},"13829":{"width":66,"height":88,"x":66,"y":88,"pixelRatio":2},"13828":{"width":66,"height":88,"x":462,"y":88,"pixelRatio":2},"14026":{"width":66,"height":88,"x":0,"y":176,"pixelRatio":2},"14028":{"width":66,"height":88,"x":330,"y":176,"pixelRatio":2},"14035":{"width":66,"height":88,"x":594,"y":176,"pixelRatio":2},"14024":{"width":66,"height":88,"x":198,"y":440,"pixelRatio":2},"14036":{"width":66,"height":88,"x":330,"y":440,"pixelRatio":2},"14027":{"width":66,"height":88,"x":594,"y":440,"pixelRatio":2},"14031":{"width":66,"height":88,"x":132,"y":528,"pixelRatio":2},"14029":{"width":66,"height":88,"x":198,"y":528,"pixelRatio":2},"14030":{"width":66,"height":88,"x":330,"y":528,"pixelRatio":2},"14025":{"width":66,"height":88,"x":462,"y":528,"pixelRatio":2},"14033":{"width":66,"height":88,"x":594,"y":528,"pixelRatio":2},"14037":{"width":66,"height":88,"x":0,"y":616,"pixelRatio":2},"13830":{"width":66,"height":88,"x":396,"y":88,"pixelRatio":2},"13942":{"width":66,"height":88,"x":528,"y":264,"pixelRatio":2},"13831":{"width":66,"height":88,"x":0,"y":352,"pixelRatio":2},"14018":{"width":66,"height":88,"x":462,"y":352,"pixelRatio":2},"14019":{"width":66,"height":88,"x":528,"y":352,"pixelRatio":2},"14020":{"width":66,"height":88,"x":594,"y":352,"pixelRatio":2},"14021":{"width":66,"height":88,"x":0,"y":440,"pixelRatio":2},"14022":{"width":66,"height":88,"x":66,"y":440,"pixelRatio":2},"13930":{"width":66,"height":88,"x":132,"y":440,"pixelRatio":2},"13835":{"width":66,"height":88,"x":264,"y":528,"pixelRatio":2},"13941":{"width":66,"height":88,"x":132,"y":616,"pixelRatio":2},"13936":{"width":66,"height":88,"x":198,"y":176,"pixelRatio":2},"13937":{"width":66,"height":88,"x":264,"y":176,"pixelRatio":2}}
```

--------------------------------

### Filter Map Markers by Category

Source: https://context7.com/pwingles/arc-raiders-map/llms.txt

Allows users to filter map markers by category using checkboxes. It updates a set of visible categories and calls a function to refresh marker visibility on the map, enabling focused viewing of specific item types.

```javascript
// Category checkbox change handler
document.querySelectorAll('.category-checkbox').forEach(checkbox => {
  checkbox.addEventListener('change', (e) => {
    const catId = parseInt(e.target.dataset.categoryId, 10);

    if (e.target.checked) {
      state.visibleCategories.add(catId);
    } else {
      state.visibleCategories.delete(catId);
    }

    // Update marker visibility
    updateMarkerVisibility();
  });
});

// Show only cargo elevators and locked doors
state.visibleCategories.clear();
state.visibleCategories.add(13833); // Cargo Elevator
state.visibleCategories.add(13842); // Locked Door
updateMarkerVisibility();

// Hide all categories
document.getElementById('hideAllBtn').click();

// Show all categories
document.getElementById('showAllBtn').click();
```

--------------------------------

### Google Analytics Event Tracking

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

If Google Analytics (gtag) is available, this code sends a 'view_map' event after a 10-second delay. The event includes the game title and map title as labels.

```javascript
if (window.gtag) { setTimeout(function () { window.gtag('event', 'view_map', { 'event_label': window.game.title + " - " + window.mapData.map.title, }); }, 10000) }
```

--------------------------------

### Embed Arc Raiders Map on Website (HTML)

Source: https://github.com/pwingles/arc-raiders-map/blob/main/dam-battlegrounds-page.html

This snippet allows you to embed the interactive Arc Raiders map directly into your own website. Copy and paste this HTML code into your website's body to display the map. It can be customized with height and width attributes.

```html
<iframe src="https://mapgenie.io/arc-raiders/maps/dam-battlegrounds?embed=light" height="500" style="position: relative; width: 100%;"></iframe>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.