DayZ maps for your website
The map behind map.dzbot.de, for your own site: Chernarus, Livonia, Sakhal and Nasdara, with markers, zones, routes and your own layers. Free, no API key.
Script tag
Load one script, add a div. Made for static sites, forums and server pages.
npm package
@dzbot/map for your frontend, typed, no dependencies, with React bindings.
iframe
No code at all: click your embed together and paste it anywhere that takes HTML.
// Getting startedThree ways in
Load the script and give an element data-dzmap with the map's name. That is all — the map appears in it.
<div data-dzmap="chernarus" data-place-names style="height: 450px"></div> <script src="https://map.dzbot.de/sdk/v1/dzmap.js"></script>
Attributes: data-center="x,z", data-zoom (a number or cover), data-place-names, data-controls="zoom,fullscreen,placeNames", data-pins="x,z,label;x,z,label", data-geojson="url". The map is then at element.dzmap, and the element fires dzmap:ready.
For anything more, use the API — the script puts it on window.dzmap:
<div id="map" style="height: 450px"></div>
<script src="https://map.dzbot.de/sdk/v1/dzmap.js"></script>
<script>
const map = new dzmap.DzMap('#map', { map: 'livonia', placeNames: true })
map.addPin([6400, 11250], { label: 'Our base' })
map.on('click', (e) => console.log(e.world))
</script>npm install @dzbot/map
import { DzMap } from '@dzbot/map'
const map = new DzMap(document.getElementById('map'), {
map: 'sakhal',
zoom: 'cover',
placeNames: true,
})
map.addMarker([7680, 7680], { label: 'Spawn', draggable: true })React: npm install @dzbot/map-react and render <DzMapView map="sakhal" style={{ height: 450 }} />; useDzMap() gives you the map inside it.
Set up your map in the embed builder and copy the code. It looks like this:
<iframe src="https://map.dzbot.de/embed?map=chernarus&pin=6900,2700,Our%20base&fit=1"
width="100%" height="450" style="border:0" loading="lazy" allowfullscreen title="DayZ map"></iframe>// CoordinatesWorld metres, like the game
Every position is [x, z] in metres: x grows east, z grows north, the origin is the south-west corner. These are the numbers DayZ, its admin tools and the server logs use — paste them in as they are. GeoJSON follows the same rule.
// What you getTiles, names, tools
dzbot hosts the map tiles of all four maps and the names of their places. Everything else — your markers, zones, loot tiers, routes — is yours: the SDK gives you the tools to draw it. Keep the small © dzbot.de in the corner visible, and read the map terms once.