Trying to create a webpage with an image that can be navigated using drag and scroll events, similar to Google Maps. Instead of building it from scratch, I attempted to achieve this using OpenLayers, with the intention of using the image in place of a map. I have researched examples on stackoverflow, but I am still struggling to figure out how to set the image as the first layer. Here is my current approach:
testOL(content: string) {
// content is the svg as string
this.map = new Map({
target: 'imageArea',
layers: [
new Image({
source: new ImageStatic({
src: content,
})
})
] ,view : new View({
center: [0,0],
zoom: 1
})
})
}
The target is a plain div with no content.
I have attempted to use a URL to an SVG as the image source, as well as adding a Projection and a View to the map, but neither worked. Any help on this issue would be greatly appreciated.