XYZ OpenLayer Map

by Vincent Poirier

HTML

<link rel="stylesheet" href="https://dev.warkmap.com/utilities/css/ol.css">
<script src="https://dev.warkmap.com/utilities/js/ol.js"></script>
<body>
    <div id="ark_map">
    
    </div>
</body>

JavaScript

var pixelProj = new ol.proj.Projection({
  code: 'pixel',
  units: 'pixels',
  extent: [0, 0, 11520, 11520]
});

var layer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    projection: pixelProj,
    wrapX: false,
    url: 'https://dev.warkmap.com/images/map/{z}/map_{x}_{y}.png'
  })
});

var map = new ol.Map({
  target: 'ark_map',
  layers: [layer],
  view: new ol.View({
    zoom: 0,
    center: [5760, 5760],
    projection: pixelProj
  })
});