'Add scrollable/zoomable image as a map view
I have to use this image as a map for an indoor app.
I need to keep its aspect ratio and dimensions, to later add markers defined by x/y coordinates (0,0 is top-left) and max coordinates are (100,100) at bottom-right. The image needs to be scrollable/zoomable.
This is how it should looks like (it is the iOS version).
Any idea or recommendation to implement it? This is a requirement of the company and doesn't depend on me.
Solution 1:[1]
A few tips:
Redraw the image as a vector image (e.g SVG) so that it will not be pixelated when you zoom in. There are online tools that will automate this, but for professional results you really need a graphic artist to trace it and generate the vector image.
If you have a very high resolution image, you you may be able to skip making a vector copy (but you will need to limit the zoom level to prevent pixelation.)
Display the image inside a web page in a WebView in your Android app and then use JavaScript to add markers using the HTML DOM.
Write custom code to convert the coordinate system you mention (0,0 to 100,100) to the actual pixel coordinates of the HTML page. This will allow you to put the markers a the right location in the page.
The beauty of this approach is that the WebView handles all the zooming and scrolling for free.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | davidgyoung |