<!-- Map HTML -->
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
</head>
<div id="map" style="width: 100%; height: 600px;"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [],
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: "https://sordiavignti.xyz/images/FaerunMap.jpg",
projection: map.getView().getProjection(),
imageExtent: [0, 0, 4000, 2878]
})
});
map.addLayer(imageLayer);
</script>