0

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.

Javier Cancio
  • 1,418
  • 12
  • 18
  • See my answer to: [I want to make an indoor map. how can i accomplish a real map /webview like scrolling in it?](https://stackoverflow.com/q/57377660/295004) – Morrison Chang Mar 29 '22 at 22:32

1 Answers1

0

A few tips:

  1. 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.

  2. 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.)

  3. 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.

  4. 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.

davidgyoung
  • 63,876
  • 14
  • 121
  • 204