2

I've read that you can create a custom image map with tiles. Now i've seen a video where this proces is being done with LeafletJS video here

But how can i accomplish this with google maps. For instance i've the following example map of a zoo. enter image description here How could i use this with tiles in google maps. Could someone point me in the right direction, tutorials, etc.

Bham
  • 309
  • 5
  • 21

1 Answers1

1

Creating tiles for map is not trivial task, and there are many utilities for that (e.g. maptiler). You should split your image to tiles, and save it in, for example, assets folder. Also you need implement custom TileProvider like in this answer of Alex Vasilkov. But, actually, tiles necessary if you have "big" image, which can't be shown wholly due memory restriction, or you have several images for different zoom levels - in that case one tile of zoomlevel becomes 4 tiles of zoomlevel+1. Taipei zoo schamatics is not so big, so you can use GroundOverlay.

With your image as zoo drawable resource, you can use something like this:

@Override
public void onMapReady(GoogleMap googleMap) {
    mGoogleMap = googleMap;

    GroundOverlayOptions overlayZoo = new GroundOverlayOptions()
            .image(BitmapDescriptorFactory.fromResource(R.drawable.zoo))
            .transparency(0.5f)
            .bearing(135)
            .position(new LatLng(24.995517, 121.584058), 1000f);

    mGoogleMap.addGroundOverlay(overlayZoo);

    mGoogleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(24.995517, 121.584058), 15.0f));
}

and got something like that:

Zoo schematics overlay

and it's zoomable, scrollable, rotatable etc.

Of course, it's just example, and you need more precisely referencing, bearing, removing unnecessary elements, etc. Also the image scheme itself is very approximate and differs from the real terrain.

Andrii Omelchenko
  • 13,183
  • 12
  • 43
  • 79
  • Thx for the info. How could I devide my images to tiles. And how to start drawing a map with accurat positions. – Bham Jan 30 '18 at 21:45
  • 1) use maptiler like in [this](https://www.youtube.com/watch?v=mBNpnG0Us9Q) tutorial; 2) adjust numbers in that `.position(new LatLng(24.995517, 121.584058), 1000f);` line. – Andrii Omelchenko Jan 31 '18 at 09:54
  • I still not now how to start. For example i've found a large image a want to use as tiles. Where to start? Could not found a good tutorial. What about positions. How to split my images into tiles? etc. – Bham Feb 05 '18 at 20:51
  • 1
    @Bham [Here](https://www.youtube.com/watch?v=mBNpnG0Us9Q) is the video tutorial of MapTiler using for creating tiles from image. And [here](https://stackoverflow.com/a/14833256/6950238) is the example for using custom tiles in Google Maps. You need download free version o Maptiler, then start it, then open image from which you want to create tiles, then process it by map tiler. Then you need put tile images into assets folder of your Android application and then use `TileProvider` to show custom tiled map on `MapFragment` (or `MapView`). – Andrii Omelchenko Feb 06 '18 at 09:53