Build an ARK-style survival map

This guide builds a full survival-game map, the kind ARK players keep open while they play. Readers pick a creature and see where it spawns, tick resources, find explorer notes, look up loot crates and drop their own pins by latitude and longitude.

You need the Maps extension switched on and four data files. Everything else happens in Map Studio and the page editor: no code, no scripts. New to maps? Read Interactive maps first.

What you will build

A map with the usual filter panel, holding five tiles. Each tile switches its overlay on and off, and its arrow opens the list behind it:

Around it: a Lat / Lon readout under the cursor, a Surface / Ocean switch for a second map of the same world, and a Map list block under the map that lists every note with Show on map and Mark as found.

Prepare your data

Four files, saved as CSV or JSON. Every coordinate is a latitude or longitude from 0 to 100, the units the map uses from the next step on. Column names are up to you: Map Studio guesses most of them, and you pick the rest from a list.

1. Spawn zones. One row per spawn entry: one creature in one spawner, in one rectangle.

creature,creatureSlug,latMin,lonMin,latMax,lonMax,cave,chance,container,containerDisplayName,sourceName,zoneName
Rex,rex,39.86,34.29,43.17,37.04,true,0.1658,DinoSpawnEntriesCaveTek_Hard_12,Cave Tek Hard 12,Rex_Character_BP_C,Cave_12_Hard
Raptor,raptor,52.10,20.40,58.90,27.70,false,0.25,DinoSpawnEntriesBeach,Beach,Raptor_Character_BP_C,Beach_South

2. Resource nodes. One row per node.

resource,lat,lon,size,cave,color,icon
Metal,23.4,71.2,1,false,#9aa4b1,/media/metal.png
Crystal,61.0,48.7,1.5,true,#c084fc,/media/crystal.png

size scales a node (1 is normal). color is a hex colour per resource, and icon an image address starting with / or https://.

3. Loot locations. Two kinds of row in one file: one row per location with its rectangle, and one row per crate spawn point inside it.

location,lonMin,latMin,lonMax,latMax,crateTypes,maxCrates
Red Cave,30.1,40.2,33.9,44.0,Cave Red|Cave Yellow,3
Red Cave,31.5,41.0,,,Cave Red|Cave Yellow,
Red Cave,32.8,42.6,,,Cave Red|Cave Yellow,

A spawn point row puts its longitude and latitude in lonMin and latMin and leaves the two max columns empty. That makes it a point, and the same location ties it to its rectangle.

Repeat crateTypes on the point rows, so the crate filter keeps them. Separate several types with |.

4. Places. Explorer notes, caves and other landmarks. This one becomes a dataset, because the map list and the found tracking read it.

map,category,title,lat,lon,noteType,xpMultiplier,dossierUrl
the-island,explorer-notes,Helena Note 4,48.2,17.9,Helena,2,/media/dossier-rex.png
the-island,caves,Lava Cave,70.6,86.1,,,

category holds a category ID from the next steps, such as explorer-notes. map lets one dataset feed the Surface and the Ocean map. Upload it now:

1. Click Manage, then Media & Datasets, then the Data tab.
2. Drop the file on New dataset from a file.
3. Name it, for example Places, check the column types and click Create dataset.

Make the map

1. Add a Map embed block to a page, select it and click Open Map Studio.
2. Click + New, type a name such as The Island, upload the base image and click Create map.
3. A very large image? In the Map tab, set Base source to Tiled image (for large maps).
4. Open the Reader tab, unfold Coordinates and click Latitude / longitude (0-100).
5. Click Save map.

Do the coordinates first. The button sets the Map tab’s calibration to 0 to 100 with Flip Y, and every import and marker after it is placed in those units.

It also turns on the readout: Lat first, one decimal, with the full names Latitude and Longitude on the pin inputs.

Categories and places

In the Categories tab, add one category per kind of place: Explorer notes, Caves, Artifacts. Each gets a colour, an icon and an ID; the category column of your dataset uses those IDs.

Tick Trackable on Explorer notes. That gives readers Mark as found.

Now bring the places in. Pick one way:

Either way, each marker now has its row. Tell the map which fields to borrow in the Reader tab, under Places:

Back in Categories, unfold Panel extras on Explorer notes:

Data layers

Creatures, resources and loot are data layers. In the Data layers tab, click + Add layer and pick a preset for each:

Link name is the word readers’ links use, such as ?spawns=rex. Change it now if you want to: once data is imported, a new link name breaks shared links and deletes the imported data.

Then, for each layer:

1. Click Save map. A layer must be saved before it can import.
2. Under Where the data comes from, keep Upload a file (CSV or JSON) and click Pick a file. Nothing is sent yet.
3. Check Columns. Most are guessed from the names; fix the rest (see below).
4. Read the preview: how many items, in how many groups, and how many rows were skipped.
5. Click Import ... items and wait for the upload to finish.

Importing again replaces the layer’s data. Export (JSON) downloads it, Remove imported data empties the layer and keeps its settings. One layer holds up to 250,000 items in up to 2,000 groups; split a bigger file into two layers.

Already have the data as a dataset? Pick A dataset as the source instead, with Only rows where to keep this map’s rows. It updates when the dataset does.

Colour spawn zones by rarity

On the Creatures layer, unfold Colour by value and click Spawn rarity (by chance). Keep Shading on By density.

The colour answers one question: when something spawns in this zone, how likely is it this creature?

A spawn entry’s chance is its share of one spawn roll in its spawner. Where several of the creature’s entries cover exactly the same rectangle, the zone adds them up, to at most 100%. That total picks the colour:

Colour by can also be Items sharing a shape: the colour then counts entries instead of adding chances.

Layer options

Each layer has Options (switch, filter, link, pool, default picks):

Words readers see holds the layer’s wording: the pick label, the search box, the status line. The presets fill sensible ones; change them to fit your game.

The Reader tab

1. Click Survival map preset. It switches the layout to With data layers and adds Creatures, Resources, Loot, Places and Pins.
2. Under Panel entries, rename Pins to Scout and move Places up above Loot with the arrows.

Each entry has a label, an icon, what it Shows, and a Link name for links such as ?layer=loot, which open that entry’s list. A layer or Pins entry is a tile under Map data; a Places entry lists the marker categories as tiles of their own, and can show only some of them.

Surface and Ocean. Make the second map the same way: its own image, the same coordinates preset, its own layers, and Only rows where map is ocean. Then, on the surface map:

1. Unfold Variants and click + Add a variant. The list starts with This map and adds the other one.
2. Set the labels to Surface and Ocean. The keys follow: ?variant=ocean opens the ocean map.
3. Save, open the ocean map and set the same list there.

Put it on a page

1. The Map embed block from the start already shows the surface map.
2. Under it, add a Map list block. Set Map to the surface map.
3. Leave Tabs automatic (trackable or coordinates-list categories) or pick them in order. Tick the ocean map under Also list (variants).
4. Leave Map page empty: Show on map then opens the map on this page.

Readers get category tabs with counts, a search, Show unfound only, Show on map, Mark as found and Show more. Found notes are the same as on the map.

Give it a look. The map block’s Style presets write their settings into its Custom CSS. To make your own, type --tm-* lines there, one per line. A cool sky look:

--tm-radius: 16px
--tm-surface: #0f1d33
--tm-surface-2: #142744
--tm-well: #0a1426
--tm-map-bg: #0a1426
--tm-ring: rgba(120,190,255,0.22)
--tm-ink: #eef6ff
--tm-ink-muted: #9db3cc
--tm-accent: #4fc3ff
--tm-ctl-on-ring: #4fc3ff

Change one colour at a time and watch the canvas. A light look must set the ink, both surfaces, the well, the field and the map backdrop together, or text becomes unreadable.

Check it

1. Pick a creature, tick two resources, set a crate type and add a pin. Click Copy map link and open it in a private window: everything comes back.
2. Open a note’s popup and click Copy link. The link carries ?marker= and opens with that note selected.
3. Try ?layer=loot and ?variant=ocean by hand.
4. Open the page on a phone. The panel becomes a sheet at the bottom, behind a Filters button.
5. Search for a creature, a resource and a note in Search the map.